#305F5E#305F5E
#305F5E is a mid, muted teal. Relative luminance 0.096; OKLCH L 45.2% C 0.051 H 193.7°. Best body text is #FFFFFF at 7.18:1 contrast (WCAG AA passes).
Color values
| HEX | #305F5E |
|---|---|
| RGB | rgb(48, 95, 94) |
| HSL | hsl(179, 33%, 28%) |
| HSV | hsv(179, 49%, 37%) |
| CMYK | cmyk(49.5%, 0%, 1.1%, 62.7%) |
| CIE-LAB | lab(37.15, -16.27, -4.40) |
| CIE-LCH | lch(37.15, 16.86, 195.14°) |
| OKLab | oklab(45.21% -0.05 -0.0122) |
| OKLCH | oklch(45.21% 0.051 193.7) |
| XYZ | xyz(7.3307, 9.6203, 12.0581) |
| Luminance | 0.0962 (WCAG relative) |
| Temperature | cool |
| Family | teal |
Closest named colors
Dark Turquoise
#045C5A
ΔE00 4.57
Deep Teal
#00555A
ΔE00 5.42
Dark Aqua
#05696B
ΔE00 5.45
Petrol
#005F6A
ΔE00 5.87
Darkslategray
#2F4F4F
ΔE00 5.90
Dark Green Blue
#1F6357
ΔE00 6.22
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#305F5E #5F3031
analogous
#305F46 #305F5E #30485F
triadic
#305F5E #5E305F #5F5E30
tetradic
#305F5E #46305F #5F3031 #485F30
square
#305F5E #46305F #5F3031 #485F30
split-complementary
#305F5E #5F3048 #5F4630
monochromatic
#0A1414 #1B3636 #305F5E #458886 #5DADAB
Accessibility & contrast
On white
7.18
#305F5E on #FFFFFF
AA ✓AA large ✓AAA ✓
On black
2.92
#305F5E on #000000
AA ✗AA large ✗AAA ✗
Best text color
#FFFFFF on #305F5E
7.18:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##305F5E | #FFFFFF | #000000 | ##FFFFFF |
|---|---|---|---|---|
| ##305F5E | 1.00 | 7.18 | 2.92 | 7.18 |
| #FFFFFF | 7.18 | 1.00 | 21.00 | 1.00 |
| #000000 | 2.92 | 21.00 | 1.00 | 21.00 |
| ##FFFFFF | 7.18 | 1.00 | 21.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#5A5B5E
Deuteranopia (green-blind)
#52555E
Tritanopia (blue-blind)
#17615F
Achromatopsia (no color)
#575757
Design tokens & code
CSS
--color: #305f5e; /* rgb */ color: rgb(48, 95, 94); /* oklch */ color: oklch(45.2% 0.051 193.7);
Tailwind
colors: {
custom: {
50: '#6c8c8b',
500: '#305f5e',
950: '#000000',
},
}SCSS
$custom: #305f5e; $custom-light: #6c8c8b; $custom-dark: #000000;
JSON
{
"hex": "#305f5e",
"rgb": {
"r": 48,
"g": 95,
"b": 94
},
"hsl": {
"h": 178.723,
"s": 32.867,
"l": 28.039
},
"oklch": {
"l": 0.45211,
"c": 0.05149,
"h": 193.7
},
"luminance": 0.09621
}Semantic roles & 50–950 ramp
primary
#305F5E
secondary
#905A5C
accent
#5F61C9
background
#F6F8F8
surface
#ECF0F0
border
#C7CBCB
text
#070C0C
muted
#7A7D7D