#3694AC#3694AC
#3694AC is a light, moderate cyan. Relative luminance 0.249; OKLCH L 62.2% C 0.093 H 218.1°. Best body text is #000000 at 5.99:1 contrast (WCAG AA passes).
Color values
| HEX | #3694AC |
|---|---|
| RGB | rgb(54, 148, 172) |
| HSL | hsl(192, 52%, 44%) |
| HSV | hsv(192, 69%, 67%) |
| CMYK | cmyk(68.6%, 14%, 0%, 32.5%) |
| CIE-LAB | lab(57.02, -19.56, -20.62) |
| CIE-LCH | lch(57.02, 28.42, 226.51°) |
| OKLab | oklab(62.16% -0.0734 -0.0575) |
| OKLCH | oklch(62.16% 0.093 218.1) |
| XYZ | xyz(19.5545, 24.9405, 42.8051) |
| Luminance | 0.2494 (WCAG relative) |
| Temperature | cool |
| Family | cyan |
Closest named colors
Teal Blue
#01889F
ΔE00 5.04
Dirty Blue
#3F829D
ΔE00 6.90
Cadetblue
#5F9EA0
ΔE00 8.96
Greyblue
#77A1B5
ΔE00 9.15
Turquoise Blue
#06B1C4
ΔE00 9.56
Ocean
#017B92
ΔE00 9.59
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#3694AC #AC4E36
analogous
#36AC89 #3694AC #3659AC
triadic
#3694AC #AC3694 #94AC36
tetradic
#3694AC #8936AC #AC4E36 #59AC36
square
#3694AC #8936AC #AC4E36 #59AC36
split-complementary
#3694AC #AC3659 #AC8936
monochromatic
#19444F #276C7D #3694AC #55B2CA #84C7D8
Accessibility & contrast
On white
3.51
#3694AC on #FFFFFF
AA ✗AA large ✓AAA ✗
On black
5.99
#3694AC on #000000
AA ✓AA large ✓AAA ✗
Best text color
#000000 on #3694AC
5.99:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##3694AC | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##3694AC | 1.00 | 3.51 | 5.99 | 5.99 |
| #FFFFFF | 3.51 | 1.00 | 21.00 | 21.00 |
| #000000 | 5.99 | 21.00 | 1.00 | 1.00 |
| ##000000 | 5.99 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#8590AD
Deuteranopia (green-blind)
#7484AC
Tritanopia (blue-blind)
#009C9C
Achromatopsia (no color)
#898989
Design tokens & code
CSS
--color: #3694ac; /* rgb */ color: rgb(54, 148, 172); /* oklch */ color: oklch(62.2% 0.093 218.1);
Tailwind
colors: {
custom: {
50: '#7cb3c4',
500: '#3694ac',
950: '#000000',
},
}SCSS
$custom: #3694ac; $custom-light: #7cb3c4; $custom-dark: #000000;
JSON
{
"hex": "#3694ac",
"rgb": {
"r": 54,
"g": 148,
"b": 172
},
"hsl": {
"h": 192.203,
"s": 52.212,
"l": 44.314
},
"oklch": {
"l": 0.62164,
"c": 0.09322,
"h": 218.1
},
"luminance": 0.24943
}Semantic roles & 50–950 ramp
primary
#3694AC
secondary
#C28A7C
accent
#694CDC
background
#F8FBFC
surface
#EFF6F8
border
#CAD0D1
text
#0B1112
muted
#7C8081