#12676D#12676D
#12676D is a mid, moderate teal. Relative luminance 0.109; OKLCH L 47.0% C 0.075 H 202.4°. Best body text is #FFFFFF at 6.59:1 contrast (WCAG AA passes).
Color values
| HEX | #12676D |
|---|---|
| RGB | rgb(18, 103, 109) |
| HSL | hsl(184, 72%, 25%) |
| HSV | hsv(184, 83%, 43%) |
| CMYK | cmyk(83.5%, 5.5%, 0%, 57.3%) |
| CIE-LAB | lab(39.47, -21.25, -10.26) |
| CIE-LCH | lch(39.47, 23.60, 205.77°) |
| OKLab | oklab(47% -0.0694 -0.0285) |
| OKLCH | oklch(47% 0.075 202.4) |
| XYZ | xyz(7.8588, 10.9322, 16.1610) |
| Luminance | 0.1093 (WCAG relative) |
| Temperature | cool |
| Family | teal |
Closest named colors
Dark Aqua
#05696B
ΔE00 2.28
Petrol
#005F6A
ΔE00 3.54
Deep Turquoise
#017374
ΔE00 4.93
Dark Turquoise
#045C5A
ΔE00 5.41
Dark Aquamarine
#017371
ΔE00 5.72
Deep Aqua
#08787F
ΔE00 5.95
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#12676D #6D1812
analogous
#126D46 #12676D #123A6D
triadic
#12676D #6D1267 #676D12
tetradic
#12676D #46126D #6D1812 #3A6D12
square
#12676D #46126D #6D1812 #3A6D12
split-complementary
#12676D #6D123A #6D4612
monochromatic
#04191A #093538 #12676D #1B99A2 #23CAD6
Accessibility & contrast
On white
6.59
#12676D on #FFFFFF
AA ✓AA large ✓AAA ✗
On black
3.19
#12676D on #000000
AA ✗AA large ✓AAA ✗
Best text color
#FFFFFF on #12676D
6.59:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##12676D | #FFFFFF | #000000 | ##FFFFFF |
|---|---|---|---|---|
| ##12676D | 1.00 | 6.59 | 3.19 | 6.59 |
| #FFFFFF | 6.59 | 1.00 | 21.00 | 1.00 |
| #000000 | 3.19 | 21.00 | 1.00 | 21.00 |
| ##FFFFFF | 6.59 | 1.00 | 21.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#5E626D
Deuteranopia (green-blind)
#52596D
Tritanopia (blue-blind)
#006B69
Achromatopsia (no color)
#5D5D5D
Design tokens & code
CSS
--color: #12676d; /* rgb */ color: rgb(18, 103, 109); /* oklch */ color: oklch(47.0% 0.075 202.4);
Tailwind
colors: {
custom: {
50: '#639296',
500: '#12676d',
950: '#000000',
},
}SCSS
$custom: #12676d; $custom-light: #639296; $custom-dark: #000000;
JSON
{
"hex": "#12676d",
"rgb": {
"r": 18,
"g": 103,
"b": 109
},
"hsl": {
"h": 183.956,
"s": 71.654,
"l": 24.902
},
"oklch": {
"l": 0.47004,
"c": 0.07501,
"h": 202.4
},
"luminance": 0.10933
}Semantic roles & 50–950 ramp
primary
#12676D
secondary
#A43E37
accent
#4539EE
background
#F6F9F9
surface
#EBF1F2
border
#C6CBCC
text
#060D0D
muted
#7A7E7E