#778EC1#778EC1
#778EC1 is a light, moderate blue. Relative luminance 0.271; OKLCH L 64.9% C 0.081 H 265.5°. Best body text is #000000 at 6.42:1 contrast (WCAG AA passes).
Color values
| HEX | #778EC1 |
|---|---|
| RGB | rgb(119, 142, 193) |
| HSL | hsl(221, 37%, 61%) |
| HSV | hsv(221, 38%, 76%) |
| CMYK | cmyk(38.3%, 26.4%, 0%, 24.3%) |
| CIE-LAB | lab(59.08, 4.66, -29.11) |
| CIE-LCH | lch(59.08, 29.48, 279.10°) |
| OKLab | oklab(64.88% -0.0064 -0.0809) |
| OKLCH | oklch(64.88% 0.081 265.5) |
| XYZ | xyz(26.9034, 27.1169, 54.2583) |
| Luminance | 0.2712 (WCAG relative) |
| Temperature | cool |
| Family | blue |
Closest named colors
Faded Blue
#658CBB
ΔE00 4.58
Soft Blue
#6488EA
ΔE00 6.18
Cornflowerblue
#6495ED
ΔE00 7.16
Perrywinkle
#8F8CE7
ΔE00 7.33
Dusty Blue
#5A86AD
ΔE00 7.72
Blue Grey
#758DA3
ΔE00 7.94
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#778EC1 #C1AA77
analogous
#77B3C1 #778EC1 #8577C1
triadic
#778EC1 #C1778E #8EC177
tetradic
#778EC1 #C177B3 #C1AA77 #77C185
square
#778EC1 #C177B3 #C1AA77 #77C185
split-complementary
#778EC1 #C18577 #B3C177
monochromatic
#3B5182 #4F6CAC #778EC1 #A1B1D4 #CBD4E7
Accessibility & contrast
On white
3.27
#778EC1 on #FFFFFF
AA ✗AA large ✓AAA ✗
On black
6.42
#778EC1 on #000000
AA ✓AA large ✓AAA ✗
Best text color
#000000 on #778EC1
6.42:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##778EC1 | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##778EC1 | 1.00 | 3.27 | 6.42 | 6.42 |
| #FFFFFF | 3.27 | 1.00 | 21.00 | 21.00 |
| #000000 | 6.42 | 21.00 | 1.00 | 1.00 |
| ##000000 | 6.42 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#7D92C3
Deuteranopia (green-blind)
#758BC0
Tritanopia (blue-blind)
#5F98A0
Achromatopsia (no color)
#8E8E8E
Design tokens & code
CSS
--color: #778ec1; /* rgb */ color: rgb(119, 142, 193); /* oklch */ color: oklch(64.9% 0.081 265.5);
Tailwind
colors: {
custom: {
50: '#a1aed4',
500: '#778ec1',
950: '#000000',
},
}SCSS
$custom: #778ec1; $custom-light: #a1aed4; $custom-dark: #000000;
JSON
{
"hex": "#778ec1",
"rgb": {
"r": 119,
"g": 142,
"b": 193
},
"hsl": {
"h": 221.351,
"s": 37.374,
"l": 61.176
},
"oklch": {
"l": 0.64875,
"c": 0.0812,
"h": 265.5
},
"luminance": 0.27118
}Semantic roles & 50–950 ramp
primary
#778EC1
secondary
#D8CFBC
accent
#8A35B0
background
#FAFAFD
surface
#F3F4FA
border
#CDCED3
text
#0F1014
muted
#7F7F83