Palette · 9 colors · Lc 9.6
Hot Sauce Circuit palette
Hot Sauce Circuit: a 9-color palette (Trending, Orange, Warm, UI System). HEX, RGB, HSL and OKLCH for #F8F8F8, #F7E5E0, #ECCDC7, #D4B0A7, #B47F72, #A65241, #814E2B, #4F3120, #23100D, WCAG contrast on white and black, plus CSS variables, Tailwind and JSON export.
bg
#F8F8F8
surface
#F7E5E0
muted
#ECCDC7
primary
#D4B0A7
secondary
#B47F72
accent
#A65241
highlight
#814E2B
border
#4F3120
text
#23100D
Colors in Hot Sauce Circuit: HEX, RGB, HSL & OKLCH
- #F8F8F8 color page →
bg
#F8F8F8
- RGB
- rgb(248 248 248)
- HSL
- hsl(0 0% 97%)
- OKLCH
- oklch(0.979 0 0)
WCAG contrast: on white 1.06:1 (Fail) · on black 19.77:1 (AAA)
- #F7E5E0 color page →
surface
#F7E5E0
- RGB
- rgb(247 229 224)
- HSL
- hsl(13 59% 92%)
- OKLCH
- oklch(0.935 0.021 36)
WCAG contrast: on white 1.21:1 (Fail) · on black 17.23:1 (AAA)
- #ECCDC7 color page →
muted
#ECCDC7
- RGB
- rgb(236 205 199)
- HSL
- hsl(10 49% 85%)
- OKLCH
- oklch(0.873 0.036 30.8)
WCAG contrast: on white 1.48:1 (Fail) · on black 14.12:1 (AAA)
- #D4B0A7 color page →
primary
#D4B0A7
- RGB
- rgb(212 176 167)
- HSL
- hsl(12 34% 74%)
- OKLCH
- oklch(0.787 0.044 34.3)
WCAG contrast: on white 1.98:1 (Fail) · on black 10.56:1 (AAA)
- #B47F72 color page →
secondary
#B47F72
- RGB
- rgb(180 127 114)
- HSL
- hsl(12 31% 58%)
- OKLCH
- oklch(0.646 0.069 34.3)
WCAG contrast: on white 3.37:1 (Fail) · on black 6.21:1 (AA)
- #A65241 color page →
accent
#A65241
- RGB
- rgb(166 82 65)
- HSL
- hsl(10 44% 45%)
- OKLCH
- oklch(0.538 0.115 32.8)
WCAG contrast: on white 5.37:1 (AA) · on black 3.90:1 (Fail)
- #814E2B color page →
highlight
#814E2B
- RGB
- rgb(129 78 43)
- HSL
- hsl(24 50% 34%)
- OKLCH
- oklch(0.475 0.085 53.6)
WCAG contrast: on white 6.86:1 (AA) · on black 3.05:1 (Fail)
- #4F3120 color page →
border
#4F3120
- RGB
- rgb(79 49 32)
- HSL
- hsl(22 42% 22%)
- OKLCH
- oklch(0.345 0.052 49.9)
WCAG contrast: on white 11.71:1 (AAA) · on black 1.79:1 (Fail)
- #23100D color page →
text
#23100D
- RGB
- rgb(35 16 13)
- HSL
- hsl(8 46% 9%)
- OKLCH
- oklch(0.2 0.033 29.8)
WCAG contrast: on white 18.23:1 (AAA) · on black 1.15:1 (Fail)
Export Hot Sauce Circuit: CSS variables, Tailwind & JSON
CSS variables
:root {
--bg: #f8f8f8;
--surface: #f7e5e0;
--muted: #eccdc7;
--primary: #d4b0a7;
--secondary: #b47f72;
--accent: #a65241;
--highlight: #814e2b;
--border: #4f3120;
--text: #23100d;
}Tailwind CSS v4 @theme
@theme {
--color-bg: #f8f8f8;
--color-surface: #f7e5e0;
--color-muted: #eccdc7;
--color-primary: #d4b0a7;
--color-secondary: #b47f72;
--color-accent: #a65241;
--color-highlight: #814e2b;
--color-border: #4f3120;
--color-text: #23100d;
}JSON (DTCG tokens)
{
"hot-sauce-circuit-ii": {
"bg": {
"$type": "color",
"$value": "#f8f8f8"
},
"surface": {
"$type": "color",
"$value": "#f7e5e0"
},
"muted": {
"$type": "color",
"$value": "#eccdc7"
},
"primary": {
"$type": "color",
"$value": "#d4b0a7"
},
"secondary": {
"$type": "color",
"$value": "#b47f72"
},
"accent": {
"$type": "color",
"$value": "#a65241"
},
"highlight": {
"$type": "color",
"$value": "#814e2b"
},
"border": {
"$type": "color",
"$value": "#4f3120"
},
"text": {
"$type": "color",
"$value": "#23100d"
}
}
}About this palette
Hot Sauce Circuit is a 9-color OKLCH-ready palette tagged trending, orange, warm, ui system, 9 colors. Hex values: #F8F8F8, #F7E5E0, #ECCDC7, #D4B0A7, #B47F72, #A65241, #814E2B, #4F3120, #23100D. APCA contrast score Lc 9.6. 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 Hot Sauce Circuit by OKLab color distance.