Web Safe Color
Copy-ready color values
HEX
#CCFFFFRGB
rgb(204, 255, 255)HSL
hsl(180, 100%, 90%)HSV
hsv(180, 20%, 100%)CMYK approx.
cmyk(20, 0, 0, 0)Color value table
| Format | Value | Copy |
|---|---|---|
| HEX | #CCFFFF | |
| RGB | rgb(204, 255, 255) | |
| HSL | hsl(180, 100%, 90%) | |
| HSV | hsv(180, 20%, 100%) | |
| CMYK approx. | cmyk(20, 0, 0, 0) | |
| CSS keyword | ccffff |
Contrast and classification
LightLightness1.09:1Contrast with white19.32:1Contrast with blackGreen / TealColor family
Shade and tint preview
White 10%#D1FFFF
White 30%#DBFFFF
White 70%#F0FFFF
White 90%#FAFFFF
Black 10%#B8E6E6
Black 30%#8FB3B3
Black 70%#3D4D4D
Black 90%#141A1A
Harmony palettes
Complementary
#330000#643D3DAnalogous
#D2FFF9#CCFFFFTriadic
#FFFFCC#FFCCFFSplit complementary
#582E2E#2A0000Using Ccffff
Ccffff works best when it is chosen with contrast, surrounding colors, and interface state in mind. Use the HEX value for static CSS, RGB when you need channel-level control, and HSL when adjusting lightness or saturation for hover states. The CMYK value is an approximate screen-to-print conversion, so print workflows should still rely on calibrated design software or a printer profile.
CSS, SCSS, and Tailwind examples
:root {
--color-ccffff: #ccffff;
}
.button-primary {
background: var(--color-ccffff);
color: #000000;
}
$ccffff: #ccffff;
// Tailwind arbitrary value
class="bg-[#ccffff] text-white"