Color con nombre · #E4E1DE
Spilled Cappuccino
Spilled Cappuccino es #E4E1DE: rgb(228 225 222), hsl(30 10% 88%), oklch(0.911 0.005 67.8). Mira tintes, sombras, armonías, contraste WCAG y APCA, y código CSS, Tailwind v4 y SCSS.
What does Gray mean? → · Spilled Cappuccino color name →
#E4E1DE
oklch(0.911 0.005 67.8)
Conversiones de color
- HEX
- #e4e1de
- RGB
- rgb(228 225 222)
- HSL
- hsl(30 10% 88%)
- HWB
- hwb(30 87% 11%)
- OKLCH
- oklch(0.911 0.005 67.8)
- OKLab
- oklab(0.911 0.002 0.005)
- CIE Lab
- lab(89.7 0.66 1.85)
- LCH
- lch(89.7 1.96 70.4)
- CMYK
- cmyk(0% 1% 3% 11%)
Tintes · Sombras · Tonos
Tintes
- E7E4E1
- E9E7E5
- ECEAE8
- EFEDEB
- F1F0EE
- F4F3F2
- F7F6F5
- FAF9F8
- FCFCFC
Sombras
- C6C4C1
- A9A7A5
- 8D8B89
- 72706F
- 585655
- 3F3E3D
- 282726
- 121212
- 030202
Tonos
- DAD7D4
- CFCDCA
- C5C3C1
- BBB9B7
- B1AFAE
- A7A6A4
- 9D9C9B
- 939392
- 8A8989
Armonías de color
Complementario +180°
- E4E1DE
Spilled Cappuccino
- DFE2E5
≈ January Dawn
Análogo -30° +30°
- E4E1DE
Spilled Cappuccino
- E5E0DF
≈ Mountain Air
- E2E2DE
≈ Beryl Pearl
Triádico +120° +240°
- E4E1DE
Spilled Cappuccino
- DEE3E2
≈ Zircon
- E2E1E4
≈ Orchid Blossom
Complementario dividido +150° +210°
- E4E1DE
Spilled Cappuccino
- DEE2E4
≈ Aura White
- E1E1E5
≈ Lilac Champagne
Tetrádico +90° +180° +270°
- E4E1DE
Spilled Cappuccino
- DFE3E0
≈ Illuminating Experience
- DFE2E5
≈ January Dawn
- E4E0E3
≈ Orchid Blossom
Contraste y accesibilidad
Ag
FailSobre blanco
WCAG 1.30:1 · APCA Lc 15
Ag
AAASobre negro
WCAG 16.12:1 · APCA Lc 89
Mejor color de texto: #000000
WCAG 16.12:1 (AAA) · APCA Lc 89
Contrast pairs
Fragmentos de código
CSS
:root {
--spilled-cappuccino: #e4e1de;
--spilled-cappuccino-rgb: 228 225 222;
--spilled-cappuccino-oklch: oklch(0.911 0.005 67.8);
}
.element {
color: var(--spilled-cappuccino);
background-color: hsl(30 10% 88%);
border-color: oklch(0.911 0.005 67.8);
}Tailwind CSS v4
@theme {
--color-spilled-cappuccino: #e4e1de;
--color-spilled-cappuccino-50: #f6f5f3;
--color-spilled-cappuccino-100: #e9e7e6;
--color-spilled-cappuccino-200: #d6d4d2;
--color-spilled-cappuccino-300: #b9b7b4;
--color-spilled-cappuccino-400: #a09e9b;
--color-spilled-cappuccino-500: #888582;
--color-spilled-cappuccino-600: #73716e;
--color-spilled-cappuccino-700: #5c5a58;
--color-spilled-cappuccino-800: #444240;
--color-spilled-cappuccino-900: #2f2e2c;
--color-spilled-cappuccino-950: #1b1a19;
}SCSS
$spilled-cappuccino: #e4e1de;
$spilled-cappuccino-rgb: 228, 225, 222;
$spilled-cappuccino-light: mix(#fff, $spilled-cappuccino, 20%);
$spilled-cappuccino-dark: mix(#000, $spilled-cappuccino, 20%);
.element {
color: $spilled-cappuccino;
box-shadow: 0 0 0 2px rgba($spilled-cappuccino, 0.35);
}