#CCB4AE#CCB4AE
#CCB4AE is a light, muted red. Relative luminance 0.485; OKLCH L 78.9% C 0.029 H 34.3°. Best body text is #000000 at 10.71:1 contrast (WCAG AA passes).
Color values
| HEX | #CCB4AE |
|---|---|
| RGB | rgb(204, 180, 174) |
| HSL | hsl(12, 23%, 74%) |
| HSV | hsv(12, 15%, 80%) |
| CMYK | cmyk(0%, 11.8%, 14.7%, 20%) |
| CIE-LAB | lab(75.16, 7.60, 6.21) |
| CIE-LCH | lch(75.16, 9.81, 39.23°) |
| OKLab | oklab(78.88% 0.024 0.0164) |
| OKLCH | oklch(78.88% 0.029 34.3) |
| XYZ | xyz(48.8627, 48.5370, 46.8308) |
| Luminance | 0.4854 (WCAG relative) |
| Temperature | warm |
| Family | red |
Closest named colors
Pinkish Grey
#C8ACA9
ΔE00 2.93
Warm Gray
#C9BEB0
ΔE00 8.27
Mushroom
#BA9E88
ΔE00 9.40
Greige
#B8AB98
ΔE00 9.94
Silver
#C0C0C0
ΔE00 10.21
Dusty Pink
#D8A7B1
ΔE00 10.41
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#CCB4AE #AEC6CC
analogous
#CCAEB7 #CCB4AE #CCC3AE
triadic
#CCB4AE #AECCB4 #B4AECC
tetradic
#CCB4AE #B7CCAE #AEC6CC #C3AECC
square
#CCB4AE #B7CCAE #AEC6CC #C3AECC
split-complementary
#CCB4AE #AECCC3 #AEB7CC
monochromatic
#9D6E63 #B49188 #CCB4AE #E4D7D4 #F3EEEC
Accessibility & contrast
On white
1.96
#CCB4AE on #FFFFFF
AA ✗AA large ✗AAA ✗
On black
10.71
#CCB4AE on #000000
AA ✓AA large ✓AAA ✓
Best text color
#000000 on #CCB4AE
10.71:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##CCB4AE | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##CCB4AE | 1.00 | 1.96 | 10.71 | 10.71 |
| #FFFFFF | 1.96 | 1.00 | 21.00 | 21.00 |
| #000000 | 10.71 | 21.00 | 1.00 | 1.00 |
| ##000000 | 10.71 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#B9B6AE
Deuteranopia (green-blind)
#BFBBAE
Tritanopia (blue-blind)
#D2B1B2
Achromatopsia (no color)
#B9B9B9
Design tokens & code
CSS
--color: #ccb4ae; /* rgb */ color: rgb(204, 180, 174); /* oklch */ color: oklch(78.9% 0.029 34.3);
Tailwind
colors: {
custom: {
50: '#dbcac6',
500: '#ccb4ae',
950: '#000000',
},
}SCSS
$custom: #ccb4ae; $custom-light: #dbcac6; $custom-dark: #000000;
JSON
{
"hex": "#ccb4ae",
"rgb": {
"r": 204,
"g": 180,
"b": 174
},
"hsl": {
"h": 12,
"s": 22.727,
"l": 74.118
},
"oklch": {
"l": 0.78877,
"c": 0.02903,
"h": 34.3
},
"luminance": 0.48536
}Semantic roles & 50–950 ramp
primary
#CCB4AE
secondary
#E1E8EA
accent
#8FA144
background
#FDFCFC
surface
#FBF8F8
border
#D4D1D1
text
#151313
muted
#838282