Named color · #A9C6CB
Spring Storm
Spring Storm is #A9C6CB: rgb(169 198 203), hsl(189 25% 73%), oklch(0.807 0.032 209.2). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Spring Storm color name →
#A9C6CB
oklch(0.807 0.032 209.2)
Color conversions
- HEX
- #a9c6cb
- RGB
- rgb(169 198 203)
- HSL
- hsl(189 25% 73%)
- HWB
- hwb(189 66% 20%)
- OKLCH
- oklch(0.807 0.032 209.2)
- OKLab
- oklab(0.807 -0.028 -0.016)
- CIE Lab
- lab(77.83 -9.31 -5.96)
- LCH
- lch(77.83 11.06 212.6)
- CMYK
- cmyk(17% 2% 0% 20%)
Tints · Shades · Tones
Tints
- B1CCD0
- BAD1D5
- C3D7DA
- CBDDE0
- D4E2E5
- DCE8EA
- E5EEEF
- EEF3F4
- F6F9FA
Shades
- 92ACB0
- 7C9296
- 677A7D
- 536265
- 3F4B4D
- 2C3537
- 1B2122
- 0A0E0F
- 010202
Tones
- A5BFC3
- A1B8BC
- 9DB0B4
- 99A9AC
- 95A2A5
- 909B9D
- 8C9496
- 888E8F
- 848787
Color harmonies
Complementary +180°
- A9C6CB
Spring Storm
- D4B9B4
≈ Sepia Rose
Analogous -30° +30°
- A9C6CB
Spring Storm
- ABC7C0
≈ Peppermint Pie
- AEC3D3
≈ Ruffled Feathers
Triadic +120° +240°
- A9C6CB
Spring Storm
- CCB9CA
≈ Antique Heather
- C8BFA9
≈ Pale Bamboo
Split-complementary +150° +210°
- A9C6CB
Spring Storm
- D2B8BF
≈ Blobfish
- D0BBAC
≈ Windrift Beige
Tetradic +90° +180° +270°
- A9C6CB
Spring Storm
- C2BCD2
≈ Twilight Pearl
- D4B9B4
≈ Sepia Rose
- BDC3AC
≈ Jungle Moss
Contrast & accessibility
Ag
FailOn white
WCAG 1.80:1 · APCA Lc 34
Ag
AAAOn black
WCAG 11.62:1 · APCA Lc 69
Best text color: #000000
WCAG 11.62:1 (AAA) · APCA Lc 69
Contrast pairs
Code snippets
CSS
:root {
--spring-storm: #a9c6cb;
--spring-storm-rgb: 169 198 203;
--spring-storm-oklch: oklch(0.807 0.032 209.2);
}
.element {
color: var(--spring-storm);
background-color: hsl(189 25% 73%);
border-color: oklch(0.807 0.032 209.2);
}Tailwind CSS v4
@theme {
--color-spring-storm: #a9c6cb;
--color-spring-storm-50: #ebf8fa;
--color-spring-storm-100: #dcebee;
--color-spring-storm-200: #c5d8dc;
--color-spring-storm-300: #a6bcc1;
--color-spring-storm-400: #89a4a9;
--color-spring-storm-500: #6e8c92;
--color-spring-storm-600: #5d777b;
--color-spring-storm-700: #4a5f63;
--color-spring-storm-800: #364648;
--color-spring-storm-900: #253032;
--color-spring-storm-950: #131c1e;
}SCSS
$spring-storm: #a9c6cb;
$spring-storm-rgb: 169, 198, 203;
$spring-storm-light: mix(#fff, $spring-storm, 20%);
$spring-storm-dark: mix(#000, $spring-storm, 20%);
.element {
color: $spring-storm;
box-shadow: 0 0 0 2px rgba($spring-storm, 0.35);
}