Palettes, Swatches, and Color Schemes

Palettes #

A color palette is a collection of colors we might want to use.

It’s important to prepare a palette as this makes our usage of colors consistent throughout the app.

Swatches #

A swatch is a sample of a color chosen from a range of similar colors. It’s very common to use several swatches of a color in different scenarios.

For each swatch, there’s a CSS variable. This is how we’ll name our swatches: --{color-name}-{swatch}

The {swatch} is a number, by default 50, 75, 100, 200, 300, 400, or 500.

This gives us variables for a single color (for example, for the blue color):

--blue-50: #e3edff;
--blue-75: #c7dcff;
--blue-100: #b4d0ff;
--blue-200: #a2c5ff;
--blue-300: #8fb9ff;
--blue-400: #69a1ff;
--blue-500: #448aff;

Note: Sometimes, we might need a blue to use as the text color. Usually, using --blue-500 won’t be good enough, so we’ll define an additional --{color-name}-text variable for each color to be used exclusively for texts. We’ll learn more about this in a later lesson.

These are the default swatches, but in a later section you’ll learn how you can customize this in css-theming.

Color schemes #

Choosing a color scheme involves handpicking certain colors and giving them a meaning in our app. An example of this is picking a blue and using that as the primary color of our app. We call this a semantic color when we refer to it, as it visualizes a meaning in the app instead of a raw color.

Here’s an example of a color scheme:

In this example, and from what we see in the figure, we have decided that we’ll use purple as the color for primary. Assuming we use primary as the accent in our app, this means we’ll be seeing purple in those places. The same applies to the other semantic colors.

Note: Semantic colors are not set in stone, we should be able to add to these and change them to whatever we think is useful in our app.

Defining a color scheme is liberating when developing components, as we don’t have to think about exact colors, we simply choose a semantic color that has the appropriate meaning.

This also makes it easier to create a different theme that updates the whole feel of the app simply by changing a semantic color. Below we’re changing the primary semantic color to show you the effect:

• Indigo as the primary color:

• Green as the primary color: