Named color · #99D3DF
Tourmaline Water Blue
Tourmaline Water Blue is #99D3DF: rgb(153 211 223), hsl(190 52% 74%), oklch(0.831 0.062 211.8). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Cyan mean? → · Tourmaline Water Blue color name →
#99D3DF
oklch(0.831 0.062 211.8)
Color conversions
- HEX
- #99d3df
- RGB
- rgb(153 211 223)
- HSL
- hsl(190 52% 74%)
- HWB
- hwb(190 60% 13%)
- OKLCH
- oklch(0.831 0.062 211.8)
- OKLab
- oklab(0.831 -0.052 -0.033)
- CIE Lab
- lab(80.88 -17.15 -12.27)
- LCH
- lch(80.88 21.09 215.6)
- CMYK
- cmyk(31% 5% 0% 13%)
Tints · Shades · Tones
Tints
- A4D7E2
- AEDCE5
- B8E0E9
- C3E5EC
- CDE9EF
- D7EDF2
- E1F2F5
- EBF6F9
- F5FBFC
Shades
- 84B7C2
- 709CA5
- 5D828A
- 4A696F
- 385156
- 273A3D
- 172427
- 081012
- 010202
Tones
- 97CAD5
- 95C2CB
- 93B9C2
- 90B1B8
- 8EA9AE
- 8BA0A5
- 89989C
- 869092
- 838889
Color harmonies
Complementary +180°
- 99D3DF
Tourmaline Water Blue
- EDBAAF
≈ Carnation Coral
Analogous -30° +30°
- 99D3DF
Tourmaline Water Blue
- 9BD5CA
≈ Aqua Glow
- A5CDED
≈ Sail
Triadic +120° +240°
- 99D3DF
Tourmaline Water Blue
- E0BADA
≈ Sweetie Pie
- D6C79A
≈ Parsnip
Split-complementary +150° +210°
- 99D3DF
Tourmaline Water Blue
- EBB8C5
≈ Chantilly
- E6BF9F
≈ Bronze Sand
Tetradic +90° +180° +270°
- 99D3DF
Tourmaline Water Blue
- CFBFEA
≈ York Plum
- EDBAAF
≈ Carnation Coral
- C1CFA2
≈ Spumoni Green
Contrast & accessibility
Ag
FailOn white
WCAG 1.64:1 · APCA Lc 29
Ag
AAAOn black
WCAG 12.73:1 · APCA Lc 74
Best text color: #000000
WCAG 12.73:1 (AAA) · APCA Lc 74
Contrast pairs
Code snippets
CSS
:root {
--tourmaline-water-blue: #99d3df;
--tourmaline-water-blue-rgb: 153 211 223;
--tourmaline-water-blue-oklch: oklch(0.831 0.062 211.8);
}
.element {
color: var(--tourmaline-water-blue);
background-color: hsl(190 52% 74%);
border-color: oklch(0.831 0.062 211.8);
}Tailwind CSS v4
@theme {
--color-tourmaline-water-blue: #99d3df;
--color-tourmaline-water-blue-50: #e2faff;
--color-tourmaline-water-blue-100: #d2eef4;
--color-tourmaline-water-blue-200: #b7dce4;
--color-tourmaline-water-blue-300: #94c0cb;
--color-tourmaline-water-blue-400: #73a9b4;
--color-tourmaline-water-blue-500: #52919e;
--color-tourmaline-water-blue-600: #467b85;
--color-tourmaline-water-blue-700: #38626b;
--color-tourmaline-water-blue-800: #27484e;
--color-tourmaline-water-blue-900: #1a3236;
--color-tourmaline-water-blue-950: #0a1e21;
}SCSS
$tourmaline-water-blue: #99d3df;
$tourmaline-water-blue-rgb: 153, 211, 223;
$tourmaline-water-blue-light: mix(#fff, $tourmaline-water-blue, 20%);
$tourmaline-water-blue-dark: mix(#000, $tourmaline-water-blue, 20%);
.element {
color: $tourmaline-water-blue;
box-shadow: 0 0 0 2px rgba($tourmaline-water-blue, 0.35);
}