Palette · 10 colors · Lc 8.8
Steady Light Brown Beacon palette
Steady Light Brown Beacon: a 10-color palette (Yellow, Warm, 10 Colors). HEX, RGB, HSL and OKLCH for #F5EFEC, #F1D4BF, #DDAD85, #C68851, #AE6220, #954A00, #774404, #643E1F, #422C18, #2F2925, WCAG contrast on white and black, plus CSS variables, Tailwind and JSON export.
bg
#F5EFEC
surface
#F1D4BF
muted
#DDAD85
primary
#C68851
secondary
#AE6220
accent
#954A00
highlight
#774404
border
#643E1F
focus
#422C18
text
#2F2925
Colors in Steady Light Brown Beacon: HEX, RGB, HSL & OKLCH
- #F5EFEC color page →
bg
#F5EFEC
- RGB
- rgb(245 239 236)
- HSL
- hsl(20 31% 94%)
- OKLCH
- oklch(0.956 0.008 48.7)
WCAG contrast: on white 1.13:1 (Fail) · on black 18.44:1 (AAA)
- #F1D4BF color page →
surface
#F1D4BF
- RGB
- rgb(241 212 191)
- HSL
- hsl(25 64% 85%)
- OKLCH
- oklch(0.889 0.043 58.1)
WCAG contrast: on white 1.40:1 (Fail) · on black 14.90:1 (AAA)
- #DDAD85 color page →
muted
#DDAD85
- RGB
- rgb(221 173 133)
- HSL
- hsl(27 56% 69%)
- OKLCH
- oklch(0.782 0.078 61.1)
WCAG contrast: on white 2.02:1 (Fail) · on black 10.39:1 (AAA)
- #C68851 color page →
primary
#C68851
- RGB
- rgb(198 136 81)
- HSL
- hsl(28 51% 55%)
- OKLCH
- oklch(0.678 0.104 61.2)
WCAG contrast: on white 2.98:1 (Fail) · on black 7.04:1 (AAA)
- #AE6220 color page →
secondary
#AE6220
- RGB
- rgb(174 98 32)
- HSL
- hsl(28 69% 40%)
- OKLCH
- oklch(0.573 0.124 56.6)
WCAG contrast: on white 4.59:1 (AA) · on black 4.56:1 (AA)
- #954A00 color page →
accent
#954A00
- RGB
- rgb(149 74 0)
- HSL
- hsl(30 100% 29%)
- OKLCH
- oklch(0.494 0.123 54.4)
WCAG contrast: on white 6.44:1 (AA) · on black 3.25:1 (Fail)
- #774404 color page →
highlight
#774404
- RGB
- rgb(119 68 4)
- HSL
- hsl(33 93% 24%)
- OKLCH
- oklch(0.439 0.098 63.1)
WCAG contrast: on white 8.03:1 (AAA) · on black 2.61:1 (Fail)
- #643E1F color page →
border
#643E1F
- RGB
- rgb(100 62 31)
- HSL
- hsl(27 53% 26%)
- OKLCH
- oklch(0.402 0.07 58.1)
WCAG contrast: on white 9.33:1 (AAA) · on black 2.25:1 (Fail)
- #422C18 color page →
focus
#422C18
- RGB
- rgb(66 44 24)
- HSL
- hsl(29 47% 18%)
- OKLCH
- oklch(0.314 0.046 62.2)
WCAG contrast: on white 13.08:1 (AAA) · on black 1.60:1 (Fail)
- #2F2925 color page →
text
#2F2925
- RGB
- rgb(47 41 37)
- HSL
- hsl(24 12% 16%)
- OKLCH
- oklch(0.286 0.011 55.9)
WCAG contrast: on white 14.33:1 (AAA) · on black 1.46:1 (Fail)
Export Steady Light Brown Beacon: CSS variables, Tailwind & JSON
CSS variables
:root {
--bg: #f5efec;
--surface: #f1d4bf;
--muted: #ddad85;
--primary: #c68851;
--secondary: #ae6220;
--accent: #954a00;
--highlight: #774404;
--border: #643e1f;
--focus: #422c18;
--text: #2f2925;
}Tailwind CSS v4 @theme
@theme {
--color-bg: #f5efec;
--color-surface: #f1d4bf;
--color-muted: #ddad85;
--color-primary: #c68851;
--color-secondary: #ae6220;
--color-accent: #954a00;
--color-highlight: #774404;
--color-border: #643e1f;
--color-focus: #422c18;
--color-text: #2f2925;
}JSON (DTCG tokens)
{
"steady-light-brown-beacon-6bt": {
"bg": {
"$type": "color",
"$value": "#f5efec"
},
"surface": {
"$type": "color",
"$value": "#f1d4bf"
},
"muted": {
"$type": "color",
"$value": "#ddad85"
},
"primary": {
"$type": "color",
"$value": "#c68851"
},
"secondary": {
"$type": "color",
"$value": "#ae6220"
},
"accent": {
"$type": "color",
"$value": "#954a00"
},
"highlight": {
"$type": "color",
"$value": "#774404"
},
"border": {
"$type": "color",
"$value": "#643e1f"
},
"focus": {
"$type": "color",
"$value": "#422c18"
},
"text": {
"$type": "color",
"$value": "#2f2925"
}
}
}About this palette
Steady Light Brown Beacon is a 10-color OKLCH-ready palette tagged yellow, warm, 10 colors. Hex values: #F5EFEC, #F1D4BF, #DDAD85, #C68851, #AE6220, #954A00, #774404, #643E1F, #422C18, #2F2925. APCA contrast score Lc 8.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 Steady Light Brown Beacon by OKLab color distance.