The Cream Theme — Palette, Contrast and CSS Variables
The Cream 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 | #F4EAD7 | rgb(244, 234, 215) | hsl(39, 57%, 90%) |
| Editor | #FDF9F0 | rgb(253, 249, 240) | hsl(42, 76%, 97%) |
| Tint | #EFE2C8 | rgb(239, 226, 200) | hsl(40, 55%, 86%) |
| Accent | #A8862F | rgb(168, 134, 47) | hsl(43, 56%, 42%) |
| Text | #3A3020 | rgb(58, 48, 32) | hsl(37, 29%, 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 | 10.84:1 | pass | pass | pass |
| Text on editor | 12.31:1 | pass | pass | pass |
| Text on tint | 10.09:1 | pass | pass | pass |
| Accent on editor | 3.27:1 | fail | pass | fail |
Copy-paste tokens
:root {
--snippet-bg: #f4ead7;
--snippet-editor: #fdf9f0;
--snippet-tint: #efe2c8;
--snippet-accent: #a8862f;
--snippet-text: #3a3020;
}
What this palette is good for
Bone white with an antique gold accent. The quietest of the eight, useful when the snippet is long and the accent should barely register.
Other themes
Frequently asked questions
Does the Cream text colour pass WCAG on every surface?
Against the editor surface it measures 12.31:1 and against the page background 10.84: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.