#CCB543#CCB543
#CCB543 is a light, vivid yellow. Relative luminance 0.463; OKLCH L 77.2% C 0.134 H 97.7°. Best body text is #000000 at 10.26:1 contrast (WCAG AA passes).
Color values
| HEX | #CCB543 |
|---|---|
| RGB | rgb(204, 181, 67) |
| HSL | hsl(50, 57%, 53%) |
| HSV | hsv(50, 67%, 80%) |
| CMYK | cmyk(0%, 11.3%, 67.2%, 20%) |
| CIE-LAB | lab(73.73, -4.62, 58.80) |
| CIE-LCH | lch(73.73, 58.98, 94.49°) |
| OKLab | oklab(77.2% -0.0179 0.1324) |
| OKLCH | oklch(77.2% 0.134 97.7) |
| XYZ | xyz(42.4408, 46.2924, 12.0089) |
| Luminance | 0.4629 (WCAG relative) |
| Temperature | warm |
| Family | yellow |
Closest named colors
Brownish Yellow
#C9B003
ΔE00 4.02
Mustard (survey)
#CEB301
ΔE00 4.13
Dark Yellow
#D5B60A
ΔE00 4.45
Muddy Yellow
#BFAC05
ΔE00 4.54
Mustard
#DBB42C
ΔE00 4.70
Mustard Yellow
#D2BD0A
ΔE00 4.87
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#CCB543 #435ACC
analogous
#CC7043 #CCB543 #9ECC43
triadic
#CCB543 #43CCB5 #B543CC
tetradic
#CCB543 #43CC70 #435ACC #CC439E
square
#CCB543 #43CC70 #435ACC #CC439E
split-complementary
#CCB543 #439ECC #7043CC
monochromatic
#756720 #A5912D #CCB543 #D9C873 #E6DBA3
Accessibility & contrast
On white
2.05
#CCB543 on #FFFFFF
AA ✗AA large ✗AAA ✗
On black
10.26
#CCB543 on #000000
AA ✓AA large ✓AAA ✓
Best text color
#000000 on #CCB543
10.26:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##CCB543 | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##CCB543 | 1.00 | 2.05 | 10.26 | 10.26 |
| #FFFFFF | 2.05 | 1.00 | 21.00 | 21.00 |
| #000000 | 10.26 | 21.00 | 1.00 | 1.00 |
| ##000000 | 10.26 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#C6B134
Deuteranopia (green-blind)
#CCB949
Tritanopia (blue-blind)
#DCA89D
Achromatopsia (no color)
#B5B5B5
Design tokens & code
CSS
--color: #ccb543; /* rgb */ color: rgb(204, 181, 67); /* oklch */ color: oklch(77.2% 0.134 97.7);
Tailwind
colors: {
custom: {
50: '#dfca7d',
500: '#ccb543',
950: '#000000',
},
}SCSS
$custom: #ccb543; $custom-light: #dfca7d; $custom-dark: #000000;
JSON
{
"hex": "#ccb543",
"rgb": {
"r": 204,
"g": 181,
"b": 67
},
"hsl": {
"h": 49.927,
"s": 57.322,
"l": 53.137
},
"oklch": {
"l": 0.77203,
"c": 0.13362,
"h": 97.7
},
"luminance": 0.4629
}Semantic roles & 50–950 ramp
primary
#CCB543
secondary
#98A2D3
accent
#61E147
background
#FEFCF7
surface
#FCF8EE
border
#D5D1C9
text
#16130A
muted
#84827C