#30664F#30664F
#30664F is a mid, moderate teal. Relative luminance 0.107; OKLCH L 46.6% C 0.069 H 163.7°. Best body text is #FFFFFF at 6.69:1 contrast (WCAG AA passes).
Color values
| HEX | #30664F |
|---|---|
| RGB | rgb(48, 102, 79) |
| HSL | hsl(154, 36%, 29%) |
| HSV | hsv(154, 53%, 40%) |
| CMYK | cmyk(52.9%, 0%, 22.5%, 60%) |
| CIE-LAB | lab(39.06, -24.02, 7.58) |
| CIE-LCH | lch(39.06, 25.19, 162.47°) |
| OKLab | oklab(46.61% -0.0667 0.0194) |
| OKLCH | oklch(46.61% 0.069 163.7) |
| XYZ | xyz(7.3809, 10.6950, 9.0710) |
| Luminance | 0.1070 (WCAG relative) |
| Temperature | neutral |
| Family | teal |
Closest named colors
Dark Green Blue
#1F6357
ΔE00 4.92
Hunter Green
#355E3B
ΔE00 5.73
Spruce
#0A5F38
ΔE00 6.56
Pine
#2B5D34
ΔE00 7.01
Dark Blue Green
#005249
ΔE00 9.03
Dark Turquoise
#045C5A
ΔE00 9.86
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#30664F #663047
analogous
#306634 #30664F #306266
triadic
#30664F #4F3066 #664F30
tetradic
#30664F #343066 #663047 #626630
square
#30664F #343066 #663047 #626630
split-complementary
#30664F #663062 #663430
monochromatic
#0A1510 #1C3C2F #30664F #44906F #5DB38F
Accessibility & contrast
On white
6.69
#30664F on #FFFFFF
AA ✓AA large ✓AAA ✗
On black
3.14
#30664F on #000000
AA ✗AA large ✓AAA ✗
Best text color
#FFFFFF on #30664F
6.69:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##30664F | #FFFFFF | #000000 | ##FFFFFF |
|---|---|---|---|---|
| ##30664F | 1.00 | 6.69 | 3.14 | 6.69 |
| #FFFFFF | 6.69 | 1.00 | 21.00 | 1.00 |
| #000000 | 3.14 | 21.00 | 1.00 | 21.00 |
| ##FFFFFF | 6.69 | 1.00 | 21.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#645F4E
Deuteranopia (green-blind)
#5C5A50
Tritanopia (blue-blind)
#1E6660
Achromatopsia (no color)
#5C5C5C
Design tokens & code
CSS
--color: #30664f; /* rgb */ color: rgb(48, 102, 79); /* oklch */ color: oklch(46.6% 0.069 163.7);
Tailwind
colors: {
custom: {
50: '#6d9280',
500: '#30664f',
950: '#000000',
},
}SCSS
$custom: #30664f; $custom-light: #6d9280; $custom-dark: #000000;
JSON
{
"hex": "#30664f",
"rgb": {
"r": 48,
"g": 102,
"b": 79
},
"hsl": {
"h": 154.444,
"s": 36,
"l": 29.412
},
"oklch": {
"l": 0.46613,
"c": 0.06946,
"h": 163.7
},
"luminance": 0.10696
}Semantic roles & 50–950 ramp
primary
#30664F
secondary
#975A74
accent
#5C8CCC
background
#F6F9F7
surface
#ECF1EE
border
#C7CBC9
text
#070D0A
muted
#7A7E7C