Named color · #9CC9D4
Soothing Blue
Soothing Blue is #9CC9D4: rgb(156 201 212), hsl(192 39% 72%), oklch(0.808 0.05 214.3). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Cyan mean? → · Soothing Blue color name →
#9CC9D4
oklch(0.808 0.05 214.3)
Color conversions
- HEX
- #9cc9d4
- RGB
- rgb(156 201 212)
- HSL
- hsl(192 39% 72%)
- HWB
- hwb(192 61% 17%)
- OKLCH
- oklch(0.808 0.05 214.3)
- OKLab
- oklab(0.808 -0.041 -0.028)
- CIE Lab
- lab(78.03 -13.45 -10.61)
- LCH
- lch(78.03 17.13 218.3)
- CMYK
- cmyk(26% 5% 0% 17%)
Tints · Shades · Tones
Tints
- A6CED8
- B0D4DD
- BAD9E1
- C4DFE5
- CEE4E9
- D7E9EE
- E1EFF2
- EBF4F6
- F5FAFB
Shades
- 87AEB8
- 73959D
- 5F7C83
- 4C6469
- 394C51
- 28363A
- 182224
- 090F10
- 010202
Tones
- 99C1CB
- 97BAC3
- 94B3BA
- 92ABB2
- 8FA4A9
- 8C9DA1
- 899598
- 868E90
- 838788
Color harmonies
Complementary +180°
- 9CC9D4
Soothing Blue
- DEB5AB
≈ Evening Sand
Analogous -30° +30°
- 9CC9D4
Soothing Blue
- 9DCBC4
≈ Jamaica Bay
- A6C4DF
≈ Utterly Blue
Triadic +120° +240°
- 9CC9D4
Soothing Blue
- D5B5CD
≈ Pink Power
- CAC09C
≈ Tangled Vines
Split-complementary +150° +210°
- 9CC9D4
Soothing Blue
- DDB3BC
≈ Pentalon
- D8BA9F
≈ Tracery
Tetradic +90° +180° +270°
- 9CC9D4
Soothing Blue
- C7B9DB
≈ New Love
- DEB5AB
≈ Evening Sand
- B9C6A3
≈ Quaking Grass
Contrast & accessibility
Ag
FailOn white
WCAG 1.79:1 · APCA Lc 33
Ag
AAAOn black
WCAG 11.71:1 · APCA Lc 69
Best text color: #000000
WCAG 11.71:1 (AAA) · APCA Lc 69
Contrast pairs
Code snippets
CSS
:root {
--soothing-blue: #9cc9d4;
--soothing-blue-rgb: 156 201 212;
--soothing-blue-oklch: oklch(0.808 0.05 214.3);
}
.element {
color: var(--soothing-blue);
background-color: hsl(192 39% 72%);
border-color: oklch(0.808 0.05 214.3);
}Tailwind CSS v4
@theme {
--color-soothing-blue: #9cc9d4;
--color-soothing-blue-50: #e6f9fe;
--color-soothing-blue-100: #d6ecf3;
--color-soothing-blue-200: #bddae2;
--color-soothing-blue-300: #9cbec8;
--color-soothing-blue-400: #7da6b1;
--color-soothing-blue-500: #5f8f9b;
--color-soothing-blue-600: #517983;
--color-soothing-blue-700: #406169;
--color-soothing-blue-800: #2e474c;
--color-soothing-blue-900: #1f3135;
--color-soothing-blue-950: #0e1d20;
}SCSS
$soothing-blue: #9cc9d4;
$soothing-blue-rgb: 156, 201, 212;
$soothing-blue-light: mix(#fff, $soothing-blue, 20%);
$soothing-blue-dark: mix(#000, $soothing-blue, 20%);
.element {
color: $soothing-blue;
box-shadow: 0 0 0 2px rgba($soothing-blue, 0.35);
}