The Ocean Theme — Palette, Contrast and CSS Variables
The Ocean 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 | #DDEAF2 | rgb(221, 234, 242) | hsl(203, 45%, 91%) |
| Editor | #F9FBFD | rgb(249, 251, 253) | hsl(210, 50%, 98%) |
| Tint | #D8E7F1 | rgb(216, 231, 241) | hsl(204, 47%, 90%) |
| Accent | #184A66 | rgb(24, 74, 102) | hsl(202, 62%, 25%) |
| Text | #1F3A52 | rgb(31, 58, 82) | hsl(208, 45%, 22%) |
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 | 9.59:1 | pass | pass | pass |
| Text on editor | 11.34:1 | pass | pass | pass |
| Text on tint | 9.31:1 | pass | pass | pass |
| Accent on editor | 9.16:1 | pass | pass | pass |
Copy-paste tokens
:root {
--snippet-bg: #ddeaf2;
--snippet-editor: #f9fbfd;
--snippet-tint: #d8e7f1;
--snippet-accent: #184a66;
--snippet-text: #1f3a52;
}
What this palette is good for
Cool blue wash with a navy accent, chosen when the surrounding page is a dashboard or a data interface rather than an article.
Other themes
Frequently asked questions
Does the Ocean text colour pass WCAG on every surface?
Against the editor surface it measures 11.34:1 and against the page background 9.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.