The CI · Chapter 6
Steps and harmonies
A CI rarely names more than five or six colours. A website needs more: lighter surfaces, darker text, a fitting accent. The editor computes them from the palette, and you take what you need.
Steps
In the editor, tab Colours, Steps opens the steps 50, 100, 200 up to 900 and 950 for each colour. Each step carries a short hint on what it is good for:
| Hint | Means |
|---|---|
| text on white | dark enough for text on a white ground |
| ground for text | light enough for dark text to read on it |
| area only | neither; for areas and lines |
A click on a step adds it to the palette as a colour of its own. You do not have to, though: the steps go into the export anyway, for instance as --color-main-600, for every colour whose role is not neutral. The colour card in the Colours tab does not show them.
Neutrals with a touch of the main colour
When the palette has a main colour, the button Neutrals with a touch of the main colour stands below the colours. It adds three neutral colours, all slightly in the main colour's hue: an off-white as paper, a mid grey for lines and a dark for text. They are called Paper, Stone and Ink; if a name is taken already, the new one gets an addition.
Goes with it
The section Goes with it computes harmonies from the main colour. A click on a field adds the colour.
| Harmony | What it is |
|---|---|
| Complement | opposite on the colour wheel; the greatest distance, for a single accent |
| Neighbours | left and right of it; calm, belonging together |
| Triad | three evenly spaced hues; lively, needs plenty of neutrals |
| Split complement | two hues beside the complement; contrast, but softer |
The checks run along
To the right of the editor stands Checks, live with a sample page in the CI. Add a colour and it computes again at once, showing the number of hints or all good. So you see whether a new accent is too faint against an existing colour before you save. What the hints mean is in Checks.
Pavo saysA colour from “Goes with it” is a suggestion from the maths, not something the client asked for. You give it a role and a name yourself afterwards.