Benannte Farbe · #FDEA83
Citrus Punch
Citrus Punch ist #FDEA83: rgb(253 234 131), hsl(51 97% 75%), oklch(0.931 0.126 99.1). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Yellow mean? → · Citrus Punch color name →
#FDEA83
oklch(0.931 0.126 99.1)
Farbumrechnungen
- HEX
- #fdea83
- RGB
- rgb(253 234 131)
- HSL
- hsl(51 97% 75%)
- HWB
- hwb(51 51% 1%)
- OKLCH
- oklch(0.931 0.126 99.1)
- OKLab
- oklab(0.931 -0.02 0.124)
- CIE Lab
- lab(92.67 -2.99 52.03)
- LCH
- lch(92.67 52.12 93.3)
- CMYK
- cmyk(0% 8% 48% 1%)
Tints · Shades · Tones
Tints
- FDEC91
- FDEF9F
- FDF1AC
- FEF3B9
- FEF5C5
- FEF7D1
- FEF9DD
- FEFBE8
- FFFDF4
Shades
- DCCB71
- BCAE60
- 9D914F
- 7F753F
- 625A2F
- 474120
- 2D2912
- 161306
- 030301
Tones
- F0DF84
- E3D485
- D6C986
- C9BF86
- BCB486
- B0AA85
- A49F84
- 989583
- 8C8A82
Farbharmonien
Komplementär +180°
- FDEA83
Citrus Punch
- E3E7FF
≈ Cyber Lavender
Analog -30° +30°
- FDEA83
Citrus Punch
- FFE3C5
≈ Fall Straw
- CEF99E
≈ Menthol
Triadisch +120° +240°
- FDEA83
Citrus Punch
- C5F1FF
≈ Heaven’s Gate
- FFDDF3
≈ Silky Pink
Geteilt komplementär +150° +210°
- FDEA83
Citrus Punch
- D7EBFF
≈ Cloudless
- F1E1FF
≈ Lavender Savour
Tetradisch +90° +180° +270°
- FDEA83
Citrus Punch
- 90FFF6
≈ Hello Winter
- E3E7FF
≈ Cyber Lavender
- FFDFE3
≈ Sweet Mallow
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 1.21:1 · APCA Lc 11
Ag
AAAAuf Schwarz
WCAG 17.27:1 · APCA Lc 94
Beste Textfarbe: #000000
WCAG 17.27:1 (AAA) · APCA Lc 94
Contrast pairs
Code-Snippets
CSS
:root {
--citrus-punch: #fdea83;
--citrus-punch-rgb: 253 234 131;
--citrus-punch-oklch: oklch(0.931 0.126 99.1);
}
.element {
color: var(--citrus-punch);
background-color: hsl(51 97% 75%);
border-color: oklch(0.931 0.126 99.1);
}Tailwind CSS v4
@theme {
--color-citrus-punch: #fdea83;
--color-citrus-punch-50: #fcf7ce;
--color-citrus-punch-100: #f0eaba;
--color-citrus-punch-200: #dfd798;
--color-citrus-punch-300: #c5ba6b;
--color-citrus-punch-400: #b19f3d;
--color-citrus-punch-500: #9b8600;
--color-citrus-punch-600: #837200;
--color-citrus-punch-700: #695b00;
--color-citrus-punch-800: #4f4200;
--color-citrus-punch-900: #372d00;
--color-citrus-punch-950: #221a00;
}SCSS
$citrus-punch: #fdea83;
$citrus-punch-rgb: 253, 234, 131;
$citrus-punch-light: mix(#fff, $citrus-punch, 20%);
$citrus-punch-dark: mix(#000, $citrus-punch, 20%);
.element {
color: $citrus-punch;
box-shadow: 0 0 0 2px rgba($citrus-punch, 0.35);
}