Using colors

Color classes by default change the background color of an element.

Every composable color class is based on the @base-color. Here are the basic ROYGBIV colors:

The base color is the color you specify, and can be used with the composable base-color class, which works like any other color class.

Powering the text colors, black and white are also included. In between, gray is there too.

In addition to the standard colors, which have the same general look palette to palette, Cavepaint has composable color wheel classes too. Since these are based on color wheel rotations, they're drastically different depending on base color.

Examples

Give elements color by adding a color class:

<button>
A button!
</button>

<button class="red">
A button!
</button>

Project colors are generated from one parameter, the @base-color.

Here, it's given to you. But in your own project you can define it to be whatever you want.

Light, bright and dark

Color classes compose with the .light, .bright and .dark classes. These are the three main color variants.

<button class="light green">
A button!
</button>

<button class="bright green">
A button!
</button>

<button class="dark green">
A button!
</button>

Color helpers

Helper classes warm, neutral, cool and dull compose with colors to change their feeling:

Because these use background-image, only one color helper from this section can be used at a time. Still, combining variants and helpers makes for 25 different possible subcolors from each color. Here are all 25 complements:

Try different color composable combinations to give your pages and components the right look and feel.