Colore con nome · #F4B58F
Caramel Cream
Caramel Cream è #F4B58F: rgb(244 181 143), hsl(23 82% 76%), oklch(0.822 0.089 52.2). Scopri tinte, ombre, armonie, contrasto WCAG e APCA e codice CSS, Tailwind v4 e SCSS.
What does Orange mean? → · Caramel Cream color name →
#F4B58F
oklch(0.822 0.089 52.2)
Conversioni di colore
- HEX
- #f4b58f
- RGB
- rgb(244 181 143)
- HSL
- hsl(23 82% 76%)
- HWB
- hwb(23 56% 4%)
- OKLCH
- oklch(0.822 0.089 52.2)
- OKLab
- oklab(0.822 0.055 0.071)
- CIE Lab
- lab(78.99 20.17 28.81)
- LCH
- lch(78.99 35.17 55)
- CMYK
- cmyk(0% 26% 41% 4%)
Tinte · Ombre · Toni
Tinte
- F6BC9A
- F7C4A6
- F9CBB1
- FAD3BC
- FBDAC7
- FCE2D2
- FDE9DD
- FEF0E9
- FEF8F4
Ombre
- D49D7C
- B58669
- 976F57
- 7A5945
- 5E4434
- 443024
- 2B1D15
- 140C07
- 030201
Toni
- E8B08E
- DCAA8D
- D1A58B
- C5A08A
- B99B89
- AE9587
- A29085
- 978B84
- 8B8582
Armonie di colore
Complementare +180°
- F4B58F
Caramel Cream
- 88D0F5
≈ Pool Tiles
Analogo -30° +30°
- F4B58F
Caramel Cream
- FAAEAB
≈ Snow White Blush
- E2C081
≈ Chalky
Triadico +120° +240°
- F4B58F
Caramel Cream
- 85D8BE
≈ Cabbage
- C6BBFB
≈ Lavender Tonic
Complementare divisa +150° +210°
- F4B58F
Caramel Cream
- 79D6DE
≈ Aquamarine Blue
- A6C6FF
≈ Night Snow
Tetradico +90° +180° +270°
- F4B58F
Caramel Cream
- A4D49F
≈ Pistachio Green
- 88D0F5
≈ Pool Tiles
- E1B2E8
≈ Candy Dreams
Contrasto e accessibilità
Ag
FailSu bianco
WCAG 1.77:1 · APCA Lc 32
Ag
AAASu nero
WCAG 11.85:1 · APCA Lc 70
Miglior colore del testo: #000000
WCAG 11.85:1 (AAA) · APCA Lc 70
Contrast pairs
Frammenti di codice
CSS
:root {
--caramel-cream: #f4b58f;
--caramel-cream-rgb: 244 181 143;
--caramel-cream-oklch: oklch(0.822 0.089 52.2);
}
.element {
color: var(--caramel-cream);
background-color: hsl(23 82% 76%);
border-color: oklch(0.822 0.089 52.2);
}Tailwind CSS v4
@theme {
--color-caramel-cream: #f4b58f;
--color-caramel-cream-50: #ffefde;
--color-caramel-cream-100: #ffe1cc;
--color-caramel-cream-200: #f4cbb1;
--color-caramel-cream-300: #dcac8c;
--color-caramel-cream-400: #c9906d;
--color-caramel-cream-500: #b5754c;
--color-caramel-cream-600: #996341;
--color-caramel-cream-700: #7b4f34;
--color-caramel-cream-800: #5b3925;
--color-caramel-cream-900: #402719;
--color-caramel-cream-950: #291509;
}SCSS
$caramel-cream: #f4b58f;
$caramel-cream-rgb: 244, 181, 143;
$caramel-cream-light: mix(#fff, $caramel-cream, 20%);
$caramel-cream-dark: mix(#000, $caramel-cream, 20%);
.element {
color: $caramel-cream;
box-shadow: 0 0 0 2px rgba($caramel-cream, 0.35);
}