#7883BA#7883BA
#7883BA is a light, moderate blue. Relative luminance 0.238; OKLCH L 62.3% C 0.084 H 275.0°. Best body text is #000000 at 5.75:1 contrast (WCAG AA passes).
Color values
| HEX | #7883BA |
|---|---|
| RGB | rgb(120, 131, 186) |
| HSL | hsl(230, 32%, 60%) |
| HSV | hsv(230, 35%, 73%) |
| CMYK | cmyk(35.5%, 29.6%, 0%, 27.1%) |
| CIE-LAB | lab(55.86, 9.44, -30.13) |
| CIE-LCH | lch(55.86, 31.58, 287.40°) |
| OKLab | oklab(62.29% 0.0074 -0.0839) |
| OKLCH | oklch(62.29% 0.084 275) |
| XYZ | xyz(24.7224, 23.7699, 49.7303) |
| Luminance | 0.2377 (WCAG relative) |
| Temperature | cool |
| Family | blue |
Closest named colors
Faded Blue
#658CBB
ΔE00 7.65
Perrywinkle
#8F8CE7
ΔE00 7.79
Soft Blue
#6488EA
ΔE00 8.74
Lavender Blue
#8B88F8
ΔE00 9.51
Dusty Blue
#5A86AD
ΔE00 9.58
Blue Grey
#758DA3
ΔE00 9.65
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#7883BA #BAAF78
analogous
#78A4BA #7883BA #8E78BA
triadic
#7883BA #BA7883 #83BA78
tetradic
#7883BA #BA78A4 #BAAF78 #78BA8E
square
#7883BA #BA78A4 #BAAF78 #78BA8E
split-complementary
#7883BA #BA8E78 #A4BA78
monochromatic
#3E487A #5360A2 #7883BA #A0A8CF #C9CDE3
Accessibility & contrast
On white
3.65
#7883BA on #FFFFFF
AA ✗AA large ✓AAA ✗
On black
5.75
#7883BA on #000000
AA ✓AA large ✓AAA ✗
Best text color
#000000 on #7883BA
5.75:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##7883BA | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##7883BA | 1.00 | 3.65 | 5.75 | 5.75 |
| #FFFFFF | 3.65 | 1.00 | 21.00 | 21.00 |
| #000000 | 5.75 | 21.00 | 1.00 | 1.00 |
| ##000000 | 5.75 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#7289BC
Deuteranopia (green-blind)
#6D83B9
Tritanopia (blue-blind)
#658E96
Achromatopsia (no color)
#868686
Design tokens & code
CSS
--color: #7883ba; /* rgb */ color: rgb(120, 131, 186); /* oklch */ color: oklch(62.3% 0.084 275.0);
Tailwind
colors: {
custom: {
50: '#a1a6cf',
500: '#7883ba',
950: '#000000',
},
}SCSS
$custom: #7883ba; $custom-light: #a1a6cf; $custom-dark: #000000;
JSON
{
"hex": "#7883ba",
"rgb": {
"r": 120,
"g": 131,
"b": 186
},
"hsl": {
"h": 230,
"s": 32.353,
"l": 60
},
"oklch": {
"l": 0.62288,
"c": 0.08418,
"h": 275
},
"luminance": 0.23771
}Semantic roles & 50–950 ramp
primary
#7883BA
secondary
#D4CFBA
accent
#B75FC9
background
#FAFAFC
surface
#F3F4F9
border
#CDCED2
text
#0F0F13
muted
#7F7F82