#227B50#227B50
#227B50 is a mid, moderate teal. Relative luminance 0.151; OKLCH L 52.0% C 0.108 H 157.7°. Best body text is #FFFFFF at 5.23:1 contrast (WCAG AA passes).
Color values
| HEX | #227B50 |
|---|---|
| RGB | rgb(34, 123, 80) |
| HSL | hsl(151, 57%, 31%) |
| HSV | hsv(151, 72%, 48%) |
| CMYK | cmyk(72.4%, 0%, 35%, 51.8%) |
| CIE-LAB | lab(45.75, -36.67, 16.18) |
| CIE-LCH | lch(45.75, 40.09, 156.19°) |
| OKLab | oklab(51.97% -0.0995 0.0408) |
| OKLCH | oklch(51.97% 0.108 157.7) |
| XYZ | xyz(9.1897, 15.0842, 10.0151) |
| Luminance | 0.1509 (WCAG relative) |
| Temperature | neutral |
| Family | teal |
Closest named colors
Dark Sea Green
#11875D
ΔE00 4.53
Jungle Green
#048243
ΔE00 4.88
Sea Green
#2E8B57
ΔE00 6.06
Darkish Green
#287C37
ΔE00 6.24
Viridian
#1E9167
ΔE00 8.14
Dark Sage
#598556
ΔE00 8.45
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#227B50 #7B224D
analogous
#227B23 #227B50 #22797B
triadic
#227B50 #50227B #7B5022
tetradic
#227B50 #23227B #7B224D #797B22
square
#227B50 #23227B #7B224D #797B22
split-complementary
#227B50 #7B2279 #7B2322
monochromatic
#071B12 #154B31 #227B50 #2FAB6F #4ACD8E
Accessibility & contrast
On white
5.23
#227B50 on #FFFFFF
AA ✓AA large ✓AAA ✗
On black
4.02
#227B50 on #000000
AA ✗AA large ✓AAA ✗
Best text color
#FFFFFF on #227B50
5.23:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##227B50 | #FFFFFF | #000000 | ##FFFFFF |
|---|---|---|---|---|
| ##227B50 | 1.00 | 5.23 | 4.02 | 5.23 |
| #FFFFFF | 5.23 | 1.00 | 21.00 | 1.00 |
| #000000 | 4.02 | 21.00 | 1.00 | 21.00 |
| ##FFFFFF | 5.23 | 1.00 | 21.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#7A714D
Deuteranopia (green-blind)
#6F6953
Tritanopia (blue-blind)
#007A70
Achromatopsia (no color)
#6C6C6C
Design tokens & code
CSS
--color: #227b50; /* rgb */ color: rgb(34, 123, 80); /* oklch */ color: oklch(52.0% 0.108 157.7);
Tailwind
colors: {
custom: {
50: '#6aa281',
500: '#227b50',
950: '#000000',
},
}SCSS
$custom: #227b50; $custom-light: #6aa281; $custom-dark: #000000;
JSON
{
"hex": "#227b50",
"rgb": {
"r": 34,
"g": 123,
"b": 80
},
"hsl": {
"h": 151.011,
"s": 56.688,
"l": 30.784
},
"oklch": {
"l": 0.51966,
"c": 0.10756,
"h": 157.7
},
"luminance": 0.15085
}Semantic roles & 50–950 ramp
primary
#227B50
secondary
#AE4B7B
accent
#4891E0
background
#F6FAF7
surface
#ECF3EE
border
#C7CDC9
text
#070F0A
muted
#7A7F7C