#CAA13F#CAA13F
#CAA13F is a light, vivid orange. Relative luminance 0.384; OKLCH L 72.9% C 0.124 H 85.8°. Best body text is #000000 at 8.68:1 contrast (WCAG AA passes).
Color values
| HEX | #CAA13F |
|---|---|
| RGB | rgb(202, 161, 63) |
| HSL | hsl(42, 57%, 52%) |
| HSV | hsv(42, 69%, 79%) |
| CMYK | cmyk(0%, 20.3%, 68.8%, 20.8%) |
| CIE-LAB | lab(68.32, 4.90, 54.80) |
| CIE-LCH | lch(68.32, 55.02, 84.89°) |
| OKLab | oklab(72.87% 0.0091 0.1233) |
| OKLCH | oklch(72.87% 0.124 85.8) |
| XYZ | xyz(38.0014, 38.4077, 10.1135) |
| Luminance | 0.3841 (WCAG relative) |
| Temperature | warm |
| Family | orange |
Closest named colors
Yellow Ochre
#CB9D06
ΔE00 4.13
Ocre
#C69C04
ΔE00 4.34
Goldenrod
#DAA520
ΔE00 4.44
Camel (survey)
#C69F59
ΔE00 4.51
Sand Brown
#CBA560
ΔE00 4.79
Ocher
#BF9B0C
ΔE00 4.83
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#CAA13F #3F68CA
analogous
#CA5C3F #CAA13F #AECA3F
triadic
#CAA13F #3FCAA1 #A13FCA
tetradic
#CAA13F #3FCA5C #3F68CA #CA3FAE
square
#CAA13F #3FCA5C #3F68CA #CA3FAE
split-complementary
#CAA13F #3FAECA #5C3FCA
monochromatic
#70581F #A07E2C #CAA13F #D7B86F #E4D09F
Accessibility & contrast
On white
2.42
#CAA13F on #FFFFFF
AA ✗AA large ✗AAA ✗
On black
8.68
#CAA13F on #000000
AA ✓AA large ✓AAA ✓
Best text color
#000000 on #CAA13F
8.68:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##CAA13F | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##CAA13F | 1.00 | 2.42 | 8.68 | 8.68 |
| #FFFFFF | 2.42 | 1.00 | 21.00 | 21.00 |
| #000000 | 8.68 | 21.00 | 1.00 | 1.00 |
| ##000000 | 8.68 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#B4A033
Deuteranopia (green-blind)
#BEAB43
Tritanopia (blue-blind)
#DB938D
Achromatopsia (no color)
#A7A7A7
Design tokens & code
CSS
--color: #caa13f; /* rgb */ color: rgb(202, 161, 63); /* oklch */ color: oklch(72.9% 0.124 85.8);
Tailwind
colors: {
custom: {
50: '#debc79',
500: '#caa13f',
950: '#000000',
},
}SCSS
$custom: #caa13f; $custom-light: #debc79; $custom-dark: #000000;
JSON
{
"hex": "#caa13f",
"rgb": {
"r": 202,
"g": 161,
"b": 63
},
"hsl": {
"h": 42.302,
"s": 56.735,
"l": 51.961
},
"oklch": {
"l": 0.72874,
"c": 0.12367,
"h": 85.8
},
"luminance": 0.38405
}Semantic roles & 50–950 ramp
primary
#CAA13F
secondary
#94A6D1
accent
#75E048
background
#FEFBF7
surface
#FCF6EE
border
#D5D0C9
text
#161209
muted
#84817B