#23A4BA#23A4BA
#23A4BA is a light, moderate teal. Relative luminance 0.305; OKLCH L 66.3% C 0.108 H 212.5°. Best body text is #000000 at 7.09:1 contrast (WCAG AA passes).
Color values
| HEX | #23A4BA |
|---|---|
| RGB | rgb(35, 164, 186) |
| HSL | hsl(189, 68%, 43%) |
| HSV | hsv(189, 81%, 73%) |
| CMYK | cmyk(81.2%, 11.8%, 0%, 27.1%) |
| CIE-LAB | lab(62.04, -25.59, -20.89) |
| CIE-LCH | lch(62.04, 33.03, 219.23°) |
| OKLab | oklab(66.27% -0.0915 -0.0583) |
| OKLCH | oklch(66.27% 0.108 212.5) |
| XYZ | xyz(22.8277, 30.4505, 51.1193) |
| Luminance | 0.3045 (WCAG relative) |
| Temperature | cool |
| Family | teal |
Closest named colors
Turquoise Blue
#06B1C4
ΔE00 4.16
Cadetblue
#5F9EA0
ΔE00 7.86
Teal Blue
#01889F
ΔE00 9.40
Greyblue
#77A1B5
ΔE00 9.75
Sea
#3C9992
ΔE00 11.46
Lightseagreen
#20B2AA
ΔE00 12.02
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#23A4BA #BA3923
analogous
#23BA84 #23A4BA #2358BA
triadic
#23A4BA #BA23A4 #A4BA23
tetradic
#23A4BA #8423BA #BA3923 #58BA23
square
#23A4BA #8423BA #BA3923 #58BA23
split-complementary
#23A4BA #BA2358 #BA8423
monochromatic
#104953 #197786 #23A4BA #3FC4DB #73D4E5
Accessibility & contrast
On white
2.96
#23A4BA on #FFFFFF
AA ✗AA large ✗AAA ✗
On black
7.09
#23A4BA on #000000
AA ✓AA large ✓AAA ✓
Best text color
#000000 on #23A4BA
7.09:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##23A4BA | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##23A4BA | 1.00 | 2.96 | 7.09 | 7.09 |
| #FFFFFF | 2.96 | 1.00 | 21.00 | 21.00 |
| #000000 | 7.09 | 21.00 | 1.00 | 1.00 |
| ##000000 | 7.09 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#939EBB
Deuteranopia (green-blind)
#7F90BA
Tritanopia (blue-blind)
#00ADAB
Achromatopsia (no color)
#969696
Design tokens & code
CSS
--color: #23a4ba; /* rgb */ color: rgb(35, 164, 186); /* oklch */ color: oklch(66.3% 0.108 212.5);
Tailwind
colors: {
custom: {
50: '#79bfce',
500: '#23a4ba',
950: '#000000',
},
}SCSS
$custom: #23a4ba; $custom-light: #79bfce; $custom-dark: #000000;
JSON
{
"hex": "#23a4ba",
"rgb": {
"r": 35,
"g": 164,
"b": 186
},
"hsl": {
"h": 188.742,
"s": 68.326,
"l": 43.333
},
"oklch": {
"l": 0.66268,
"c": 0.10848,
"h": 212.5
},
"luminance": 0.30453
}Semantic roles & 50–950 ramp
primary
#23A4BA
secondary
#CC7B6D
accent
#563DEB
background
#F8FBFC
surface
#EFF7F9
border
#CAD0D2
text
#0B1213
muted
#7C8182