Benannte Farbe · #FFF4C4
Butterball
Butterball ist #FFF4C4: rgb(255 244 196), hsl(49 100% 88%), oklch(0.964 0.063 96.6). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Yellow mean? → · Butterball color name →
#FFF4C4
oklch(0.964 0.063 96.6)
Farbumrechnungen
- HEX
- #fff4c4
- RGB
- rgb(255 244 196)
- HSL
- hsl(49 100% 88%)
- HWB
- hwb(49 77% 0%)
- OKLCH
- oklch(0.964 0.063 96.6)
- OKLab
- oklab(0.964 -0.007 0.062)
- CIE Lab
- lab(96.18 -1.62 24.63)
- LCH
- lch(96.18 24.69 93.8)
- CMYK
- cmyk(0% 4% 23% 0%)
Tints · Shades · Tones
Tints
- FFF5CA
- FFF6D0
- FFF7D6
- FFF9DC
- FFFAE2
- FFFBE8
- FFFCEE
- FFFDF3
- FFFEF9
Shades
- DED4AA
- BEB591
- 9E9778
- 807A61
- 635E4A
- 484435
- 2E2B21
- 16140E
- 030302
Tones
- F2E8BD
- E4DCB6
- D7D0B0
- CAC4A9
- BDB8A2
- B1AD9B
- A4A194
- 98968E
- 8C8B87
Farbharmonien
Komplementär +180°
- FFF4C4
Butterball
- F0F2FF
≈ Cloud Break
Analog -30° +30°
- FFF4C4
Butterball
- FFF0E2
≈ Sugar Glaze
- E8FCCE
≈ Snowdrop
Triadisch +120° +240°
- FFF4C4
Butterball
- E0F8FF
≈ Glacial Day
- FFEDFA
≈ Partial Pink
Geteilt komplementär +150° +210°
- FFF4C4
Butterball
- EAF5FF
≈ Placebo Blue
- F7F0FF
≈ Cloud Break
Tetradisch +90° +180° +270°
- FFF4C4
Butterball
- CDFFF9
≈ Luminescent Sky
- F0F2FF
≈ Cloud Break
- FFEEF1
≈ Sugar Coated
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 1.10:1 · APCA Lc 0
Ag
AAAAuf Schwarz
WCAG 18.98:1 · APCA Lc 100
Beste Textfarbe: #000000
WCAG 18.98:1 (AAA) · APCA Lc 100
Contrast pairs
Code-Snippets
CSS
:root {
--butterball: #fff4c4;
--butterball-rgb: 255 244 196;
--butterball-oklch: oklch(0.964 0.063 96.6);
}
.element {
color: var(--butterball);
background-color: hsl(49 100% 88%);
border-color: oklch(0.964 0.063 96.6);
}Tailwind CSS v4
@theme {
--color-butterball: #fff4c4;
--color-butterball-50: #f9f6e2;
--color-butterball-100: #ede9d1;
--color-butterball-200: #dbd5b7;
--color-butterball-300: #bfb894;
--color-butterball-400: #a99f74;
--color-butterball-500: #928655;
--color-butterball-600: #7b7249;
--color-butterball-700: #635b3a;
--color-butterball-800: #494229;
--color-butterball-900: #332e1b;
--color-butterball-950: #1e1a0c;
}SCSS
$butterball: #fff4c4;
$butterball-rgb: 255, 244, 196;
$butterball-light: mix(#fff, $butterball, 20%);
$butterball-dark: mix(#000, $butterball, 20%);
.element {
color: $butterball;
box-shadow: 0 0 0 2px rgba($butterball, 0.35);
}