#877CE2#877CE2
#877CE2 is a light, vivid blue. Relative luminance 0.251; OKLCH L 64.2% C 0.149 H 286.3°. Best body text is #000000 at 6.01:1 contrast (WCAG AA passes).
Color values
| HEX | #877CE2 |
|---|---|
| RGB | rgb(135, 124, 226) |
| HSL | hsl(246, 64%, 69%) |
| HSV | hsv(246, 45%, 89%) |
| CMYK | cmyk(40.3%, 45.1%, 0%, 11.4%) |
| CIE-LAB | lab(57.13, 28.67, -50.66) |
| CIE-LCH | lch(57.13, 58.21, 299.51°) |
| OKLab | oklab(64.18% 0.0419 -0.1432) |
| OKLCH | oklch(64.18% 0.149 286.3) |
| XYZ | xyz(30.9229, 25.0561, 75.1438) |
| Luminance | 0.2506 (WCAG relative) |
| Temperature | cool |
| Family | blue |
Closest named colors
Periwinkle (survey)
#8E82FE
ΔE00 4.28
Lavender Blue
#8B88F8
ΔE00 4.63
Perrywinkle
#8F8CE7
ΔE00 4.84
Mediumpurple
#9370DB
ΔE00 5.09
Cornflower
#6A79F7
ΔE00 6.17
Mediumslateblue
#7B68EE
ΔE00 6.48
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#877CE2 #D7E27C
analogous
#7CA4E2 #877CE2 #BA7CE2
triadic
#877CE2 #E2877C #7CE287
tetradic
#877CE2 #E27CA4 #D7E27C #7CE2BA
square
#877CE2 #E27CA4 #D7E27C #7CE2BA
split-complementary
#877CE2 #E2BA7C #A4E27C
monochromatic
#3929BA #594AD7 #877CE2 #B5AEED #E3E0F8
Accessibility & contrast
On white
3.49
#877CE2 on #FFFFFF
AA ✗AA large ✓AAA ✗
On black
6.01
#877CE2 on #000000
AA ✓AA large ✓AAA ✗
Best text color
#000000 on #877CE2
6.01:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##877CE2 | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##877CE2 | 1.00 | 3.49 | 6.01 | 6.01 |
| #FFFFFF | 3.49 | 1.00 | 21.00 | 21.00 |
| #000000 | 6.01 | 21.00 | 1.00 | 1.00 |
| ##000000 | 6.01 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#568CE6
Deuteranopia (green-blind)
#5486E0
Tritanopia (blue-blind)
#6D90A4
Achromatopsia (no color)
#898989
Design tokens & code
CSS
--color: #877ce2; /* rgb */ color: rgb(135, 124, 226); /* oklch */ color: oklch(64.2% 0.149 286.3);
Tailwind
colors: {
custom: {
50: '#aea2eb',
500: '#877ce2',
950: '#000000',
},
}SCSS
$custom: #877ce2; $custom-light: #aea2eb; $custom-dark: #000000;
JSON
{
"hex": "#877ce2",
"rgb": {
"r": 135,
"g": 124,
"b": 226
},
"hsl": {
"h": 246.471,
"s": 63.75,
"l": 68.627
},
"oklch": {
"l": 0.64179,
"c": 0.14918,
"h": 286.3
},
"luminance": 0.25057
}Semantic roles & 50–950 ramp
primary
#877CE2
secondary
#E9ECCE
accent
#CC1AB8
background
#FBF9FE
surface
#F6F2FD
border
#D0CCD5
text
#110F16
muted
#807E84