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:

red
orange
yellow
green
teal
cyan
blue
purple
magenta

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.

base-color

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

white
gray
black

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.

accent
second accent
split
second split
triad
second triad
third triad
complement
tetrad
second tetrad
third tetrad
fourth tetrad
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.

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:

cyan
warm cyan
neutral cyan
cool cyan
dull cyan

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 oranges:

orange
bright orange
light orange
dark orange
dim orange
cool orange
cool bright orange
cool light orange
cool dark orange
cool dim orange
neutral orange
neutral bright orange
neutral light orange
neutral dark orange
neutral dim orange
warm orange
warm bright orange
warm light orange
warm dark orange
warm dim orange
dull orange
dull bright orange
dull light orange
dull dark orange
dull dim orange

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