Named color · #00FFCC
Plunge Pool
Plunge Pool is #00FFCC: rgb(0 255 204), hsl(168 100% 50%), oklch(0.89 0.174 171.3). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Teal mean? → · Plunge Pool color name →
#00FFCC
oklch(0.89 0.174 171.3)
Color conversions
- HEX
- #00ffcc
- RGB
- rgb(0 255 204)
- HSL
- hsl(168 100% 50%)
- HWB
- hwb(168 0% 0%)
- OKLCH
- oklch(0.89 0.174 171.3)
- OKLab
- oklab(0.89 -0.172 0.026)
- CIE Lab
- lab(89.56 -61.06 9.62)
- LCH
- lch(89.56 61.82 171.1)
- CMYK
- cmyk(100% 0% 20% 0%)
Tints · Shades · Tones
Tints
- 4FFFD1
- 6FFFD6
- 88FFDB
- 9DFFE0
- B0FFE5
- C2FFEA
- D2FFF0
- E2FFF5
- F1FFFA
Shades
- 00DEB1
- 00BE97
- 009E7E
- 008065
- 00634E
- 004837
- 002E22
- 00160F
- 000302
Tones
- 3AF2C4
- 50E5BC
- 5ED8B5
- 68CBAD
- 70BFA5
- 75B29E
- 7AA596
- 7D998F
- 7F8C87
Color harmonies
Complementary +180°
- 00FFCC
Plunge Pool
- FFC9E0
≈ Cherry Blush
Analogous -30° +30°
- 00FFCC
Plunge Pool
- 95F787
≈ Radar Blip Green
- 52F5FF
≈ Frozen Turquoise
Triadic +120° +240°
- 00FFCC
Plunge Pool
- DAD5FF
≈ Pale Lavender
- FFCFB4
≈ Apricot Lily
Split-complementary +150° +210°
- 00FFCC
Plunge Pool
- F7C8FF
≈ Aquarelle Lilac
- FFCDCA
≈ Aromatic Breeze
Tetradic +90° +180° +270°
- 00FFCC
Plunge Pool
- C7DCFF
≈ Arc Light
- FFC9E0
≈ Cherry Blush
- FFD487
≈ Oberon
Contrast & accessibility
Ag
FailOn white
WCAG 1.29:1 · APCA Lc 14
Ag
AAAOn black
WCAG 16.17:1 · APCA Lc 90
Best text color: #000000
WCAG 16.17:1 (AAA) · APCA Lc 90
Contrast pairs
Code snippets
CSS
:root {
--plunge-pool: #00ffcc;
--plunge-pool-rgb: 0 255 204;
--plunge-pool-oklch: oklch(0.89 0.174 171.3);
}
.element {
color: var(--plunge-pool);
background-color: hsl(168 100% 50%);
border-color: oklch(0.89 0.174 171.3);
}Tailwind CSS v4
@theme {
--color-plunge-pool: #00ffcc;
--color-plunge-pool-50: #c2fff1;
--color-plunge-pool-100: #aafbe3;
--color-plunge-pool-200: #7dedce;
--color-plunge-pool-300: #31d4af;
--color-plunge-pool-400: #00be91;
--color-plunge-pool-500: #00a877;
--color-plunge-pool-600: #008e65;
--color-plunge-pool-700: #007250;
--color-plunge-pool-800: #005438;
--color-plunge-pool-900: #003b26;
--color-plunge-pool-950: #002415;
}SCSS
$plunge-pool: #00ffcc;
$plunge-pool-rgb: 0, 255, 204;
$plunge-pool-light: mix(#fff, $plunge-pool, 20%);
$plunge-pool-dark: mix(#000, $plunge-pool, 20%);
.element {
color: $plunge-pool;
box-shadow: 0 0 0 2px rgba($plunge-pool, 0.35);
}