The CI · Chapter 5
Colours
The colours are the tab that shows first when you open a client. Each colour has a name, a role and its values for screen and print.
The colour card
In the tab Colours, each colour stands as a card. At the top the colour area with a text sample on it: White on it or Dark on it, whichever text reads better, with its contrast ratio. Below come name, role and note, and the values:
| Value | Example |
|---|---|
| HEX | #1F4E79 |
| RGB and HSL | computed from the hex value |
| CMYK | CMYK, computed, or CMYK, given when the style guide names a value |
| Pantone | as you entered it |
| Token | --color-<name>, the colour's name in the code |
A click on a line copies the value. A tick shows briefly that it worked.
Adding colours in a draft
You change colours only in a draft. In the editor, each colour has a colour picker and a field for the hex value, plus Name, Role, Pantone, CMYK given and a note, for instance what the colour is for. Beside it, on white shows the contrast with white straight away. The arrows reorder the colours, the button Colour adds a new one.
- Write values as
#RRGGBBor short as#RGB; the short form is widened. - Each name occurs only once, regardless of capitals.
- A version holds at most 48 colours.
- Rename a colour, and rules and dark mode follow the new name.
Four roles
| Role | Affects |
|---|---|
| Main colour | suggestions for harmonies, neutrals and dark mode start from it; the checks measure it as a text colour on light neutrals |
| Second colour, Accent | colourful colours with steps in the export |
| Neutral | greys and grounds: no steps in the export, no place in the sidebar's colour strip, no colour vision hints |
The steps from 50 to 950 and the harmonies are not on the card but in the editor, under Steps and Goes with it. The next chapter, Steps and harmonies, explains them.
Pavo saysA colour whose value cannot be read is named in the editor's checks and left out, instead of a quiet “all good”.