Text Color

Text colors, for the most part, are easier to deal with than background colors. The “Alpha compositing” problem that we discussed in the previous lesson doesn’t apply as severely here, and we usually only need one or two main text colors: a text color and a secondary text color. An example use case of this is using the secondary text color for less emphasized text:

In addition to the main text colors, we might also need a text color for each color in our palette. A nice use case for this is creating colorful labels:

As you can see, we’re using a purple text color over a light purple background. If you recall, the CSS variable for the text color here would be --purple-text.

Main text colors #

We can start by defining the main text color in the app, which will depend on the brightness of the theme.

For light themes, we’ll use a blackish color and for dark themes, we’ll use a whitish color. To create a secondary text color that we can use in places where you want less emphasis on the text, we can use opacity (alpha channel) on the main text color. For that we’ll be using rgba:

rgba($text-color, .7)

The text color blending into the background here is often desirable (unlike with background colors, as explained in the previous lesson), so using the alpha channel is usually OK for text color.

• Light theme