Benannte Farbe · #9EB8BB
Windswept Clouds
Windswept Clouds ist #9EB8BB: rgb(158 184 187), hsl(186 18% 68%), oklch(0.764 0.029 205.1). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Gray mean? → · Windswept Clouds color name →
#9EB8BB
oklch(0.764 0.029 205.1)
Farbumrechnungen
- HEX
- #9eb8bb
- RGB
- rgb(158 184 187)
- HSL
- hsl(186 18% 68%)
- HWB
- hwb(186 62% 27%)
- OKLCH
- oklch(0.764 0.029 205.1)
- OKLab
- oklab(0.764 -0.026 -0.012)
- CIE Lab
- lab(72.88 -8.72 -4.67)
- LCH
- lch(72.88 9.89 208.2)
- CMYK
- cmyk(16% 2% 0% 27%)
Tints · Shades · Tones
Tints
- A7BFC2
- B1C6C8
- BBCDCF
- C4D4D6
- CEDBDD
- D8E2E3
- E1E9EA
- EBF1F1
- F5F8F8
Shades
- 89A0A2
- 74888A
- 607173
- 4D5B5C
- 3A4546
- 293132
- 181E1F
- 090C0D
- 010202
Tones
- 9BB2B5
- 98ADAF
- 95A7A9
- 92A1A3
- 8F9C9D
- 8C9697
- 899091
- 868B8B
- 838586
Farbharmonien
Komplementär +180°
- 9EB8BB
Windswept Clouds
- C4ACA9
≈ Dusky
Analog -30° +30°
- 9EB8BB
Windswept Clouds
- A0B9B1
≈ Opal Silk
- A1B6C2
≈ Country Air
Triadisch +120° +240°
- 9EB8BB
Windswept Clouds
- BCACBD
≈ Lavender Frost
- BBB19E
≈ Cannery Park
Geteilt komplementär +150° +210°
- 9EB8BB
Windswept Clouds
- C2ABB3
≈ Bedroom Plum
- C2AEA1
≈ Floral Arrangement
Tetradisch +90° +180° +270°
- 9EB8BB
Windswept Clouds
- B3AFC3
≈ Wisteria Trellis
- C4ACA9
≈ Dusky
- B1B5A0
≈ Environmental
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 2.09:1 · APCA Lc 41
Ag
AAAAuf Schwarz
WCAG 10.02:1 · APCA Lc 61
Beste Textfarbe: #000000
WCAG 10.02:1 (AAA) · APCA Lc 61
Contrast pairs
Code-Snippets
CSS
:root {
--windswept-clouds: #9eb8bb;
--windswept-clouds-rgb: 158 184 187;
--windswept-clouds-oklch: oklch(0.764 0.029 205.1);
}
.element {
color: var(--windswept-clouds);
background-color: hsl(186 18% 68%);
border-color: oklch(0.764 0.029 205.1);
}Tailwind CSS v4
@theme {
--color-windswept-clouds: #9eb8bb;
--color-windswept-clouds-50: #ecf8f9;
--color-windswept-clouds-100: #deebed;
--color-windswept-clouds-200: #c7d8da;
--color-windswept-clouds-300: #a7bcbf;
--color-windswept-clouds-400: #8ba4a6;
--color-windswept-clouds-500: #708c8f;
--color-windswept-clouds-600: #5f7679;
--color-windswept-clouds-700: #4c5f61;
--color-windswept-clouds-800: #374547;
--color-windswept-clouds-900: #263031;
--color-windswept-clouds-950: #141c1d;
}SCSS
$windswept-clouds: #9eb8bb;
$windswept-clouds-rgb: 158, 184, 187;
$windswept-clouds-light: mix(#fff, $windswept-clouds, 20%);
$windswept-clouds-dark: mix(#000, $windswept-clouds, 20%);
.element {
color: $windswept-clouds;
box-shadow: 0 0 0 2px rgba($windswept-clouds, 0.35);
}