Benannte Farbe · #EFCEA0
Crumble Topping
Crumble Topping ist #EFCEA0: rgb(239 206 160), hsl(35 71% 78%), oklch(0.868 0.071 75.8). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Orange mean? → · Crumble Topping color name →
#EFCEA0
oklch(0.868 0.071 75.8)
Farbumrechnungen
- HEX
- #efcea0
- RGB
- rgb(239 206 160)
- HSL
- hsl(35 71% 78%)
- HWB
- hwb(35 63% 6%)
- OKLCH
- oklch(0.868 0.071 75.8)
- OKLab
- oklab(0.868 0.017 0.068)
- CIE Lab
- lab(84.78 7.21 27.46)
- LCH
- lch(84.78 28.39 75.3)
- CMYK
- cmyk(0% 14% 33% 6%)
Tints · Shades · Tones
Tints
- F1D3AA
- F2D8B3
- F4DDBD
- F6E2C6
- F7E7D0
- F9EBD9
- FAF0E3
- FCF5EC
- FEFAF6
Shades
- D0B38B
- B19876
- 947F61
- 78664E
- 5C4E3B
- 423829
- 2A2319
- 140F09
- 030201
Tones
- E3C69D
- D8BE9A
- CDB697
- C1AE94
- B6A691
- AB9F8E
- A0978A
- 958F87
- 8B8883
Farbharmonien
Komplementär +180°
- EFCEA0
Crumble Topping
- B8D6FF
≈ Ice Cold Stare
Analog -30° +30°
- EFCEA0
Crumble Topping
- FCC6AD
≈ Antique Coral
- D9D7A1
≈ Garden Glade
Triadisch +120° +240°
- EFCEA0
Crumble Topping
- 9CE3E3
≈ Everest
- E6C6F4
≈ Purple’s Baby Sister
Geteilt komplementär +150° +210°
- EFCEA0
Crumble Topping
- A2DEF7
≈ Van Gogh Blue
- CFCEFF
≈ Lavender Blue
Tetradisch +90° +180° +270°
- EFCEA0
Crumble Topping
- A8E3C9
≈ Fabulous Find
- B8D6FF
≈ Ice Cold Stare
- F7C2DE
≈ Miami Pink
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 1.49:1 · APCA Lc 23
Ag
AAAAuf Schwarz
WCAG 14.00:1 · APCA Lc 80
Beste Textfarbe: #000000
WCAG 14.00:1 (AAA) · APCA Lc 80
Contrast pairs
Code-Snippets
CSS
:root {
--crumble-topping: #efcea0;
--crumble-topping-rgb: 239 206 160;
--crumble-topping-oklch: oklch(0.868 0.071 75.8);
}
.element {
color: var(--crumble-topping);
background-color: hsl(35 71% 78%);
border-color: oklch(0.868 0.071 75.8);
}Tailwind CSS v4
@theme {
--color-crumble-topping: #efcea0;
--color-crumble-topping-50: #fff3df;
--color-crumble-topping-100: #f5e6ce;
--color-crumble-topping-200: #e5d1b3;
--color-crumble-topping-300: #ccb38f;
--color-crumble-topping-400: #b7996f;
--color-crumble-topping-500: #a1804f;
--color-crumble-topping-600: #886c44;
--color-crumble-topping-700: #6d5636;
--color-crumble-topping-800: #513f26;
--color-crumble-topping-900: #392b19;
--color-crumble-topping-950: #23180a;
}SCSS
$crumble-topping: #efcea0;
$crumble-topping-rgb: 239, 206, 160;
$crumble-topping-light: mix(#fff, $crumble-topping, 20%);
$crumble-topping-dark: mix(#000, $crumble-topping, 20%);
.element {
color: $crumble-topping;
box-shadow: 0 0 0 2px rgba($crumble-topping, 0.35);
}