The Slate Theme — Palette, Contrast and CSS Variables
The Slate theme is five colours, not thirty: a page wash, an editor surface, a tint for chrome, an accent for keywords and one text colour that has to sit legibly on all three surfaces. The table below turns the palette into the numbers you actually need when re-implementing it — channels, hue and, most importantly, contrast against each surface.
Palette in every notation
| Token | HEX | RGB | HSL |
|---|---|---|---|
| Background | #E6E8EC | rgb(230, 232, 236) | hsl(220, 14%, 91%) |
| Editor | #FBFCFD | rgb(251, 252, 253) | hsl(210, 33%, 99%) |
| Tint | #DEE1E7 | rgb(222, 225, 231) | hsl(220, 16%, 89%) |
| Accent | #4C5A6E | rgb(76, 90, 110) | hsl(215, 18%, 36%) |
| Text | #262B34 | rgb(38, 43, 52) | hsl(219, 16%, 18%) |
Contrast on each surface
Ratios use the WCAG 2.1 relative-luminance definition (sRGB gamma linearisation, 0.2126 / 0.7152 / 0.0722 weights). AA wants 4.5:1 for body text and 3:1 for large text; AAA raises those to 7:1 and 4.5:1.
| Pair | Ratio | AA text | AA large | AAA text |
|---|---|---|---|---|
| Text on background | 11.59:1 | pass | pass | pass |
| Text on editor | 13.84:1 | pass | pass | pass |
| Text on tint | 10.85:1 | pass | pass | pass |
| Accent on editor | 6.83:1 | pass | pass | fail |
Copy-paste tokens
:root {
--snippet-bg: #e6e8ec;
--snippet-editor: #fbfcfd;
--snippet-tint: #dee1e7;
--snippet-accent: #4c5a6e;
--snippet-text: #262b34;
}
What this palette is good for
Blue-grey wash with a steel accent, the most neutral cool option and the closest to a printed technical manual.
Other themes
Frequently asked questions
Does the Slate text colour pass WCAG on every surface?
Against the editor surface it measures 13.84:1 and against the page background 11.59:1. AA for body text needs 4.5:1, so the pair that matters for a code screenshot — text on editor — is comfortably above the bar.
Can I reuse these values in my own syntax theme?
Yes, and the copy block above is written as CSS custom properties for that reason. Map background to your editor canvas, editor to the code area, accent to keywords and text to identifiers. Because the palette is light-first, invert the two surfaces rather than the text colour if you need a dark variant.
Render your own snippet in this palette with the Code2Image code to image tool, or compare every palette in the theme library.