Colore con nome · #F5D8B2
Walnut Cream
Walnut Cream è #F5D8B2: rgb(245 216 178), hsl(34 77% 83%), oklch(0.897 0.059 74.4). Scopri tinte, ombre, armonie, contrasto WCAG e APCA e codice CSS, Tailwind v4 e SCSS.
What does Orange mean? → · Walnut Cream color name →
#F5D8B2
oklch(0.897 0.059 74.4)
Conversioni di colore
- HEX
- #f5d8b2
- RGB
- rgb(245 216 178)
- HSL
- hsl(34 77% 83%)
- HWB
- hwb(34 70% 4%)
- OKLCH
- oklch(0.897 0.059 74.4)
- OKLab
- oklab(0.897 0.016 0.057)
- CIE Lab
- lab(88.09 6.29 22.7)
- LCH
- lch(88.09 23.55 74.5)
- CMYK
- cmyk(0% 12% 27% 4%)
Tinte · Ombre · Toni
Tinte
- F6DCBA
- F7E0C2
- F8E4C9
- F9E8D1
- FAECD9
- FBEFE0
- FCF3E8
- FDF7F0
- FEFBF7
Ombre
- D5BC9A
- B6A083
- 98856D
- 7B6B57
- 5F5343
- 443B2F
- 2B251D
- 15110C
- 030201
Toni
- E9CFAD
- DDC6A8
- D1BDA3
- C5B49E
- B9AB99
- ADA294
- A29A8F
- 96918A
- 8B8885
Armonie di colore
Complementare +180°
- F5D8B2
Walnut Cream
- C7DFFF
≈ Arc Light
Analogo -30° +30°
- F5D8B2
Walnut Cream
- FFD2BE
≈ Vienna Sausage
- E3E0B2
≈ Schabziger Green
Triadico +120° +240°
- F5D8B2
Walnut Cream
- AFEAE9
≈ Spearmint Water
- ECD2F9
≈ Mousse aux Pruneaux
Complementare divisa +150° +210°
- F5D8B2
Walnut Cream
- B3E6FB
≈ Breaking the Ice
- D8D9FF
≈ Transparent Blue
Tetradico +90° +180° +270°
- F5D8B2
Walnut Cream
- B9EAD3
≈ Mediterranean Mist
- C7DFFF
≈ Arc Light
- FBCEE6
≈ Classic Rose
Contrasto e accessibilità
Ag
FailSu bianco
WCAG 1.36:1 · APCA Lc 18
Ag
AAASu nero
WCAG 15.34:1 · APCA Lc 86
Miglior colore del testo: #000000
WCAG 15.34:1 (AAA) · APCA Lc 86
Contrast pairs
Frammenti di codice
CSS
:root {
--walnut-cream: #f5d8b2;
--walnut-cream-rgb: 245 216 178;
--walnut-cream-oklch: oklch(0.897 0.059 74.4);
}
.element {
color: var(--walnut-cream);
background-color: hsl(34 77% 83%);
border-color: oklch(0.897 0.059 74.4);
}Tailwind CSS v4
@theme {
--color-walnut-cream: #f5d8b2;
--color-walnut-cream-50: #fff3e3;
--color-walnut-cream-100: #f4e6d2;
--color-walnut-cream-200: #e3d1b9;
--color-walnut-cream-300: #c9b496;
--color-walnut-cream-400: #b49a78;
--color-walnut-cream-500: #9e8159;
--color-walnut-cream-600: #856d4c;
--color-walnut-cream-700: #6b573c;
--color-walnut-cream-800: #4f3f2b;
--color-walnut-cream-900: #372c1d;
--color-walnut-cream-950: #22190d;
}SCSS
$walnut-cream: #f5d8b2;
$walnut-cream-rgb: 245, 216, 178;
$walnut-cream-light: mix(#fff, $walnut-cream, 20%);
$walnut-cream-dark: mix(#000, $walnut-cream, 20%);
.element {
color: $walnut-cream;
box-shadow: 0 0 0 2px rgba($walnut-cream, 0.35);
}