#CCF2FE#CCF2FE
#CCF2FE is a very light, muted cyan. Relative luminance 0.835; OKLCH L 93.8% C 0.043 H 218.9°. Best body text is #000000 at 17.70:1 contrast (WCAG AA passes).
Color values
| HEX | #CCF2FE |
|---|---|
| RGB | rgb(204, 242, 254) |
| HSL | hsl(194, 96%, 90%) |
| HSV | hsv(194, 20%, 100%) |
| CMYK | cmyk(19.7%, 4.7%, 0%, 0.4%) |
| CIE-LAB | lab(93.23, -9.73, -9.85) |
| CIE-LCH | lch(93.23, 13.85, 225.34°) |
| OKLab | oklab(93.79% -0.0331 -0.0267) |
| OKLCH | oklch(93.79% 0.043 218.9) |
| XYZ | xyz(74.5385, 83.4951, 105.9356) |
| Luminance | 0.8350 (WCAG relative) |
| Temperature | cool |
| Family | cyan |
Closest named colors
Pale Sky Blue
#BDF6FE
ΔE00 5.15
Lightcyan
#E0FFFF
ΔE00 5.68
Very Light Blue
#D5FFFF
ΔE00 6.04
Powder Blue
#B0E0E6
ΔE00 6.11
Lightblue
#ADD8E6
ΔE00 6.12
Really Light Blue
#D4FFFF
ΔE00 6.12
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#CCF2FE #FED8CC
analogous
#CCFEF1 #CCF2FE #CCD9FE
triadic
#CCF2FE #FECCF2 #F2FECC
tetradic
#CCF2FE #F1CCFE #FED8CC #D9FECC
square
#CCF2FE #F1CCFE #FED8CC #D9FECC
split-complementary
#CCF2FE #FECCD9 #FEF1CC
monochromatic
#54D3FC #90E3FD #CCF2FE #E1F7FE #E1F7FE
Accessibility & contrast
On white
1.19
#CCF2FE on #FFFFFF
AA ✗AA large ✗AAA ✗
On black
17.70
#CCF2FE on #000000
AA ✓AA large ✓AAA ✓
Best text color
#000000 on #CCF2FE
17.70:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##CCF2FE | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##CCF2FE | 1.00 | 1.19 | 17.70 | 17.70 |
| #FFFFFF | 1.19 | 1.00 | 21.00 | 21.00 |
| #000000 | 17.70 | 21.00 | 1.00 | 1.00 |
| ##000000 | 17.70 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#EAEFFF
Deuteranopia (green-blind)
#E2E9FE
Tritanopia (blue-blind)
#BEF6F6
Achromatopsia (no color)
#ECECEC
Design tokens & code
CSS
--color: #ccf2fe; /* rgb */ color: rgb(204, 242, 254); /* oklch */ color: oklch(93.8% 0.043 218.9);
Tailwind
colors: {
custom: {
50: '#dcf6fe',
500: '#ccf2fe',
950: '#000000',
},
}SCSS
$custom: #ccf2fe; $custom-light: #dcf6fe; $custom-dark: #000000;
JSON
{
"hex": "#ccf2fe",
"rgb": {
"r": 204,
"g": 242,
"b": 254
},
"hsl": {
"h": 194.4,
"s": 96.154,
"l": 89.804
},
"oklch": {
"l": 0.93789,
"c": 0.04256,
"h": 218.9
},
"luminance": 0.83497
}Semantic roles & 50–950 ramp
primary
#CCF2FE
secondary
#E79E87
accent
#3700E6
background
#FEFFFF
surface
#FCFEFF
border
#D5D6D7
text
#151717
muted
#848585