Palette · 9 colors · Lc 9.8
Frappé au Chocolat Tide palette
Frappé au Chocolat Tide: a 9-color palette (Yellow, Warm, Nature, Brown). HEX, RGB, HSL and OKLCH for #F6EFDC, #DFD1B7, #C6A978, #A58253, #9D683E, #744F2E, #5A3A22, #3D2313, #20160D, WCAG contrast on white and black, plus CSS variables, Tailwind and JSON export.
bg
#F6EFDC
surface
#DFD1B7
muted
#C6A978
primary
#A58253
secondary
#9D683E
accent
#744F2E
highlight
#5A3A22
border
#3D2313
text
#20160D
Colors in Frappé au Chocolat Tide: HEX, RGB, HSL & OKLCH
- #F6EFDC color page →
bg
#F6EFDC
- RGB
- rgb(246 239 220)
- HSL
- hsl(44 59% 91%)
- OKLCH
- oklch(0.953 0.026 90.1)
WCAG contrast: on white 1.14:1 (Fail) · on black 18.29:1 (AAA)
- #DFD1B7 color page →
surface
#DFD1B7
- RGB
- rgb(223 209 183)
- HSL
- hsl(39 38% 80%)
- OKLCH
- oklch(0.865 0.038 83)
WCAG contrast: on white 1.50:1 (Fail) · on black 13.94:1 (AAA)
- #C6A978 color page →
muted
#C6A978
- RGB
- rgb(198 169 120)
- HSL
- hsl(38 41% 62%)
- OKLCH
- oklch(0.749 0.073 80.3)
WCAG contrast: on white 2.24:1 (Fail) · on black 9.34:1 (AAA)
- #A58253 color page →
primary
#A58253
- RGB
- rgb(165 130 83)
- HSL
- hsl(34 33% 49%)
- OKLCH
- oklch(0.629 0.077 73.8)
WCAG contrast: on white 3.54:1 (Fail) · on black 5.91:1 (AA)
- #9D683E color page →
secondary
#9D683E
- RGB
- rgb(157 104 62)
- HSL
- hsl(27 43% 43%)
- OKLCH
- oklch(0.565 0.089 58)
WCAG contrast: on white 4.68:1 (AA) · on black 4.48:1 (Fail)
- #744F2E color page →
accent
#744F2E
- RGB
- rgb(116 79 46)
- HSL
- hsl(28 43% 32%)
- OKLCH
- oklch(0.461 0.069 61.5)
WCAG contrast: on white 7.24:1 (AAA) · on black 2.90:1 (Fail)
- #5A3A22 color page →
highlight
#5A3A22
- RGB
- rgb(90 58 34)
- HSL
- hsl(26 45% 24%)
- OKLCH
- oklch(0.38 0.058 56.8)
WCAG contrast: on white 10.17:1 (AAA) · on black 2.06:1 (Fail)
- #3D2313 color page →
border
#3D2313
- RGB
- rgb(61 35 19)
- HSL
- hsl(23 53% 16%)
- OKLCH
- oklch(0.286 0.048 51.4)
WCAG contrast: on white 14.50:1 (AAA) · on black 1.44:1 (Fail)
- #20160D color page →
text
#20160D
- RGB
- rgb(32 22 13)
- HSL
- hsl(28 42% 9%)
- OKLCH
- oklch(0.21 0.023 63)
WCAG contrast: on white 17.76:1 (AAA) · on black 1.18:1 (Fail)
Export Frappé au Chocolat Tide: CSS variables, Tailwind & JSON
CSS variables
:root {
--bg: #f6efdc;
--surface: #dfd1b7;
--muted: #c6a978;
--primary: #a58253;
--secondary: #9d683e;
--accent: #744f2e;
--highlight: #5a3a22;
--border: #3d2313;
--text: #20160d;
}Tailwind CSS v4 @theme
@theme {
--color-bg: #f6efdc;
--color-surface: #dfd1b7;
--color-muted: #c6a978;
--color-primary: #a58253;
--color-secondary: #9d683e;
--color-accent: #744f2e;
--color-highlight: #5a3a22;
--color-border: #3d2313;
--color-text: #20160d;
}JSON (DTCG tokens)
{
"frapp-au-chocolat-tide-4ea": {
"bg": {
"$type": "color",
"$value": "#f6efdc"
},
"surface": {
"$type": "color",
"$value": "#dfd1b7"
},
"muted": {
"$type": "color",
"$value": "#c6a978"
},
"primary": {
"$type": "color",
"$value": "#a58253"
},
"secondary": {
"$type": "color",
"$value": "#9d683e"
},
"accent": {
"$type": "color",
"$value": "#744f2e"
},
"highlight": {
"$type": "color",
"$value": "#5a3a22"
},
"border": {
"$type": "color",
"$value": "#3d2313"
},
"text": {
"$type": "color",
"$value": "#20160d"
}
}
}About this palette
Frappé au Chocolat Tide is a 9-color OKLCH-ready palette tagged yellow, warm, nature, brown, 9 colors. Hex values: #F6EFDC, #DFD1B7, #C6A978, #A58253, #9D683E, #744F2E, #5A3A22, #3D2313, #20160D. APCA contrast score Lc 9.8. Open it in Colorise Pro Studio to lock roles and regenerate harmonies.
Related palettes
Shared tags, similar size and contrast.
Palettes with similar colors
Closest to Frappé au Chocolat Tide by OKLab color distance.