How to use a palette
Every theme above is made of five colours, and each one has a clear job. Click a colour to copy its HEX value, or press Copy CSS to get all five as CSS variables that you can paste into your own stylesheet.
- Background: the page itself, the colour that fills the screen.
- Surface: cards, panels and inputs. In a dark theme it is a step lighter than the background, and in a light theme a step darker.
- Text: the main reading colour for body copy and headings.
- Muted: secondary text such as captions, hints and dates.
- Accent: buttons, links and focus marks, the one colour that should stand out.
Choosing a dark palette
Avoid pure black and pure white together. That pair gives the highest possible contrast, 21:1, and on a dark screen the bright letters can glow and blur. A soft light grey on a deep grey is easier to read for a long time. For body text, a ratio between about 10:1 and 15:1 is comfortable, and muted text should stay at 4.5:1 or higher.
Tint matters too. A slightly warm or slightly cool dark feels calmer than a neutral one, which is why the gallery has charcoal, green, blue and plum backgrounds. OLED phones are the exception: a near-black background like Warm Coal saves battery and looks deep, as long as the text stays soft.
Choosing the accent
An accent for buttons and icons should reach at least 3:1 against the background. If you also use it for text links, aim for 4.5:1. Check the text on the button as well: Midnight Amber uses dark text on the amber button, while a deep accent such as Lavender takes white text.
Light palettes still matter
A bright room, a printed page or a reader who sees better on a light screen all call for a light theme. The light palettes here avoid pure white and use warm or cool off-whites, which reduces glare while keeping the text sharp. Sepia and Paper are good for reading in the evening, and Cloud suits dashboards and documents.
Check before you ship
A palette on a swatch is not the same as a palette on a real page. Put your text on it, look at it on a phone as well as a monitor and measure the pairs you use most. The Contrast Checker does the maths, our guide on checking contrast for dark themes shows the steps, and the article on contrast in dark themes explains why the numbers matter.