#AF628A#AF628A
#AF628A is a mid, moderate pink. Relative luminance 0.197; OKLCH L 59.6% C 0.111 H 348.5°. Best body text is #000000 at 4.94:1 contrast (WCAG AA passes).
Color values
| HEX | #AF628A |
|---|---|
| RGB | rgb(175, 98, 138) |
| HSL | hsl(329, 32%, 54%) |
| HSV | hsv(329, 44%, 69%) |
| CMYK | cmyk(0%, 44%, 21.1%, 31.4%) |
| CIE-LAB | lab(51.48, 36.33, -8.43) |
| CIE-LCH | lch(51.48, 37.30, 346.94°) |
| OKLab | oklab(59.61% 0.1086 -0.022) |
| OKLCH | oklch(59.61% 0.111 348.5) |
| XYZ | xyz(26.6349, 19.6862, 26.4368) |
| Luminance | 0.1968 (WCAG relative) |
| Temperature | warm |
| Family | pink |
Closest named colors
Light Plum
#9D5783
ΔE00 5.42
Mauve (survey)
#AE7181
ΔE00 7.40
Purpleish
#98568D
ΔE00 7.81
Purplish
#94568C
ΔE00 8.49
Purplish Pink
#CE5DAE
ΔE00 8.88
Dusky Purple
#895B7B
ΔE00 8.89
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#AF628A #62AF87
analogous
#AD62AF #AF628A #AF6263
triadic
#AF628A #8AAF62 #628AAF
tetradic
#AF628A #AFAD62 #62AF87 #6263AF
square
#AF628A #AFAD62 #62AF87 #6263AF
split-complementary
#AF628A #63AF62 #62AFAD
monochromatic
#64334C #8C476B #AF628A #C48BA8 #D8B3C6
Accessibility & contrast
On white
4.25
#AF628A on #FFFFFF
AA ✗AA large ✓AAA ✗
On black
4.94
#AF628A on #000000
AA ✓AA large ✓AAA ✗
Best text color
#000000 on #AF628A
4.94:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##AF628A | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##AF628A | 1.00 | 4.25 | 4.94 | 4.94 |
| #FFFFFF | 4.25 | 1.00 | 21.00 | 21.00 |
| #000000 | 4.94 | 21.00 | 1.00 | 1.00 |
| ##000000 | 4.94 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#69738B
Deuteranopia (green-blind)
#7D8088
Tritanopia (blue-blind)
#B96071
Achromatopsia (no color)
#7B7B7B
Design tokens & code
CSS
--color: #af628a; /* rgb */ color: rgb(175, 98, 138); /* oklch */ color: oklch(59.6% 0.111 348.5);
Tailwind
colors: {
custom: {
50: '#c990ac',
500: '#af628a',
950: '#000000',
},
}SCSS
$custom: #af628a; $custom-light: #c990ac; $custom-dark: #000000;
JSON
{
"hex": "#af628a",
"rgb": {
"r": 175,
"g": 98,
"b": 138
},
"hsl": {
"h": 328.831,
"s": 32.489,
"l": 53.529
},
"oklch": {
"l": 0.5961,
"c": 0.11077,
"h": 348.5
},
"luminance": 0.19684
}Semantic roles & 50–950 ramp
primary
#AF628A
secondary
#A6C7B6
accent
#C9925F
background
#FCF9FA
surface
#F8F1F4
border
#D1CBCE
text
#130D10
muted
#827E7F