#3A62CB#3A62CB
#3A62CB is a mid, vivid blue. Relative luminance 0.139; OKLCH L 52.6% C 0.169 H 265.3°. Best body text is #FFFFFF at 5.54:1 contrast (WCAG AA passes).
Color values
| HEX | #3A62CB |
|---|---|
| RGB | rgb(58, 98, 203) |
| HSL | hsl(223, 58%, 51%) |
| HSV | hsv(223, 71%, 80%) |
| CMYK | cmyk(71.4%, 51.7%, 0%, 20.4%) |
| CIE-LAB | lab(44.15, 21.81, -58.68) |
| CIE-LCH | lch(44.15, 62.60, 290.39°) |
| OKLab | oklab(52.64% -0.0139 -0.1687) |
| OKLCH | oklch(52.64% 0.169 265.3) |
| XYZ | xyz(16.8883, 13.9449, 58.2899) |
| Luminance | 0.1395 (WCAG relative) |
| Temperature | cool |
| Family | blue |
Closest named colors
Royal Blue
#4169E1
ΔE00 3.84
Azul
#1D5DEC
ΔE00 4.08
Denim
#1560BD
ΔE00 4.42
French Blue
#436BAD
ΔE00 4.80
Cornflower Blue
#5170D7
ΔE00 5.53
Warm Blue
#4B57DB
ΔE00 5.64
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#3A62CB #CBA33A
analogous
#3AAACB #3A62CB #5A3ACB
triadic
#3A62CB #CB3A62 #62CB3A
tetradic
#3A62CB #CB3AAA #CBA33A #3ACB5A
square
#3A62CB #CB3AAA #CBA33A #3ACB5A
split-complementary
#3A62CB #CB5A3A #AACB3A
monochromatic
#1D336E #2A4A9E #3A62CB #6A89D8 #9BAFE5
Accessibility & contrast
On white
5.54
#3A62CB on #FFFFFF
AA ✓AA large ✓AAA ✗
On black
3.79
#3A62CB on #000000
AA ✗AA large ✓AAA ✗
Best text color
#FFFFFF on #3A62CB
5.54:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##3A62CB | #FFFFFF | #000000 | ##FFFFFF |
|---|---|---|---|---|
| ##3A62CB | 1.00 | 5.54 | 3.79 | 5.54 |
| #FFFFFF | 5.54 | 1.00 | 21.00 | 1.00 |
| #000000 | 3.79 | 21.00 | 1.00 | 21.00 |
| ##FFFFFF | 5.54 | 1.00 | 21.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#1E6FCF
Deuteranopia (green-blind)
#0062C9
Tritanopia (blue-blind)
#007B8D
Achromatopsia (no color)
#686868
Design tokens & code
CSS
--color: #3a62cb; /* rgb */ color: rgb(58, 98, 203); /* oklch */ color: oklch(52.6% 0.169 265.3);
Tailwind
colors: {
custom: {
50: '#828edb',
500: '#3a62cb',
950: '#000000',
},
}SCSS
$custom: #3a62cb; $custom-light: #828edb; $custom-dark: #000000;
JSON
{
"hex": "#3a62cb",
"rgb": {
"r": 58,
"g": 98,
"b": 203
},
"hsl": {
"h": 223.448,
"s": 58.233,
"l": 51.176
},
"oklch": {
"l": 0.52635,
"c": 0.16931,
"h": 265.3
},
"luminance": 0.13947
}Semantic roles & 50–950 ramp
primary
#3A62CB
secondary
#D0BF90
accent
#B746E1
background
#F8F8FD
surface
#F0F0FB
border
#CBCBD4
text
#0C0C15
muted
#7D7D83