Named color · #59BAA3
Puerto Rico
Puerto Rico is #59BAA3: rgb(89 186 163), hsl(166 41% 54%), oklch(0.724 0.098 175.7). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Teal mean? → · Puerto Rico color name →
#59BAA3
oklch(0.724 0.098 175.7)
Color conversions
- HEX
- #59baa3
- RGB
- rgb(89 186 163)
- HSL
- hsl(166 41% 54%)
- HWB
- hwb(166 35% 27%)
- OKLCH
- oklch(0.724 0.098 175.7)
- OKLab
- oklab(0.724 -0.098 0.007)
- CIE Lab
- lab(69.21 -34.22 2.51)
- LCH
- lch(69.21 34.31 175.8)
- CMYK
- cmyk(52% 0% 12% 27%)
Tints · Shades · Tones
Tints
- 6DC1AC
- 7FC8B5
- 90CFBE
- A0D6C7
- B1DDD0
- C1E4D9
- D0EAE3
- E0F1EC
- EFF8F5
Shades
- 4CA18D
- 408978
- 347263
- 285C4F
- 1D463C
- 13322A
- 091E19
- 030D0A
- 000201
Tones
- 60B49F
- 66AE9C
- 6BA998
- 6FA395
- 739D91
- 76978E
- 79918A
- 7C8C87
- 7E8683
Color harmonies
Complementary +180°
- 59BAA3
Puerto Rico
- D78CA8
≈ Berry Twist
Analogous -30° +30°
- 59BAA3
Puerto Rico
- 7DB680
≈ Colour Me Green
- 4CB7C4
≈ Cave Lake
Triadic +120° +240°
- 59BAA3
Puerto Rico
- AB99DD
≈ Dull Lavender
- D59568
≈ Pumpkin Patch
Split-complementary +150° +210°
- 59BAA3
Puerto Rico
- C690C7
≈ Rose Souvenir
- DD8D86
≈ Coral Banks
Tetradic +90° +180° +270°
- 59BAA3
Puerto Rico
- 88A4E4
≈ Blue Cue
- D78CA8
≈ Berry Twist
- C1A15A
≈ Magic Lamp
Contrast & accessibility
Ag
FailOn white
WCAG 2.33:1 · APCA Lc 46
Ag
AAAOn black
WCAG 8.97:1 · APCA Lc 56
Best text color: #000000
WCAG 8.97:1 (AAA) · APCA Lc 56
Contrast pairs
Code snippets
CSS
:root {
--puerto-rico: #59baa3;
--puerto-rico-rgb: 89 186 163;
--puerto-rico-oklch: oklch(0.724 0.098 175.7);
}
.element {
color: var(--puerto-rico);
background-color: hsl(166 41% 54%);
border-color: oklch(0.724 0.098 175.7);
}Tailwind CSS v4
@theme {
--color-puerto-rico: #59baa3;
--color-puerto-rico-50: #d8fff5;
--color-puerto-rico-100: #c6f3e8;
--color-puerto-rico-200: #a7e3d4;
--color-puerto-rico-300: #7ec8b7;
--color-puerto-rico-400: #57b29c;
--color-puerto-rico-500: #219b83;
--color-puerto-rico-600: #20836f;
--color-puerto-rico-700: #1a6959;
--color-puerto-rico-800: #124d40;
--color-puerto-rico-900: #0c362c;
--color-puerto-rico-950: #002119;
}SCSS
$puerto-rico: #59baa3;
$puerto-rico-rgb: 89, 186, 163;
$puerto-rico-light: mix(#fff, $puerto-rico, 20%);
$puerto-rico-dark: mix(#000, $puerto-rico, 20%);
.element {
color: $puerto-rico;
box-shadow: 0 0 0 2px rgba($puerto-rico, 0.35);
}