#4764DF#4764DF
#4764DF is a mid, vivid blue. Relative luminance 0.158; OKLCH L 55.2% C 0.190 H 269.2°. Best body text is #FFFFFF at 5.05:1 contrast (WCAG AA passes).
Color values
| HEX | #4764DF |
|---|---|
| RGB | rgb(71, 100, 223) |
| HSL | hsl(229, 70%, 58%) |
| HSV | hsv(229, 68%, 87%) |
| CMYK | cmyk(68.2%, 55.2%, 0%, 12.5%) |
| CIE-LAB | lab(46.68, 29.52, -65.98) |
| CIE-LCH | lch(46.68, 72.28, 294.10°) |
| OKLab | oklab(55.15% -0.0026 -0.1899) |
| OKLCH | oklch(55.15% 0.19 269.2) |
| XYZ | xyz(20.4704, 15.7797, 71.7647) |
| Luminance | 0.1578 (WCAG relative) |
| Temperature | cool |
| Family | blue |
Closest named colors
Royal Blue
#4169E1
ΔE00 2.05
Azul
#1D5DEC
ΔE00 3.40
Bright Blue
#0165FC
ΔE00 4.11
Cornflower Blue
#5170D7
ΔE00 4.15
Warm Blue
#4B57DB
ΔE00 4.43
Dark Periwinkle
#665FD1
ΔE00 5.57
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#4764DF #DFC247
analogous
#47B0DF #4764DF #7647DF
triadic
#4764DF #DF4764 #64DF47
tetradic
#4764DF #DF47B0 #DFC247 #47DF76
square
#4764DF #DF47B0 #DFC247 #47DF76
split-complementary
#4764DF #DF7647 #B0DF47
monochromatic
#193092 #2242C6 #4764DF #7B90E8 #AFBCF1
Accessibility & contrast
On white
5.05
#4764DF on #FFFFFF
AA ✓AA large ✓AAA ✗
On black
4.16
#4764DF on #000000
AA ✗AA large ✓AAA ✗
Best text color
#FFFFFF on #4764DF
5.05:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##4764DF | #FFFFFF | #000000 | ##FFFFFF |
|---|---|---|---|---|
| ##4764DF | 1.00 | 5.05 | 4.16 | 5.05 |
| #FFFFFF | 5.05 | 1.00 | 21.00 | 1.00 |
| #000000 | 4.16 | 21.00 | 1.00 | 21.00 |
| ##FFFFFF | 5.05 | 1.00 | 21.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#0076E3
Deuteranopia (green-blind)
#0068DD
Tritanopia (blue-blind)
#008298
Achromatopsia (no color)
#6F6F6F
Design tokens & code
CSS
--color: #4764df; /* rgb */ color: rgb(71, 100, 223); /* oklch */ color: oklch(55.2% 0.190 269.2);
Tailwind
colors: {
custom: {
50: '#8b8fea',
500: '#4764df',
950: '#000000',
},
}SCSS
$custom: #4764df; $custom-light: #8b8fea; $custom-dark: #000000;
JSON
{
"hex": "#4764df",
"rgb": {
"r": 71,
"g": 100,
"b": 223
},
"hsl": {
"h": 228.553,
"s": 70.37,
"l": 57.647
},
"oklch": {
"l": 0.55154,
"c": 0.18993,
"h": 269.2
},
"luminance": 0.15782
}Semantic roles & 50–950 ramp
primary
#4764DF
secondary
#DFD4A2
accent
#CB3BED
background
#F9F8FE
surface
#F2F0FD
border
#CCCBD5
text
#0D0C16
muted
#7E7D84