#554DF5#554DF5
#554DF5 is a mid, highly saturated blue. Relative luminance 0.138; OKLCH L 53.9% C 0.241 H 276.7°. Best body text is #FFFFFF at 5.58:1 contrast (WCAG AA passes).
Color values
| HEX | #554DF5 |
|---|---|
| RGB | rgb(85, 77, 245) |
| HSL | hsl(243, 89%, 63%) |
| HSV | hsv(243, 69%, 96%) |
| CMYK | cmyk(65.3%, 68.6%, 0%, 3.9%) |
| CIE-LAB | lab(43.99, 52.45, -82.75) |
| CIE-LCH | lch(43.99, 97.97, 302.37°) |
| OKLab | oklab(53.93% 0.0283 -0.2389) |
| OKLCH | oklch(53.93% 0.241 276.7) |
| XYZ | xyz(22.8762, 13.8296, 87.8323) |
| Luminance | 0.1383 (WCAG relative) |
| Temperature | cool |
| Family | blue |
Closest named colors
Purpleish Blue
#6140EF
ΔE00 3.47
Warm Blue
#4B57DB
ΔE00 4.57
Electric Blue
#0652FF
ΔE00 4.84
Bluish Purple
#703BE7
ΔE00 5.56
Purpley Blue
#5F34E7
ΔE00 6.10
Light Indigo
#6D5ACF
ΔE00 6.33
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#554DF5 #EDF54D
analogous
#4D99F5 #554DF5 #A94DF5
triadic
#554DF5 #F5554D #4DF555
tetradic
#554DF5 #F54D99 #EDF54D #4DF5A9
square
#554DF5 #F54D99 #EDF54D #4DF5A9
split-complementary
#554DF5 #F5A94D #99F54D
monochromatic
#130BBD #1E13F2 #554DF5 #8C87F8 #C4C1FC
Accessibility & contrast
On white
5.58
#554DF5 on #FFFFFF
AA ✓AA large ✓AAA ✗
On black
3.77
#554DF5 on #000000
AA ✗AA large ✓AAA ✗
Best text color
#FFFFFF on #554DF5
5.58:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##554DF5 | #FFFFFF | #000000 | ##FFFFFF |
|---|---|---|---|---|
| ##554DF5 | 1.00 | 5.58 | 3.77 | 5.58 |
| #FFFFFF | 5.58 | 1.00 | 21.00 | 1.00 |
| #000000 | 3.77 | 21.00 | 1.00 | 21.00 |
| ##FFFFFF | 5.58 | 1.00 | 21.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#006FFA
Deuteranopia (green-blind)
#0061F2
Tritanopia (blue-blind)
#007B9B
Achromatopsia (no color)
#686868
Design tokens & code
CSS
--color: #554df5; /* rgb */ color: rgb(85, 77, 245); /* oklch */ color: oklch(53.9% 0.241 276.7);
Tailwind
colors: {
custom: {
50: '#9780fa',
500: '#554df5',
950: '#000000',
},
}SCSS
$custom: #554df5; $custom-light: #9780fa; $custom-dark: #000000;
JSON
{
"hex": "#554df5",
"rgb": {
"r": 85,
"g": 77,
"b": 245
},
"hsl": {
"h": 242.857,
"s": 89.362,
"l": 63.137
},
"oklch": {
"l": 0.53933,
"c": 0.24061,
"h": 276.7
},
"luminance": 0.13832
}Semantic roles & 50–950 ramp
primary
#554DF5
secondary
#EAEDB1
accent
#E600DB
background
#FAF7FF
surface
#F4EEFF
border
#CEC9D7
text
#0F0A17
muted
#7F7C85