Benannte Farbe · #F4E6E0
Clerestory
Clerestory ist #F4E6E0: rgb(244 230 224), hsl(18 48% 92%), oklch(0.934 0.017 44.8). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Gray mean? → · Clerestory color name →
#F4E6E0
oklch(0.934 0.017 44.8)
Farbumrechnungen
- HEX
- #f4e6e0
- RGB
- rgb(244 230 224)
- HSL
- hsl(18 48% 92%)
- HWB
- hwb(18 88% 4%)
- OKLCH
- oklch(0.934 0.017 44.8)
- OKLab
- oklab(0.934 0.012 0.012)
- CIE Lab
- lab(92.3 4.17 4.73)
- LCH
- lch(92.3 6.3 48.6)
- CMYK
- cmyk(0% 6% 8% 4%)
Tints · Shades · Tones
Tints
- F5E8E3
- F6EBE6
- F7EDE9
- F8F0EC
- FAF2EF
- FBF5F3
- FCF7F6
- FDFAF9
- FEFCFC
Shades
- D4C8C3
- B5ABA6
- 978E8A
- 7A7370
- 5E5956
- 44403E
- 2B2827
- 141312
- 030302
Tones
- E8DBD6
- DCD1CC
- D0C6C2
- C4BCB8
- B8B2AF
- ADA7A5
- A19D9C
- 969492
- 8B8A89
Farbharmonien
Komplementär +180°
- F4E6E0
Clerestory
- DEECF2
≈ Ice Fishing
Analog -30° +30°
- F4E6E0
Clerestory
- F5E5E6
≈ First Impression
- F0E8DD
≈ Percale
Triadisch +120° +240°
- F4E6E0
Clerestory
- DFEDE6
≈ Molten Ice
- E8E8F5
≈ Icy Lilac
Geteilt komplementär +150° +210°
- F4E6E0
Clerestory
- DDEDED
≈ White Glaze
- E2EAF5
≈ Harbour Afternoon
Tetradisch +90° +180° +270°
- F4E6E0
Clerestory
- E4ECE1
≈ Sign of Spring
- DEECF2
≈ Ice Fishing
- EEE6F2
≈ Tranquil Eve
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 1.21:1 · APCA Lc 11
Ag
AAAAuf Schwarz
WCAG 17.24:1 · APCA Lc 93
Beste Textfarbe: #000000
WCAG 17.24:1 (AAA) · APCA Lc 93
Contrast pairs
Code-Snippets
CSS
:root {
--clerestory: #f4e6e0;
--clerestory-rgb: 244 230 224;
--clerestory-oklch: oklch(0.934 0.017 44.8);
}
.element {
color: var(--clerestory);
background-color: hsl(18 48% 92%);
border-color: oklch(0.934 0.017 44.8);
}Tailwind CSS v4
@theme {
--color-clerestory: #f4e6e0;
--color-clerestory-50: #faf4f1;
--color-clerestory-100: #ede6e3;
--color-clerestory-200: #dbd2ce;
--color-clerestory-300: #bfb5b0;
--color-clerestory-400: #a89b96;
--color-clerestory-500: #91837d;
--color-clerestory-600: #7a6f6a;
--color-clerestory-700: #625954;
--color-clerestory-800: #48413e;
--color-clerestory-900: #322c2a;
--color-clerestory-950: #1e1a18;
}SCSS
$clerestory: #f4e6e0;
$clerestory-rgb: 244, 230, 224;
$clerestory-light: mix(#fff, $clerestory, 20%);
$clerestory-dark: mix(#000, $clerestory, 20%);
.element {
color: $clerestory;
box-shadow: 0 0 0 2px rgba($clerestory, 0.35);
}