A colour palette for interfaces and code.
22 colours in each variant.
All three variants, with Hex, RGB, HSL, and OKLCH side by side.
Background colours run from bg0 to bg5, and text colours from fg5 to fg0. bg0 is the darkest background in Coal and Smoulder, and the lightest in Ash.
The examples are using bg1 for backgrounds and fg1 for body text but you can try any fg-bg combination.
You can find each colour’s hex, RGB, HSL, OKLCH, and CSS names in the JSON file.
Dark, with neutral backgrounds and text shades that range from cool to warm.
| Colour | Name | Hex | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| bg0 | |||||
| bg1 | |||||
| bg2 | |||||
| bg3 | |||||
| bg4 | |||||
| bg5 | |||||
| fg5 | |||||
| fg4 | |||||
| fg3 | |||||
| fg2 | |||||
| fg1 | |||||
| fg0 | |||||
| rose | |||||
| ember | |||||
| coral | |||||
| apricot | |||||
| honey | |||||
| fern | |||||
| verdigris | |||||
| cornflower | |||||
| lilac | |||||
| orchid |
A softer dark variant with gentler contrast and accents.
| Colour | Name | Hex | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| bg0 | |||||
| bg1 | |||||
| bg2 | |||||
| bg3 | |||||
| bg4 | |||||
| bg5 | |||||
| fg5 | |||||
| fg4 | |||||
| fg3 | |||||
| fg2 | |||||
| fg1 | |||||
| fg0 | |||||
| rose | |||||
| ember | |||||
| coral | |||||
| apricot | |||||
| honey | |||||
| fern | |||||
| verdigris | |||||
| cornflower | |||||
| lilac | |||||
| orchid |
A light variant with warm backgrounds and softer accents.
| Colour | Name | Hex | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| bg0 | |||||
| bg1 | |||||
| bg2 | |||||
| bg3 | |||||
| bg4 | |||||
| bg5 | |||||
| fg5 | |||||
| fg4 | |||||
| fg3 | |||||
| fg2 | |||||
| fg1 | |||||
| fg0 | |||||
| rose | |||||
| ember | |||||
| coral | |||||
| apricot | |||||
| honey | |||||
| fern | |||||
| verdigris | |||||
| cornflower | |||||
| lilac | |||||
| orchid |
Some examples for interfaces, code, and terminals.
| Token | Interface examples | Code and other examples | |
|---|---|---|---|
| Inset surfaces | Code blocks and terminal panes. | ||
| Page background | Editor and terminal backgrounds. | ||
| Cards and controls | Active lines and selected rows. | ||
| Borders and dividers | Split separators and guides. | ||
| Inactive fills | Line numbers, gutters, and whitespace marks. | ||
| Subtle controls | Comments, delimiters, and punctuation. | ||
| Muted text | Low-priority annotations. | ||
| Labels and captions | Status text and annotations. | ||
| Supporting text | Less prominent editor text. | ||
| Secondary text | Secondary editor text. | ||
| Body text | Text, variables, and terminal foreground. | ||
| Headings | Bright terminal white and emphasized results. | ||
| Accent and cursor | Regex and escape sequences. | ||
| Errors | Diagnostics and deleted content. | ||
| Secondary accent | Parameters, markup tags, and deprecated symbols. | ||
| Warm highlights | Numbers and constants. | ||
| Warnings | Types, classes, and attributes. | ||
| Success | Strings and added content. | ||
| Info and hints | Operators and hints. | ||
| Links | Functions, methods, and properties. | ||
| Focus and selection | Matching brackets and marks. Selection can use a low-opacity tint. | ||
| Alternate accent | Keywords and control flow. |
GitHubbg5fg1orchidcornflowerfernapricothoneyverdigriscoralroseemberhoneyverdigrisfernfern on diff-addember on diff-removeorchid on diff-modifytimeout: 15,timeout: 30,retries: 2,bg0emberfernhoneycornflowerorchidverdigrisfg1bg5coralfernapricotlilacroseverdigrisfg0All six fg shades reach at least 4.5:1 contrast against bg1. However contrast will change with the background and opacity, so some combinations might end up with lower contrast, especially in Ash.
You can check and compare the contrast and play around with combinations with different backgrounds, colours, and opacity levels in Playground.