Nazwany kolor · #F9D09F
Ginger Peach
Ginger Peach to #F9D09F: rgb(249 208 159), hsl(33 88% 80%), oklch(0.881 0.079 71.5). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Orange mean? → · Ginger Peach color name →
#F9D09F
oklch(0.881 0.079 71.5)
Konwersje koloru
- HEX
- #f9d09f
- RGB
- rgb(249 208 159)
- HSL
- hsl(33 88% 80%)
- HWB
- hwb(33 62% 2%)
- OKLCH
- oklch(0.881 0.079 71.5)
- OKLab
- oklab(0.881 0.025 0.074)
- CIE Lab
- lab(86.2 10.03 30.06)
- LCH
- lch(86.2 31.69 71.5)
- CMYK
- cmyk(0% 16% 36% 2%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- FAD5A9
- FBDAB3
- FBDEBC
- FCE3C6
- FDE8D0
- FDECD9
- FEF1E3
- FEF6EC
- FFFAF6
Odcienie ciemniejsze
- D9B58A
- B99A75
- 9A8061
- 7D674D
- 614F3B
- 463929
- 2C2318
- 151009
- 030201
Tony
- ECC89C
- E0C099
- D3B897
- C7AF94
- BBA791
- AF9F8D
- A3988A
- 979087
- 8C8883
Harmonie kolorów
Komplementarna +180°
- F9D09F
Ginger Peach
- BCDBFF
≈ Broad Daylight
Analogowa -30° +30°
- F9D09F
Ginger Peach
- FFCAB7
≈ Dolly Cheek
- E2DA9E
≈ Crystal Yellow
Triada +120° +240°
- F9D09F
Ginger Peach
- 99E9E5
≈ Freezy Breezy
- E9CAFE
≈ Lens Flare Pink
Komplementarna rozszczepiona +150° +210°
- F9D09F
Ginger Peach
- 9DE4FD
≈ Winter Wizard
- D1D4FF
≈ Pale Phthalo Blue
Tetrada +90° +180° +270°
- F9D09F
Ginger Peach
- A9E9C8
≈ Tropical
- BCDBFF
≈ Broad Daylight
- FDC4E7
≈ Sugarwinkle
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.44:1 · APCA Lc 21
Ag
AAANa czerni
WCAG 14.55:1 · APCA Lc 82
Najlepszy kolor tekstu: #000000
WCAG 14.55:1 (AAA) · APCA Lc 82
Contrast pairs
Fragmenty kodu
CSS
:root {
--ginger-peach: #f9d09f;
--ginger-peach-rgb: 249 208 159;
--ginger-peach-oklch: oklch(0.881 0.079 71.5);
}
.element {
color: var(--ginger-peach);
background-color: hsl(33 88% 80%);
border-color: oklch(0.881 0.079 71.5);
}Tailwind CSS v4
@theme {
--color-ginger-peach: #f9d09f;
--color-ginger-peach-50: #fff2dd;
--color-ginger-peach-100: #f8e5cc;
--color-ginger-peach-200: #e9d0b0;
--color-ginger-peach-300: #d0b28b;
--color-ginger-peach-400: #bc976a;
--color-ginger-peach-500: #a77d49;
--color-ginger-peach-600: #8d6a3f;
--color-ginger-peach-700: #715532;
--color-ginger-peach-800: #543d23;
--color-ginger-peach-900: #3b2a17;
--color-ginger-peach-950: #251808;
}SCSS
$ginger-peach: #f9d09f;
$ginger-peach-rgb: 249, 208, 159;
$ginger-peach-light: mix(#fff, $ginger-peach, 20%);
$ginger-peach-dark: mix(#000, $ginger-peach, 20%);
.element {
color: $ginger-peach;
box-shadow: 0 0 0 2px rgba($ginger-peach, 0.35);
}