Color con nombre · #E3CEC6
Ginger Shortbread
Ginger Shortbread es #E3CEC6: rgb(227 206 198), hsl(17 34% 83%), oklch(0.867 0.026 42.1). Mira tintes, sombras, armonías, contraste WCAG y APCA, y código CSS, Tailwind v4 y SCSS.
What does Gray mean? → · Ginger Shortbread color name →
#E3CEC6
oklch(0.867 0.026 42.1)
Conversiones de color
- HEX
- #e3cec6
- RGB
- rgb(227 206 198)
- HSL
- hsl(17 34% 83%)
- HWB
- hwb(17 78% 11%)
- OKLCH
- oklch(0.867 0.026 42.1)
- OKLab
- oklab(0.867 0.019 0.017)
- CIE Lab
- lab(84.36 6.59 6.79)
- LCH
- lch(84.36 9.47 45.8)
- CMYK
- cmyk(0% 9% 13% 11%)
Tintes · Sombras · Tonos
Tintes
- E6D3CC
- E9D8D1
- EBDDD7
- EEE1DD
- F1E6E2
- F4EBE8
- F7F0EE
- F9F5F3
- FCFAF9
Sombras
- C5B3AC
- A89892
- 8C7F7A
- 716662
- 574E4B
- 3F3835
- 272321
- 120F0E
- 030202
Tonos
- D9C6BF
- CEBEB8
- C4B6B0
- BAAEA9
- B0A6A2
- A69E9B
- 9D9794
- 938F8E
- 898887
Armonías de color
Complementario +180°
- E3CEC6
Ginger Shortbread
- C2D7E0
≈ Skinny Dippin’
Análogo -30° +30°
- E3CEC6
Ginger Shortbread
- E4CDCE
≈ Mauve Morn
- DED1C1
≈ Shetland Lace
Triádico +120° +240°
- E3CEC6
Ginger Shortbread
- C5D9CE
≈ Breaktime
- D0D1E4
≈ Bashful Lilac
Complementario dividido +150° +210°
- E3CEC6
Ginger Shortbread
- C1D9D7
≈ Haint Blue
- C7D5E4
≈ Defenestration
Tetrádico +90° +180° +270°
- E3CEC6
Ginger Shortbread
- CDD7C6
≈ Spring Valley
- C2D7E0
≈ Skinny Dippin’
- D9CFE0
≈ Dusty Plum
Contraste y accesibilidad
Ag
FailSobre blanco
WCAG 1.50:1 · APCA Lc 24
Ag
AAASobre negro
WCAG 13.91:1 · APCA Lc 79
Mejor color de texto: #000000
WCAG 13.91:1 (AAA) · APCA Lc 79
Contrast pairs
Fragmentos de código
CSS
:root {
--ginger-shortbread: #e3cec6;
--ginger-shortbread-rgb: 227 206 198;
--ginger-shortbread-oklch: oklch(0.867 0.026 42.1);
}
.element {
color: var(--ginger-shortbread);
background-color: hsl(17 34% 83%);
border-color: oklch(0.867 0.026 42.1);
}Tailwind CSS v4
@theme {
--color-ginger-shortbread: #e3cec6;
--color-ginger-shortbread-50: #fcf3ef;
--color-ginger-shortbread-100: #f0e5e1;
--color-ginger-shortbread-200: #ded1cb;
--color-ginger-shortbread-300: #c4b4ad;
--color-ginger-shortbread-400: #ad9a93;
--color-ginger-shortbread-500: #968179;
--color-ginger-shortbread-600: #7f6d66;
--color-ginger-shortbread-700: #665752;
--color-ginger-shortbread-800: #4b403c;
--color-ginger-shortbread-900: #342c29;
--color-ginger-shortbread-950: #1f1917;
}SCSS
$ginger-shortbread: #e3cec6;
$ginger-shortbread-rgb: 227, 206, 198;
$ginger-shortbread-light: mix(#fff, $ginger-shortbread, 20%);
$ginger-shortbread-dark: mix(#000, $ginger-shortbread, 20%);
.element {
color: $ginger-shortbread;
box-shadow: 0 0 0 2px rgba($ginger-shortbread, 0.35);
}