#307585#307585
#307585 is a mid, moderate cyan. Relative luminance 0.150; OKLCH L 52.5% C 0.073 H 215.5°. Best body text is #FFFFFF at 5.24:1 contrast (WCAG AA passes).
Color values
| HEX | #307585 |
|---|---|
| RGB | rgb(48, 117, 133) |
| HSL | hsl(191, 47%, 35%) |
| HSV | hsv(191, 64%, 52%) |
| CMYK | cmyk(63.9%, 12%, 0%, 47.8%) |
| CIE-LAB | lab(45.69, -16.40, -15.22) |
| CIE-LCH | lch(45.69, 22.38, 222.86°) |
| OKLab | oklab(52.54% -0.0592 -0.0423) |
| OKLCH | oklch(52.54% 0.073 215.5) |
| XYZ | xyz(11.8121, 15.0432, 24.4669) |
| Luminance | 0.1504 (WCAG relative) |
| Temperature | cool |
| Family | cyan |
Closest named colors
Ocean
#017B92
ΔE00 3.44
Sea Blue
#047495
ΔE00 5.74
Deep Aqua
#08787F
ΔE00 5.94
Dirty Blue
#3F829D
ΔE00 7.01
Teal Blue
#01889F
ΔE00 7.34
Deep Turquoise
#017374
ΔE00 8.44
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#307585 #854030
analogous
#30856A #307585 #304A85
triadic
#307585 #853075 #758530
tetradic
#307585 #6A3085 #854030 #4A8530
square
#307585 #6A3085 #854030 #4A8530
split-complementary
#307585 #85304A #856A30
monochromatic
#10262B #204D58 #307585 #409DB2 #67B6C8
Accessibility & contrast
On white
5.24
#307585 on #FFFFFF
AA ✓AA large ✓AAA ✗
On black
4.01
#307585 on #000000
AA ✗AA large ✓AAA ✗
Best text color
#FFFFFF on #307585
5.24:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##307585 | #FFFFFF | #000000 | ##FFFFFF |
|---|---|---|---|---|
| ##307585 | 1.00 | 5.24 | 4.01 | 5.24 |
| #FFFFFF | 5.24 | 1.00 | 21.00 | 1.00 |
| #000000 | 4.01 | 21.00 | 1.00 | 21.00 |
| ##FFFFFF | 5.24 | 1.00 | 21.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#6A7186
Deuteranopia (green-blind)
#5D6885
Tritanopia (blue-blind)
#007B7A
Achromatopsia (no color)
#6C6C6C
Design tokens & code
CSS
--color: #307585; /* rgb */ color: rgb(48, 117, 133); /* oklch */ color: oklch(52.5% 0.073 215.5);
Tailwind
colors: {
custom: {
50: '#729da8',
500: '#307585',
950: '#000000',
},
}SCSS
$custom: #307585; $custom-light: #729da8; $custom-dark: #000000;
JSON
{
"hex": "#307585",
"rgb": {
"r": 48,
"g": 117,
"b": 133
},
"hsl": {
"h": 191.294,
"s": 46.961,
"l": 35.49
},
"oklch": {
"l": 0.52536,
"c": 0.07275,
"h": 215.5
},
"luminance": 0.15044
}Semantic roles & 50–950 ramp
primary
#307585
secondary
#AF7061
accent
#6A51D7
background
#F7F9FA
surface
#EDF2F4
border
#C8CCCE
text
#090E0F
muted
#7B7E7F