#3A84B8#3A84B8
#3A84B8 is a mid, moderate cyan. Relative luminance 0.209; OKLCH L 59.0% C 0.108 H 242.4°. Best body text is #000000 at 5.17:1 contrast (WCAG AA passes).
Color values
| HEX | #3A84B8 |
|---|---|
| RGB | rgb(58, 132, 184) |
| HSL | hsl(205, 52%, 47%) |
| HSV | hsv(205, 68%, 72%) |
| CMYK | cmyk(68.5%, 28.3%, 0%, 27.8%) |
| CIE-LAB | lab(52.80, -6.02, -34.00) |
| CIE-LCH | lch(52.80, 34.53, 259.96°) |
| OKLab | oklab(59% -0.0501 -0.0959) |
| OKLCH | oklch(59% 0.108 242.4) |
| XYZ | xyz(18.6446, 20.8608, 48.3820) |
| Luminance | 0.2086 (WCAG relative) |
| Temperature | cool |
| Family | cyan |
Closest named colors
Steel Blue
#4682B4
ΔE00 1.81
Cool Blue
#4984B8
ΔE00 2.18
Water Blue
#0E87CC
ΔE00 2.76
Cerulean (survey)
#0485D1
ΔE00 3.08
Off Blue
#5684AE
ΔE00 3.72
Dusty Blue
#5A86AD
ΔE00 4.21
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#3A84B8 #B86E3A
analogous
#3AB8AD #3A84B8 #3A45B8
triadic
#3A84B8 #B83A84 #84B83A
tetradic
#3A84B8 #AD3AB8 #B86E3A #45B83A
square
#3A84B8 #AD3AB8 #B86E3A #45B83A
split-complementary
#3A84B8 #B83A45 #B8AD3A
monochromatic
#1D415B #2B6389 #3A84B8 #62A1CD #90BDDC
Accessibility & contrast
On white
4.06
#3A84B8 on #FFFFFF
AA ✗AA large ✓AAA ✗
On black
5.17
#3A84B8 on #000000
AA ✓AA large ✓AAA ✗
Best text color
#000000 on #3A84B8
5.17:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##3A84B8 | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##3A84B8 | 1.00 | 4.06 | 5.17 | 5.17 |
| #FFFFFF | 4.06 | 1.00 | 21.00 | 21.00 |
| #000000 | 5.17 | 21.00 | 1.00 | 1.00 |
| ##000000 | 5.17 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#6C85BA
Deuteranopia (green-blind)
#5B79B7
Tritanopia (blue-blind)
#009196
Achromatopsia (no color)
#7E7E7E
Design tokens & code
CSS
--color: #3a84b8; /* rgb */ color: rgb(58, 132, 184); /* oklch */ color: oklch(59.0% 0.108 242.4);
Tailwind
colors: {
custom: {
50: '#7ea7cd',
500: '#3a84b8',
950: '#000000',
},
}SCSS
$custom: #3a84b8; $custom-light: #7ea7cd; $custom-dark: #000000;
JSON
{
"hex": "#3a84b8",
"rgb": {
"r": 58,
"g": 132,
"b": 184
},
"hsl": {
"h": 204.762,
"s": 52.066,
"l": 47.451
},
"oklch": {
"l": 0.58998,
"c": 0.10822,
"h": 242.4
},
"luminance": 0.20863
}Semantic roles & 50–950 ramp
primary
#3A84B8
secondary
#C7A187
accent
#874CDC
background
#F8FAFC
surface
#EFF4F9
border
#CACED2
text
#0B0F13
muted
#7C7F82