Benannte Farbe · #E4E6DC
Crystal Brooke
Crystal Brooke ist #E4E6DC: rgb(228 230 220), hsl(72 17% 88%), oklch(0.921 0.014 115.8). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Gray mean? → · Crystal Brooke color name →
#E4E6DC
oklch(0.921 0.014 115.8)
Farbumrechnungen
- HEX
- #e4e6dc
- RGB
- rgb(228 230 220)
- HSL
- hsl(72 17% 88%)
- HWB
- hwb(72 86% 10%)
- OKLCH
- oklch(0.921 0.014 115.8)
- OKLab
- oklab(0.921 -0.006 0.012)
- CIE Lab
- lab(90.93 -2.01 4.64)
- LCH
- lch(90.93 5.06 113.4)
- CMYK
- cmyk(1% 0% 4% 10%)
Tints · Shades · Tones
Tints
- E7E8DF
- E9EBE3
- ECEDE6
- EFF0EA
- F1F2ED
- F4F5F1
- F7F7F4
- FAFAF8
- FCFCFB
Shades
- C6C8BF
- A9ABA3
- 8D8E88
- 72736E
- 585954
- 3F403C
- 282826
- 121311
- 030302
Tones
- DADBD2
- CFD1C9
- C5C6BF
- BBBCB6
- B1B2AD
- A7A7A4
- 9D9D9B
- 939392
- 8A8A89
Farbharmonien
Komplementär +180°
- E4E6DC
Crystal Brooke
- E5E3ED
≈ Farsighted
Analog -30° +30°
- E4E6DC
Crystal Brooke
- E9E4DB
≈ Hot Desert
- DFE7DF
≈ Winter Veil
Triadisch +120° +240°
- E4E6DC
Crystal Brooke
- DDE6ED
≈ White Frost
- EDE1E5
≈ Pink Booties
Geteilt komplementär +150° +210°
- E4E6DC
Crystal Brooke
- E0E5EE
≈ Radiant Moon
- EAE2EA
≈ Dream Dust
Tetradisch +90° +180° +270°
- E4E6DC
Crystal Brooke
- DBE8E9
≈ Wave Crest
- E5E3ED
≈ Farsighted
- EEE2E0
≈ Shattered Porcelain
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 1.26:1 · APCA Lc 13
Ag
AAAAuf Schwarz
WCAG 16.65:1 · APCA Lc 91
Beste Textfarbe: #000000
WCAG 16.65:1 (AAA) · APCA Lc 91
Contrast pairs
Code-Snippets
CSS
:root {
--crystal-brooke: #e4e6dc;
--crystal-brooke-rgb: 228 230 220;
--crystal-brooke-oklch: oklch(0.921 0.014 115.8);
}
.element {
color: var(--crystal-brooke);
background-color: hsl(72 17% 88%);
border-color: oklch(0.921 0.014 115.8);
}Tailwind CSS v4
@theme {
--color-crystal-brooke: #e4e6dc;
--color-crystal-brooke-50: #f5f6f1;
--color-crystal-brooke-100: #e7e8e3;
--color-crystal-brooke-200: #d3d5cf;
--color-crystal-brooke-300: #b6b8b1;
--color-crystal-brooke-400: #9e9f97;
--color-crystal-brooke-500: #85877d;
--color-crystal-brooke-600: #71736a;
--color-crystal-brooke-700: #5a5c55;
--color-crystal-brooke-800: #42433e;
--color-crystal-brooke-900: #2e2e2a;
--color-crystal-brooke-950: #1a1b18;
}SCSS
$crystal-brooke: #e4e6dc;
$crystal-brooke-rgb: 228, 230, 220;
$crystal-brooke-light: mix(#fff, $crystal-brooke, 20%);
$crystal-brooke-dark: mix(#000, $crystal-brooke, 20%);
.element {
color: $crystal-brooke;
box-shadow: 0 0 0 2px rgba($crystal-brooke, 0.35);
}