#315ABE#315ABE
#315ABE is a mid, vivid blue. Relative luminance 0.117; OKLCH L 49.6% C 0.164 H 264.4°. Best body text is #FFFFFF at 6.29:1 contrast (WCAG AA passes).
Color values
| HEX | #315ABE |
|---|---|
| RGB | rgb(49, 90, 190) |
| HSL | hsl(223, 59%, 47%) |
| HSV | hsv(223, 74%, 75%) |
| CMYK | cmyk(74.2%, 52.6%, 0%, 25.5%) |
| CIE-LAB | lab(40.71, 20.98, -56.75) |
| CIE-LCH | lch(40.71, 60.50, 290.29°) |
| OKLab | oklab(49.63% -0.016 -0.1633) |
| OKLCH | oklch(49.63% 0.164 264.4) |
| XYZ | xyz(14.2138, 11.6814, 50.2109) |
| Luminance | 0.1168 (WCAG relative) |
| Temperature | cool |
| Family | blue |
Closest named colors
Sapphire
#0F52BA
ΔE00 3.18
Denim
#1560BD
ΔE00 3.95
Denim Blue
#3B5B92
ΔE00 5.59
Azul
#1D5DEC
ΔE00 5.63
French Blue
#436BAD
ΔE00 6.13
Warm Blue
#4B57DB
ΔE00 6.14
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#315ABE #BE9531
analogous
#31A1BE #315ABE #4E31BE
triadic
#315ABE #BE315A #5ABE31
tetradic
#315ABE #BE31A1 #BE9531 #31BE4E
square
#315ABE #BE31A1 #BE9531 #31BE4E
split-complementary
#315ABE #BE4E31 #A1BE31
monochromatic
#182C5D #24438D #315ABE #587CD4 #89A2E1
Accessibility & contrast
On white
6.29
#315ABE on #FFFFFF
AA ✓AA large ✓AAA ✗
On black
3.34
#315ABE on #000000
AA ✗AA large ✓AAA ✗
Best text color
#FFFFFF on #315ABE
6.29:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##315ABE | #FFFFFF | #000000 | ##FFFFFF |
|---|---|---|---|---|
| ##315ABE | 1.00 | 6.29 | 3.34 | 6.29 |
| #FFFFFF | 6.29 | 1.00 | 21.00 | 1.00 |
| #000000 | 3.34 | 21.00 | 1.00 | 21.00 |
| ##FFFFFF | 6.29 | 1.00 | 21.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#1467C2
Deuteranopia (green-blind)
#005ABC
Tritanopia (blue-blind)
#007283
Achromatopsia (no color)
#606060
Design tokens & code
CSS
--color: #315abe; /* rgb */ color: rgb(49, 90, 190); /* oklch */ color: oklch(49.6% 0.164 264.4);
Tailwind
colors: {
custom: {
50: '#7c88d2',
500: '#315abe',
950: '#000000',
},
}SCSS
$custom: #315abe; $custom-light: #7c88d2; $custom-dark: #000000;
JSON
{
"hex": "#315abe",
"rgb": {
"r": 49,
"g": 90,
"b": 190
},
"hsl": {
"h": 222.553,
"s": 58.996,
"l": 46.863
},
"oklch": {
"l": 0.49627,
"c": 0.16414,
"h": 264.4
},
"luminance": 0.11683
}Semantic roles & 50–950 ramp
primary
#315ABE
secondary
#CAB580
accent
#B546E2
background
#F8F8FD
surface
#EFEFFA
border
#CACAD3
text
#0B0B14
muted
#7C7C83