Complementary · 6 colors · May 23, 2026
Coffee & Jolene
Born from "Coffee & Jolene", Coffee & Jolene explores the natural fluidity of colors that touch in the spectrum. Within it, the sobriety of a mastered architectural space, crossed by a gentle yet readable progression.
✦Palette Usage Guide
Interface Design
Combine #4d3831 for text on #b2c2c4 background.
Emotional Impact
Born from "Coffee & Jolene", Coffee & Jolene explores the natural fluidity of colors that touch in the spectrum. Within it, the sobriety of a mastered architectural space, crossed by a gentle yet readable progression.
5.9:1
AA
1.2:1
Fail
5:1
AA
Convert palette to thread / yarn
Closest matches across major brands
Approximate sRGB matches — request a physical color card from each brand before purchasing.
Developer Assets
Developer handoff assets with copyable code blocks for design systems.
:root {
--color-couleur-1: #4d3831;
--color-couleur-2: #897c6c;
--color-couleur-3: #89b1c6;
--color-couleur-4: #beaf89;
--color-couleur-5: #e4ac48;
--color-couleur-6: #b2c2c4;
}'coffee-jolene': {
600: '#4d3831',
500: '#897c6c',
400: '#89b1c6',
300: '#beaf89',
200: '#e4ac48',
100: '#b2c2c4',
}{
"name": "Coffee & Jolene",
"harmony": "Complementary",
"colors": [
{
"name": "Couleur 1",
"hex": "#4d3831"
},
{
"name": "Couleur 2",
"hex": "#897c6c"
},
{
"name": "Couleur 3",
"hex": "#89b1c6"
},
{
"name": "Couleur 4",
"hex": "#beaf89"
},
{
"name": "Couleur 5",
"hex": "#e4ac48"
},
{
"name": "Couleur 6",
"hex": "#b2c2c4"
}
]
}Design Tokens Export
W3C, Figma and Tokens Studio compatible. Direct integration into your design workflow.
Contrast Ratios
Each color vs. white background
Identity Visuals
Coffee & Jolene
The intersection of form and function reveals the palette in all its depth. Every hue is intentional, every space is a breath.
Surface Card
System element
Color Psychology
Authority & Mastery
Couleur 1 is a dark, quiet red that anchors a direct, assertive presence. Its depth lends the gravity of brands that have nothing to justify — quiet power, total assurance.
Neutrality & Mediation
Couleur 2 is visual silence par excellence — medium and muted, it never takes sides and lets other colors express themselves while maintaining systemic coherence.
Serenity & Lightness
Couleur 3 is a light, quiet cyan positioned midway between blue's analytical rigor and green's vitality. More airy, it reduces cognitive friction and eases exploration. The shade of interfaces that guide without imposing.
Creativity & Accessibility
Couleur 4 is a light orange with quiet saturation that evokes positive, communicative energy. Softened, it preserves orange's vitality without its impetuosity — ideal for brands wanting to appear both inventive and warm.
Warmth & Benevolence
Couleur 5 evokes the light, rich warmth of fired clay — a shade that is both reassuring and memorable. In its lighter tones, it sheds the heaviness of saturated orange to gain accessibility and human closeness.
Lightness & Space
Couleur 6 creates space and breathing room without the aggressiveness of pure white — pale and muted, it reduces visual fatigue and invites reading.
Moodboard
No images found
Brand PDF
Premium Brand Guidelines document with palette, color psychology and moodboard.
PDF Brand Identity Export
7 premium pages: Cover · Palette · Detail · Typography · Usage Guide