Muted palette
Slate Reading
The gray ramp behind a site heavy on text, spaced so every step is visible.
Slate Reading swatches
6 colors · 10 of 30 pairs carry body text
Muted
CSS
:root {
--slate_reading-1: #17191c;
--slate_reading-2: #383f47;
--slate_reading-3: #586572;
--slate_reading-4: #7c8b99;
--slate_reading-5: #a7b0ba;
--slate_reading-6: #d2d6db;
}
Drop these into :root and reference them anywhere. The names follow
the palette so a second palette will not collide with this one.
Take it further
This palette is a starting point. Open it in the generator to change the harmony rule, lock the colors you like and shuffle the rest.
Open in the palette generator Check the first pair for contrast
Which color can sit on which
10 of 30 pairs reach 4.5:1
| On ↓ / text → | #17191C | #383F47 | #586572 | #7C8B99 | #A7B0BA | #D2D6DB |
|---|---|---|---|---|---|---|
| #17191C | Same | 1.65 | 2.95 | 5.04 | 8.02 | 12.06 |
| #383F47 | 1.65 | Same | 1.79 | 3.05 | 4.85 | 7.3 |
| #586572 | 2.95 | 1.79 | Same | 1.71 | 2.72 | 4.09 |
| #7C8B99 | 5.04 | 3.05 | 1.71 | Same | 1.59 | 2.39 |
| #A7B0BA | 8.02 | 4.85 | 2.72 | 1.59 | Same | 1.5 |
| #D2D6DB | 12.06 | 7.3 | 4.09 | 2.39 | 1.5 | Same |
Read a row as the background and a column as the text on it. Anything at 4.5:1 or above carries body text; 3:1 covers large text and interface parts.