Cor nomeada · #F4E6CE
Animal Cracker
Animal Cracker é #F4E6CE: rgb(244 230 206), hsl(38 63% 88%), oklch(0.93 0.035 81.3). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Orange mean? → · Animal Cracker color name →
#F4E6CE
oklch(0.93 0.035 81.3)
Conversões de cor
- HEX
- #f4e6ce
- RGB
- rgb(244 230 206)
- HSL
- hsl(38 63% 88%)
- HWB
- hwb(38 81% 4%)
- OKLCH
- oklch(0.93 0.035 81.3)
- OKLab
- oklab(0.93 0.005 0.035)
- CIE Lab
- lab(91.95 2.06 13.54)
- LCH
- lch(91.95 13.7 81.3)
- CMYK
- cmyk(0% 6% 16% 4%)
Tons claros · Sombras · Tons
Tons claros
- F5E9D3
- F6EBD8
- F7EEDD
- F8F0E2
- FAF3E6
- FBF5EB
- FCF8F0
- FDFAF5
- FEFDFA
Sombras
- D4C8B3
- B5AB98
- 978E7F
- 7A7366
- 5E594E
- 444038
- 2B2823
- 14130F
- 030302
Tons
- E8DBC6
- DCD1BE
- D0C6B6
- C4BCAE
- B8B2A6
- ADA89F
- A19D97
- 96948F
- 8B8A88
Harmonias de cor
Complementar +180°
- F4E6CE
Animal Cracker
- DCE9FF
≈ Cloudless
Análoga -30° +30°
- F4E6CE
Animal Cracker
- FCE2D3
≈ Ephemeral Peach
- E8EBD0
≈ Celery Ice
Tríade +120° +240°
- F4E6CE
Animal Cracker
- CEEFF2
≈ Diamond League
- F3E1F6
≈ Minute Mauve
Complementar dividida +150° +210°
- F4E6CE
Animal Cracker
- D1EDFC
≈ Blue Hijab
- E7E4FE
≈ Lavender Mist
Tétrade +90° +180° +270°
- F4E6CE
Animal Cracker
- D1F0E5
≈ Shimmering Pool
- DCE9FF
≈ Cloudless
- FCDFEA
≈ Watermelon Mousse
Contraste e acessibilidade
Ag
FailSobre branco
WCAG 1.23:1 · APCA Lc 11
Ag
AAASobre preto
WCAG 17.05:1 · APCA Lc 93
Melhor cor de texto: #000000
WCAG 17.05:1 (AAA) · APCA Lc 93
Contrast pairs
Trechos de código
CSS
:root {
--animal-cracker: #f4e6ce;
--animal-cracker-rgb: 244 230 206;
--animal-cracker-oklch: oklch(0.93 0.035 81.3);
}
.element {
color: var(--animal-cracker);
background-color: hsl(38 63% 88%);
border-color: oklch(0.93 0.035 81.3);
}Tailwind CSS v4
@theme {
--color-animal-cracker: #f4e6ce;
--color-animal-cracker-50: #faf4ea;
--color-animal-cracker-100: #eee7db;
--color-animal-cracker-200: #dcd3c4;
--color-animal-cracker-300: #c0b6a4;
--color-animal-cracker-400: #a99d87;
--color-animal-cracker-500: #92846c;
--color-animal-cracker-600: #7c705c;
--color-animal-cracker-700: #635949;
--color-animal-cracker-800: #494135;
--color-animal-cracker-900: #332d24;
--color-animal-cracker-950: #1e1a13;
}SCSS
$animal-cracker: #f4e6ce;
$animal-cracker-rgb: 244, 230, 206;
$animal-cracker-light: mix(#fff, $animal-cracker, 20%);
$animal-cracker-dark: mix(#000, $animal-cracker, 20%);
.element {
color: $animal-cracker;
box-shadow: 0 0 0 2px rgba($animal-cracker, 0.35);
}