CSS Variable Color Schemes Work Better When You Also Define contrast and rgb

DESCRIPTION

Variableize your base CSS colors
That avoids local optimization and spawning many similar colors
It helps to prepare contrast and rgb values for base colors too!

Main Text

Primary and secondary colors are commonly variableized now. If you scatter colors across many component properties, local optimization can lead to cases like "32 shades of blue before you know it", so variableizing colors is standard practice to optimize globally and improve maintainability. Something like this:

:root {
  --color-primary: #3880ff;
  --color-secondary: #3dc2ff;
}

Many teams get this far, but Ionic Framework—a framework for building mobile apps with web technologies—takes the view that "if you variableize, go further to improve maintainability." For example, CSS for a button using the colors above often ends up like this:

button.primary {
  background: var(--color-primary);
  color: #ffffff;
}

When You Want contrast

The main base color background is variableized, but the button text color is not. Naming it something like --color-font often does not fit, which feels unavoidable—but shift the perspective and you can think of it as the contrast color for the primary color. If the primary is dark, #ffffff goes in; if it is light, you expect #000000 or similar. So the CSS variables look like this:

:root {
  --color-primary: #3880ff;
  --color-primary-contrast: #ffffff;
  
  --color-secondary: #3dc2ff;
  --color-secondary-contrast: #ffffff;
}

When You Want rgb

Is that enough? When you build with CSS, have you ever thought, "I want a semi-transparent background, but the opacity property makes the whole element transparent—I only want the background transparent"? Using opacity makes everything including text semi-transparent.
To avoid that, specify the color with rgba. The fourth argument is opacity, so specifying with rgba gives you "semi-transparent background, text not semi-transparent."

Then it is handy to include this in the base colors too. Making things semi-transparent or fine-tuning by looking up rgb every time is tedious, and scattering rgb values defeats the purpose of variableizing base colors. So do this:

:root {
  --color-primary: #3880ff;
  --color-primary-rgb: 56,128,255;
  --color-primary-contrast: #ffffff;
  --color-primary-contrast-rgb: 255,255,255;

  --color-secondary: #3dc2ff;
  --color-secondary-rgb: 61,194,255;
  --color-secondary-contrast: #ffffff;
  --color-secondary-contrast-rgb: 255,255,255;
}

Use it like this:

button.primary {
  background: rgba(var(--color-primary-rgb), 0.9); // 90% opacity
  color: var(--color-primary-contrast);
}

Now you can variableize base colors.

You Can Auto-Generate from Base Colors at the URL Below

If you cannot be bothered to decide contrast as white or black by lightness or to look up rgb values, you can use Ionic Framework's color generator.

https://ionicframework.jp/docs/theming/color-generator

Scroll down and the generated palette appears as CSS variables. In Ionic, shade (a bit darker than the base) and tint (a bit lighter) are generated too; having them is surprisingly handy because you avoid spawning similar colors everywhere.

When you rethink CSS maintainability, I hope you also think about how far to constrain what surrounds base colors.

See you again.