Sable Emerald Ember
A warm palette of 6 colors drawing on black, green, gray, with a wide lightness range, so it covers backgrounds, text and accents. Its lightest and darkest colors reach a contrast of 15.74:1, enough for body text.
About this palette
A warm palette of 6 colors drawing on black, green, gray, with a wide lightness range, so it covers backgrounds, text and accents. Its lightest and darkest colors reach a contrast of 15.74:1, enough for body text. Open any color for its conversions, shades, harmonies and contrast.
Colors
- ≈ Dark Veil#0E160B
A very dark, neutral black (Dark Veil) that brings serious elegance. White text sits comfortably on it.
- ≈ Dark Serpent#19320D
A dark, muted green (Dark Serpent) that brings a fresh, natural feel. White text sits comfortably on it.
- ≈ Pine#385829
A dark, moderately saturated green (Pine) that brings balance and health. White text sits comfortably on it.
- ≈ Money#7A9C79
A medium, muted green (Money) that brings a fresh, natural feel. Dark text reads well on it.
- ≈ Ambrosia#C3DDB8
A very light, muted green (Ambrosia) that brings a fresh, natural feel. Dark text reads well on it.
- ≈ Salt#E6F0E2
A very light, neutral gray (Salt) that brings a steady, composed backdrop. Dark text reads well on it.
Tags
Psychology
Meaning
Applications
Similar palettes
Sage Linen
Teal Smoke
Sand Dune
Citrus Grove
Jade Dynasty
Mocha Cream
Accessibility
- On white18.44:1Excellent 5/5
- On black17.92:1Excellent 5/5
- Color blind friendly100% similarExcellent 5/5
Contrast is the best any color in the palette reaches on a plain white or black background. Color blind friendly shows how much of the difference between the colors is kept under the common kinds of color blindness.
Colors and suggested roles
| Color | Role | HEX |
|---|---|---|
| Dark Veil | Background | #0E160B |
| Dark Serpent | Surface | #19320D |
| Pine | Primary | #385829 |
| Money | Secondary | #7A9C79 |
| Ambrosia | Light | #C3DDB8 |
| Salt | Paper | #E6F0E2 |
CSS variables
:root {
--background: #0E160B;
--surface: #19320D;
--primary: #385829;
--secondary: #7A9C79;
--light: #C3DDB8;
--paper: #E6F0E2;
}
Tailwind v4 (@theme)
@theme {
--color-background: #0E160B;
--color-surface: #19320D;
--color-primary: #385829;
--color-secondary: #7A9C79;
--color-light: #C3DDB8;
--color-paper: #E6F0E2;
}