Benannte Farbe · #F4B58F
Caramel Cream
Caramel Cream ist #F4B58F: rgb(244 181 143), hsl(23 82% 76%), oklch(0.822 0.089 52.2). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Orange mean? → · Caramel Cream color name →
#F4B58F
oklch(0.822 0.089 52.2)
Farbumrechnungen
- 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%)
Tints · Shades · Tones
Tints
- F6BC9A
- F7C4A6
- F9CBB1
- FAD3BC
- FBDAC7
- FCE2D2
- FDE9DD
- FEF0E9
- FEF8F4
Shades
- D49D7C
- B58669
- 976F57
- 7A5945
- 5E4434
- 443024
- 2B1D15
- 140C07
- 030201
Tones
- E8B08E
- DCAA8D
- D1A58B
- C5A08A
- B99B89
- AE9587
- A29085
- 978B84
- 8B8582
Farbharmonien
Komplementär +180°
- F4B58F
Caramel Cream
- 88D0F5
≈ Pool Tiles
Analog -30° +30°
- F4B58F
Caramel Cream
- FAAEAB
≈ Snow White Blush
- E2C081
≈ Chalky
Triadisch +120° +240°
- F4B58F
Caramel Cream
- 85D8BE
≈ Cabbage
- C6BBFB
≈ Lavender Tonic
Geteilt komplementär +150° +210°
- F4B58F
Caramel Cream
- 79D6DE
≈ Aquamarine Blue
- A6C6FF
≈ Night Snow
Tetradisch +90° +180° +270°
- F4B58F
Caramel Cream
- A4D49F
≈ Pistachio Green
- 88D0F5
≈ Pool Tiles
- E1B2E8
≈ Candy Dreams
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 1.77:1 · APCA Lc 32
Ag
AAAAuf Schwarz
WCAG 11.85:1 · APCA Lc 70
Beste Textfarbe: #000000
WCAG 11.85:1 (AAA) · APCA Lc 70
Contrast pairs
Code-Snippets
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);
}