Benannte Farbe · #F4D9C5
Sour Patch Peach
Sour Patch Peach ist #F4D9C5: rgb(244 217 197), hsl(26 68% 86%), oklch(0.902 0.04 58.8). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Orange mean? → · Sour Patch Peach color name →
#F4D9C5
oklch(0.902 0.04 58.8)
Farbumrechnungen
- HEX
- #f4d9c5
- RGB
- rgb(244 217 197)
- HSL
- hsl(26 68% 86%)
- HWB
- hwb(26 77% 4%)
- OKLCH
- oklch(0.902 0.04 58.8)
- OKLab
- oklab(0.902 0.021 0.034)
- CIE Lab
- lab(88.57 7.37 13.49)
- LCH
- lch(88.57 15.37 61.3)
- CMYK
- cmyk(0% 11% 19% 4%)
Tints · Shades · Tones
Tints
- F5DDCB
- F6E1D1
- F8E4D6
- F9E8DC
- FAECE2
- FBF0E8
- FCF4EE
- FDF7F3
- FEFBF9
Shades
- D4BCAB
- B5A192
- 978679
- 7A6C61
- 5E534B
- 443B35
- 2B2521
- 14110E
- 030202
Tones
- E8D0BE
- DCC7B7
- D0BDB0
- C4B4A9
- B8ACA2
- ADA39B
- A19A94
- 96918D
- 8B8987
Farbharmonien
Komplementär +180°
- F4D9C5
Sour Patch Peach
- C7E3F7
≈ Fresh Water
Analog -30° +30°
- F4D9C5
Sour Patch Peach
- F9D5D0
≈ Cosmos
- EADEC1
≈ Shell Haven
Triadisch +120° +240°
- F4D9C5
Sour Patch Peach
- C3E8DF
≈ Clear Aqua
- E2D9F7
≈ Nostalgia Perfume
Geteilt komplementär +150° +210°
- F4D9C5
Sour Patch Peach
- C1E7ED
≈ Ice Flower
- D4DEFB
≈ Nostalgia Perfume
Tetradisch +90° +180° +270°
- F4D9C5
Sour Patch Peach
- CDE7D0
≈ Butter Lettuce
- C7E3F7
≈ Fresh Water
- EFD6EC
≈ Infatuation
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 1.34:1 · APCA Lc 17
Ag
AAAAuf Schwarz
WCAG 15.57:1 · APCA Lc 87
Beste Textfarbe: #000000
WCAG 15.57:1 (AAA) · APCA Lc 87
Contrast pairs
Code-Snippets
CSS
:root {
--sour-patch-peach: #f4d9c5;
--sour-patch-peach-rgb: 244 217 197;
--sour-patch-peach-oklch: oklch(0.902 0.04 58.8);
}
.element {
color: var(--sour-patch-peach);
background-color: hsl(26 68% 86%);
border-color: oklch(0.902 0.04 58.8);
}Tailwind CSS v4
@theme {
--color-sour-patch-peach: #f4d9c5;
--color-sour-patch-peach-50: #fef3ea;
--color-sour-patch-peach-100: #f2e5db;
--color-sour-patch-peach-200: #e2d1c3;
--color-sour-patch-peach-300: #c7b3a3;
--color-sour-patch-peach-400: #b19987;
--color-sour-patch-peach-500: #9b806c;
--color-sour-patch-peach-600: #836d5c;
--color-sour-patch-peach-700: #695749;
--color-sour-patch-peach-800: #4e3f35;
--color-sour-patch-peach-900: #362b24;
--color-sour-patch-peach-950: #211913;
}SCSS
$sour-patch-peach: #f4d9c5;
$sour-patch-peach-rgb: 244, 217, 197;
$sour-patch-peach-light: mix(#fff, $sour-patch-peach, 20%);
$sour-patch-peach-dark: mix(#000, $sour-patch-peach, 20%);
.element {
color: $sour-patch-peach;
box-shadow: 0 0 0 2px rgba($sour-patch-peach, 0.35);
}