Named color · #96AAB0
Meditative
Meditative is #96AAB0: rgb(150 170 176), hsl(194 14% 64%), oklch(0.724 0.024 217.7). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Meditative color name →
#96AAB0
oklch(0.724 0.024 217.7)
Color conversions
- HEX
- #96aab0
- RGB
- rgb(150 170 176)
- HSL
- hsl(194 14% 64%)
- HWB
- hwb(194 59% 31%)
- OKLCH
- oklch(0.724 0.024 217.7)
- OKLab
- oklab(0.724 -0.019 -0.015)
- CIE Lab
- lab(68.19 -6.26 -5.58)
- LCH
- lch(68.19 8.39 221.7)
- CMYK
- cmyk(15% 3% 0% 31%)
Tints · Shades · Tones
Tints
- A0B2B8
- AABBBF
- B5C3C7
- BFCBCF
- C9D4D7
- D4DCDF
- DFE5E7
- E9EEEF
- F4F6F7
Shades
- 829399
- 6E7D82
- 5B686C
- 495356
- 373F42
- 262D2E
- 161B1C
- 080B0B
- 010101
Tones
- 94A6AB
- 92A1A6
- 909DA1
- 8D999C
- 8B9598
- 899193
- 878C8E
- 848889
- 828485
Color harmonies
Complementary +180°
- 96AAB0
Meditative
- B4A19B
≈ Plum Taupe
Analogous -30° +30°
- 96AAB0
Meditative
- 96ABA9
≈ Grey Mist
- 9BA8B5
≈ Acier Tint
Triadic +120° +240°
- 96AAB0
Meditative
- B1A0AB
≈ Symbolic
- AAA696
≈ Amazing Boulder
Split-complementary +150° +210°
- 96AAB0
Meditative
- B4A0A3
≈ Dusky Hyacinth
- B0A496
≈ Tranquil Taupe
Tetradic +90° +180° +270°
- 96AAB0
Meditative
- AAA2B2
≈ Luxe Lilac
- B4A19B
≈ Plum Taupe
- A2A999
≈ Moss Agate
Contrast & accessibility
Ag
FailOn white
WCAG 2.42:1 · APCA Lc 48
Ag
AAAOn black
WCAG 8.67:1 · APCA Lc 54
Best text color: #000000
WCAG 8.67:1 (AAA) · APCA Lc 54
Contrast pairs
Code snippets
CSS
:root {
--meditative: #96aab0;
--meditative-rgb: 150 170 176;
--meditative-oklch: oklch(0.724 0.024 217.7);
}
.element {
color: var(--meditative);
background-color: hsl(194 14% 64%);
border-color: oklch(0.724 0.024 217.7);
}Tailwind CSS v4
@theme {
--color-meditative: #96aab0;
--color-meditative-50: #eef7fa;
--color-meditative-100: #e0eaed;
--color-meditative-200: #cad7db;
--color-meditative-300: #abbbc0;
--color-meditative-400: #8fa2a8;
--color-meditative-500: #758a91;
--color-meditative-600: #63757a;
--color-meditative-700: #4f5e62;
--color-meditative-800: #394548;
--color-meditative-900: #272f32;
--color-meditative-950: #151c1e;
}SCSS
$meditative: #96aab0;
$meditative-rgb: 150, 170, 176;
$meditative-light: mix(#fff, $meditative, 20%);
$meditative-dark: mix(#000, $meditative, 20%);
.element {
color: $meditative;
box-shadow: 0 0 0 2px rgba($meditative, 0.35);
}