Benannte Farbe · #DCEEE3
Sparkling Brook
Sparkling Brook ist #DCEEE3: rgb(220 238 227), hsl(143 35% 90%), oklch(0.933 0.024 159.1). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Gray mean? → · Sparkling Brook color name →
#DCEEE3
oklch(0.933 0.024 159.1)
Farbumrechnungen
- HEX
- #dceee3
- RGB
- rgb(220 238 227)
- HSL
- hsl(143 35% 90%)
- HWB
- hwb(143 86% 7%)
- OKLCH
- oklch(0.933 0.024 159.1)
- OKLab
- oklab(0.933 -0.022 0.009)
- CIE Lab
- lab(92.52 -7.67 3.2)
- LCH
- lch(92.52 8.31 157.4)
- CMYK
- cmyk(8% 0% 5% 7%)
Tints · Shades · Tones
Tints
- DFF0E6
- E3F1E9
- E6F3EB
- EAF5EE
- EDF7F1
- F1F8F4
- F4FAF7
- F8FCF9
- FBFDFC
Shades
- BFCFC5
- A3B1A8
- 88938C
- 6E7771
- 545C57
- 3C423F
- 262A27
- 111412
- 020303
Tones
- D2E2D9
- C9D7CE
- C0CCC4
- B6C1BA
- ADB5B0
- A4ABA6
- 9BA09D
- 929593
- 898A89
Farbharmonien
Komplementär +180°
- DCEEE3
Sparkling Brook
- F4E3EE
≈ Pale Orchid Petal
Analog -30° +30°
- DCEEE3
Sparkling Brook
- E4ECDB
≈ Minified Mint
- D8EEEC
≈ Blue Green Rules
Triadisch +120° +240°
- DCEEE3
Sparkling Brook
- E5E7F9
≈ Glitter
- F8E4DD
≈ Berry Cheesecake
Geteilt komplementär +150° +210°
- DCEEE3
Sparkling Brook
- EDE5F5
≈ Holographic Lavender
- F8E3E5
≈ Eased Pink
Tetradisch +90° +180° +270°
- DCEEE3
Sparkling Brook
- DDEBF9
≈ Hoarfrost
- F4E3EE
≈ Pale Orchid Petal
- F4E6D8
≈ Heirloom Lace
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 1.20:1 · APCA Lc 10
Ag
AAAAuf Schwarz
WCAG 17.38:1 · APCA Lc 94
Beste Textfarbe: #000000
WCAG 17.38:1 (AAA) · APCA Lc 94
Contrast pairs
Code-Snippets
CSS
:root {
--sparkling-brook: #dceee3;
--sparkling-brook-rgb: 220 238 227;
--sparkling-brook-oklch: oklch(0.933 0.024 159.1);
}
.element {
color: var(--sparkling-brook);
background-color: hsl(143 35% 90%);
border-color: oklch(0.933 0.024 159.1);
}Tailwind CSS v4
@theme {
--color-sparkling-brook: #dceee3;
--color-sparkling-brook-50: #eff7f3;
--color-sparkling-brook-100: #e1eae5;
--color-sparkling-brook-200: #ccd8d1;
--color-sparkling-brook-300: #adbbb3;
--color-sparkling-brook-400: #93a399;
--color-sparkling-brook-500: #798b80;
--color-sparkling-brook-600: #67766d;
--color-sparkling-brook-700: #525e57;
--color-sparkling-brook-800: #3c453f;
--color-sparkling-brook-900: #29302b;
--color-sparkling-brook-950: #171c19;
}SCSS
$sparkling-brook: #dceee3;
$sparkling-brook-rgb: 220, 238, 227;
$sparkling-brook-light: mix(#fff, $sparkling-brook, 20%);
$sparkling-brook-dark: mix(#000, $sparkling-brook, 20%);
.element {
color: $sparkling-brook;
box-shadow: 0 0 0 2px rgba($sparkling-brook, 0.35);
}