Lustrous Brass Ripple
A warm palette of 6 colors drawing on black, brown, orange, with a wide lightness range, so it covers backgrounds, text and accents. Its lightest and darkest colors reach a contrast of 13.07:1, enough for body text.
About this palette
A warm palette of 6 colors drawing on black, brown, orange, with a wide lightness range, so it covers backgrounds, text and accents. Its lightest and darkest colors reach a contrast of 13.07:1, enough for body text. Open any color for its conversions, shades, harmonies and contrast.
Colors
- ≈ Balsamico#190D01
A very dark, neutral black (Balsamico) that brings bold, premium contrast. White text sits comfortably on it.
- ≈ Close but No Cigar#332107
A very dark, muted brown (Close but No Cigar) that brings craft and reliability. White text sits comfortably on it.
- ≈ Very Coffee#66430E
A dark, moderately saturated brown (Very Coffee) that brings natural comfort. White text sits comfortably on it.
- ≈ Taupe#B89B7C
A light, muted yellow (Taupe) that brings attention without aggression. Dark text reads well on it.
- ≈ Bone#E4D3C0
A very light, neutral gray (Bone) that brings neutral balance. Dark text reads well on it.
- ≈ Salmon#FF6A5E
A light, vivid red (Salmon) that brings a bold, confident accent. Dark text reads well on it.
Tags
Psychology
Meaning
Applications
Similar palettes
Sunset Boulevard
Sand Dune
Terracotta Clay
Crimson Noir
Forest Ember
Ruby Teal
Accessibility
- On white19.10:1Excellent 5/5
- On black14.37:1Excellent 5/5
- Color blind friendly96% 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 |
|---|---|---|
| Balsamico | Background | #190D01 |
| Close but No Cigar | Surface | #332107 |
| Very Coffee | Primary | #66430E |
| Taupe | Secondary | #B89B7C |
| Bone | Light | #E4D3C0 |
| Salmon | Accent | #FF6A5E |
CSS variables
:root {
--background: #190D01;
--surface: #332107;
--primary: #66430E;
--secondary: #B89B7C;
--light: #E4D3C0;
--accent: #FF6A5E;
}
Tailwind v4 (@theme)
@theme {
--color-background: #190D01;
--color-surface: #332107;
--color-primary: #66430E;
--color-secondary: #B89B7C;
--color-light: #E4D3C0;
--color-accent: #FF6A5E;
}