Named color · #96D3D8
Aqua Bloom
Aqua Bloom is #96D3D8: rgb(150 211 216), hsl(185 46% 72%), oklch(0.827 0.062 202.4). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Cyan mean? → · Aqua Bloom color name →
#96D3D8
oklch(0.827 0.062 202.4)
Color conversions
- HEX
- #96d3d8
- RGB
- rgb(150 211 216)
- HSL
- hsl(185 46% 72%)
- HWB
- hwb(185 59% 15%)
- OKLCH
- oklch(0.827 0.062 202.4)
- OKLab
- oklab(0.827 -0.058 -0.024)
- CIE Lab
- lab(80.54 -19.28 -9.08)
- LCH
- lch(80.54 21.32 205.2)
- CMYK
- cmyk(31% 2% 0% 15%)
Tints · Shades · Tones
Tints
- A1D7DC
- ACDCE0
- B7E0E4
- C1E5E8
- CCE9EB
- D6EEEF
- E0F2F3
- EBF6F7
- F5FBFB
Shades
- 82B7BC
- 6E9CA0
- 5B8285
- 49696B
- 375153
- 263A3B
- 162425
- 081011
- 010202
Tones
- 94CACF
- 93C2C6
- 91B9BD
- 8FB1B4
- 8DA9AB
- 8AA0A2
- 88989A
- 859091
- 838888
Color harmonies
Complementary +180°
- 96D3D8
Aqua Bloom
- EDB7B4
≈ Summer Cocktails
Analogous -30° +30°
- 96D3D8
Aqua Bloom
- 9DD4C2
≈ Aqua Glow
- 9ECEE9
≈ Endless Blue
Triadic +120° +240°
- 96D3D8
Aqua Bloom
- DAB9DF
≈ Romantic Morning
- DBC399
≈ Natural Twine
Split-complementary +150° +210°
- 96D3D8
Aqua Bloom
- E8B6CA
≈ Sweet Lilac
- E8BCA1
≈ Mollusca
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
FailOn white
WCAG 1.66:1 · APCA Lc 29
Ag
AAAOn black
WCAG 12.60:1 · APCA Lc 74
Best text color: #000000
WCAG 12.60:1 (AAA) · APCA Lc 74
Contrast pairs
Code snippets
CSS
:root {
--aqua-bloom: #96d3d8;
--aqua-bloom-rgb: 150 211 216;
--aqua-bloom-oklch: oklch(0.827 0.062 202.4);
}
.element {
color: var(--aqua-bloom);
background-color: hsl(185 46% 72%);
border-color: oklch(0.827 0.062 202.4);
}Tailwind CSS v4
@theme {
--color-aqua-bloom: #96d3d8;
--color-aqua-bloom-50: #e2fbfd;
--color-aqua-bloom-100: #d1eef2;
--color-aqua-bloom-200: #b6dde1;
--color-aqua-bloom-300: #92c1c6;
--color-aqua-bloom-400: #71aaae;
--color-aqua-bloom-500: #509398;
--color-aqua-bloom-600: #447c81;
--color-aqua-bloom-700: #366367;
--color-aqua-bloom-800: #26494b;
--color-aqua-bloom-900: #1a3334;
--color-aqua-bloom-950: #0a1e20;
}SCSS
$aqua-bloom: #96d3d8;
$aqua-bloom-rgb: 150, 211, 216;
$aqua-bloom-light: mix(#fff, $aqua-bloom, 20%);
$aqua-bloom-dark: mix(#000, $aqua-bloom, 20%);
.element {
color: $aqua-bloom;
box-shadow: 0 0 0 2px rgba($aqua-bloom, 0.35);
}