#CCC3FD#CCC3FD
#CCC3FD is a very light, moderate blue. Relative luminance 0.590; OKLCH L 84.4% C 0.081 H 291.7°. Best body text is #000000 at 12.79:1 contrast (WCAG AA passes).
Color values
| HEX | #CCC3FD |
|---|---|
| RGB | rgb(204, 195, 253) |
| HSL | hsl(249, 94%, 88%) |
| HSV | hsv(249, 23%, 99%) |
| CMYK | cmyk(19.4%, 22.9%, 0%, 0.8%) |
| CIE-LAB | lab(81.27, 14.70, -27.36) |
| CIE-LCH | lch(81.27, 31.06, 298.25°) |
| OKLab | oklab(84.41% 0.0298 -0.0749) |
| OKLCH | oklch(84.41% 0.081 291.7) |
| XYZ | xyz(62.1425, 58.9588, 101.0157) |
| Luminance | 0.5896 (WCAG relative) |
| Temperature | cool |
| Family | blue |
Closest named colors
Periwinkle
#CCCCFF
ΔE00 2.96
Light Periwinkle
#C1C6FC
ΔE00 3.72
Light Lavender
#DFC5FE
ΔE00 4.78
Pale Lilac
#E4CBFF
ΔE00 5.69
Light Violet
#D6B4FC
ΔE00 6.06
Pale Violet
#CEAEFA
ΔE00 6.54
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#CCC3FD #F4FDC3
analogous
#C3D7FD #CCC3FD #E9C3FD
triadic
#CCC3FD #FDCCC3 #C3FDCC
tetradic
#CCC3FD #FDC3D7 #F4FDC3 #C3FDE9
square
#CCC3FD #FDC3D7 #F4FDC3 #C3FDE9
split-complementary
#CCC3FD #FDE9C3 #D7FDC3
monochromatic
#674DF9 #9A88FB #CCC3FD #E6E1FE #E6E1FE
Accessibility & contrast
On white
1.64
#CCC3FD on #FFFFFF
AA ✗AA large ✗AAA ✗
On black
12.79
#CCC3FD on #000000
AA ✓AA large ✓AAA ✓
Best text color
#000000 on #CCC3FD
12.79:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##CCC3FD | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##CCC3FD | 1.00 | 1.64 | 12.79 | 12.79 |
| #FFFFFF | 1.64 | 1.00 | 21.00 | 21.00 |
| #000000 | 12.79 | 21.00 | 1.00 | 1.00 |
| ##000000 | 12.79 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#B6CBFF
Deuteranopia (green-blind)
#B6C9FB
Tritanopia (blue-blind)
#C2CCD7
Achromatopsia (no color)
#CACACA
Design tokens & code
CSS
--color: #ccc3fd; /* rgb */ color: rgb(204, 195, 253); /* oklch */ color: oklch(84.4% 0.081 291.7);
Tailwind
colors: {
custom: {
50: '#dcd5fe',
500: '#ccc3fd',
950: '#000000',
},
}SCSS
$custom: #ccc3fd; $custom-light: #dcd5fe; $custom-dark: #000000;
JSON
{
"hex": "#ccc3fd",
"rgb": {
"r": 204,
"g": 195,
"b": 253
},
"hsl": {
"h": 249.31,
"s": 93.548,
"l": 87.843
},
"oklch": {
"l": 0.84409,
"c": 0.08065,
"h": 291.7
},
"luminance": 0.58959
}Semantic roles & 50–950 ramp
primary
#CCC3FD
secondary
#D5E480
accent
#E600C2
background
#FEFEFF
surface
#FCFBFF
border
#D5D4D7
text
#151417
muted
#848385