Color Palette

This theme uses CSS cascading variables.

The color palette uses a three-color combination and allow to set the primary color hue angle and the left and right secondary colors hue angle (respectively adding and subtractinf from the primary hue angle).

The hue angle is based on the hsl color space but the color palette is generated using oklch, this make it easier to select a color hue from the HSL while still taking advantage of the benefits that OKLCH provides.

Color Harmonies

It’s possible to generate the color palette for a variety of Color Harmonies simply by modifying the variable --secondary-colors-angle.

The default palette uses the triadic color scheme (secondary colors angle variable named --secondary-colors-angle set to 120deg).

It’s possible to invert secondary left and secondary right by applying a simple formula.

Given the --secondary-colors-angle angle a, we can use the formula a + 2 x (180deg - a) to invert secondary left and secondary right.

For example, whith --secondary-colors-angle set to 120deg, to invert left and right we would use 240deg.

Example:

1:root {
2  /* 120deg + 2 x (180deg - 120deg) = 240deg */
3  --colors-secondary-hue-angle: 240deg;
4}

Analogous

Preferred values:

• between 15 and 50 degrees
• between 310 and 345 degrees (left and right inverted)

Best values:

• 30 degrees
• 330 degrees (left and right inverted)

Example:

1:root {
2  --colors-secondary-hue-angle: 30deg;
3}

Triadic

Values:

• 120 degrees
• 240 degrees (left and right inverted)

Example:

1:root {
2  --colors-secondary-hue-angle: 120deg;
3}

Split-Complementary

Preferred values:

• between 130 and 165 degrees
• between 195 and 230 degrees (left and right inverted)

Best values:

• 150 degrees
• 210 degrees (left and right inverted)

Example:

1:root {
2  --colors-secondary-hue-angle: 160deg;
3}

Complementary

We can use 180 degrees to achieve a complementary color scheme: this way, the left and right secondary colors will have the same angle, thus generating the same color palette.

Example:

1:root {
2  --colors-secondary-hue-angle: 180deg;
3}

Palettes