Benannte Farbe · #B3BFC8
Winter Wonderland
Winter Wonderland ist #B3BFC8: rgb(179 191 200), hsl(206 16% 74%), oklch(0.798 0.018 240.1). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Gray mean? → · Winter Wonderland color name →
#B3BFC8
oklch(0.798 0.018 240.1)
Farbumrechnungen
- HEX
- #b3bfc8
- RGB
- rgb(179 191 200)
- HSL
- hsl(206 16% 74%)
- HWB
- hwb(206 70% 22%)
- OKLCH
- oklch(0.798 0.018 240.1)
- OKLab
- oklab(0.798 -0.009 -0.016)
- CIE Lab
- lab(76.61 -2.94 -6.04)
- LCH
- lch(76.61 6.72 244)
- CMYK
- cmyk(11% 4% 0% 22%)
Tints · Shades · Tones
Tints
- BAC5CD
- C2CCD3
- C9D2D8
- D1D8DE
- D8DFE3
- E0E5E9
- E8EBEE
- EFF2F4
- F7F8F9
Shades
- 9BA6AE
- 848D94
- 6E757B
- 585E63
- 43484C
- 2F3336
- 1D1F21
- 0C0D0F
- 010202
Tones
- AEB9C1
- A9B2B9
- A3ACB2
- 9EA5AB
- 999FA3
- 94999C
- 8F9295
- 8A8C8E
- 858687
Farbharmonien
Komplementär +180°
- B3BFC8
Winter Wonderland
- C6BBB2
≈ Legendary
Analog -30° +30°
- B3BFC8
Winter Wonderland
- B0C1C4
≈ Degas Blue
- B8BDC9
≈ Blue Rinse
Triadisch +120° +240°
- B3BFC8
Winter Wonderland
- C8B8BC
≈ Iris Pink
- BBBFB2
≈ Tasman
Geteilt komplementär +150° +210°
- B3BFC8
Winter Wonderland
- C9B9B6
≈ Studio Mauve
- C2BDB0
≈ Roycroft Mist Grey
Tetradisch +90° +180° +270°
- B3BFC8
Winter Wonderland
- C4B9C3
≈ Pocketful of Posies
- C6BBB2
≈ Legendary
- B5C1B7
≈ Opalescence
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 1.87:1 · APCA Lc 36
Ag
AAAAuf Schwarz
WCAG 11.20:1 · APCA Lc 67
Beste Textfarbe: #000000
WCAG 11.20:1 (AAA) · APCA Lc 67
Contrast pairs
Code-Snippets
CSS
:root {
--winter-wonderland: #b3bfc8;
--winter-wonderland-rgb: 179 191 200;
--winter-wonderland-oklch: oklch(0.798 0.018 240.1);
}
.element {
color: var(--winter-wonderland);
background-color: hsl(206 16% 74%);
border-color: oklch(0.798 0.018 240.1);
}Tailwind CSS v4
@theme {
--color-winter-wonderland: #b3bfc8;
--color-winter-wonderland-50: #f1f6fa;
--color-winter-wonderland-100: #e3e9ee;
--color-winter-wonderland-200: #ced5dc;
--color-winter-wonderland-300: #b0b9c0;
--color-winter-wonderland-400: #95a0a8;
--color-winter-wonderland-500: #7c8891;
--color-winter-wonderland-600: #69737b;
--color-winter-wonderland-700: #545c62;
--color-winter-wonderland-800: #3d4348;
--color-winter-wonderland-900: #2a2f32;
--color-winter-wonderland-950: #171b1e;
}SCSS
$winter-wonderland: #b3bfc8;
$winter-wonderland-rgb: 179, 191, 200;
$winter-wonderland-light: mix(#fff, $winter-wonderland, 20%);
$winter-wonderland-dark: mix(#000, $winter-wonderland, 20%);
.element {
color: $winter-wonderland;
box-shadow: 0 0 0 2px rgba($winter-wonderland, 0.35);
}