#F764CC#F764CC
#F764CC is a light, highly saturated pink. Relative luminance 0.332; OKLCH L 72.0% C 0.212 H 340.7°. Best body text is #000000 at 7.65:1 contrast (WCAG AA passes).
Color values
| HEX | #F764CC |
|---|---|
| RGB | rgb(247, 100, 204) |
| HSL | hsl(318, 90%, 68%) |
| HSV | hsv(318, 60%, 97%) |
| CMYK | cmyk(0%, 59.5%, 17.4%, 3.1%) |
| CIE-LAB | lab(64.37, 67.24, -26.04) |
| CIE-LCH | lch(64.37, 72.11, 338.83°) |
| OKLab | oklab(72.05% 0.1997 -0.0699) |
| OKLCH | oklch(72.05% 0.212 340.7) |
| XYZ | xyz(53.8152, 33.2528, 60.6992) |
| Luminance | 0.3325 (WCAG relative) |
| Temperature | warm |
| Family | pink |
Closest named colors
Candy Pink
#FF63E9
ΔE00 4.59
Purply Pink
#F075E6
ΔE00 5.24
Orchid
#DA70D6
ΔE00 5.80
Hot Pink
#FF69B4
ΔE00 5.97
Bubblegum (survey)
#FF6CB5
ΔE00 6.13
Pale Magenta
#D767AD
ΔE00 6.54
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#F764CC #64F78F
analogous
#D864F7 #F764CC #F76482
triadic
#F764CC #CCF764 #64CCF7
tetradic
#F764CC #F7D864 #64F78F #6482F7
square
#F764CC #F7D864 #64F78F #6482F7
split-complementary
#F764CC #82F764 #64F7D8
monochromatic
#D60B9A #F42AB9 #F764CC #FA9EDF #FDD8F2
Accessibility & contrast
On white
2.75
#F764CC on #FFFFFF
AA ✗AA large ✗AAA ✗
On black
7.65
#F764CC on #000000
AA ✓AA large ✓AAA ✓
Best text color
#000000 on #F764CC
7.65:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##F764CC | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##F764CC | 1.00 | 2.75 | 7.65 | 7.65 |
| #FFFFFF | 2.75 | 1.00 | 21.00 | 21.00 |
| #000000 | 7.65 | 21.00 | 1.00 | 1.00 |
| ##000000 | 7.65 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#6D8DCF
Deuteranopia (green-blind)
#98A5C8
Tritanopia (blue-blind)
#FF678F
Achromatopsia (no color)
#9C9C9C
Design tokens & code
CSS
--color: #f764cc; /* rgb */ color: rgb(247, 100, 204); /* oklch */ color: oklch(72.0% 0.212 340.7);
Tailwind
colors: {
custom: {
50: '#fd98db',
500: '#f764cc',
950: '#000000',
},
}SCSS
$custom: #f764cc; $custom-light: #fd98db; $custom-dark: #000000;
JSON
{
"hex": "#f764cc",
"rgb": {
"r": 247,
"g": 100,
"b": 204
},
"hsl": {
"h": 317.551,
"s": 90.184,
"l": 68.039
},
"oklch": {
"l": 0.72046,
"c": 0.21153,
"h": 340.7
},
"luminance": 0.33248
}Semantic roles & 50–950 ramp
primary
#F764CC
secondary
#C5F2D2
accent
#E64300
background
#FFF9FD
surface
#FFF2FB
border
#D7CCD4
text
#180E15
muted
#867E83