Afterglow Pine Glacier
A balanced palette of 6 colors drawing on black, green, beige, with a wide lightness range, so it covers backgrounds, text and accents. Its lightest and darkest colors reach a contrast of 12.62:1, enough for body text.
About this palette
A balanced palette of 6 colors drawing on black, green, beige, with a wide lightness range, so it covers backgrounds, text and accents. Its lightest and darkest colors reach a contrast of 12.62:1, enough for body text. Open any color for its conversions, shades, harmonies and contrast.
Colors
- ≈ Cosmic Bit Flip#020F03
A very dark, muted green (Cosmic Bit Flip) that brings growth and calm. White text sits comfortably on it.
- ≈ Haunted Forest#042C0D
A very dark, muted green (Haunted Forest) that brings a fresh, natural feel. White text sits comfortably on it.
- ≈ Pine#285830
A dark, moderately saturated green (Pine) that brings growth and calm. White text sits comfortably on it.
- ≈ Verde#79B589
A light, moderately saturated green (Verde) that brings balance and health. Dark text reads well on it.
- ≈ Nature#C0D5C2
A very light, neutral green (Nature) that brings balance and health. Dark text reads well on it.
- ≈ Sea Serpent#0FCDC9
A light, moderately saturated teal (Sea Serpent) that brings clean, modern calm. Dark text reads well on it.
Tags
Psychology
Meaning
Applications
Similar palettes
Glacier Mint
Citrus Grove
Forest Ember
Jade Dynasty
Pine & Peach
Teal Smoke
Accessibility
- On white19.58:1Excellent 5/5
- On black13.53:1Excellent 5/5
- Color blind friendly99% 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 |
|---|---|---|
| Cosmic Bit Flip | Background | #020F03 |
| Haunted Forest | Surface | #042C0D |
| Pine | Primary | #285830 |
| Verde | Secondary | #79B589 |
| Nature | Light | #C0D5C2 |
| Sea Serpent | Accent | #0FCDC9 |
CSS variables
:root {
--background: #020F03;
--surface: #042C0D;
--primary: #285830;
--secondary: #79B589;
--light: #C0D5C2;
--accent: #0FCDC9;
}
Tailwind v4 (@theme)
@theme {
--color-background: #020F03;
--color-surface: #042C0D;
--color-primary: #285830;
--color-secondary: #79B589;
--color-light: #C0D5C2;
--color-accent: #0FCDC9;
}