Named color · #FFD96D
Golden Butter
Golden Butter is #FFD96D: rgb(255 217 109), hsl(44 100% 71%), oklch(0.897 0.133 90.2). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Yellow mean? → · Golden Butter color name →
#FFD96D
oklch(0.897 0.133 90.2)
Color conversions
- HEX
- #ffd96d
- RGB
- rgb(255 217 109)
- HSL
- hsl(44 100% 71%)
- HWB
- hwb(44 43% 0%)
- OKLCH
- oklch(0.897 0.133 90.2)
- OKLab
- oklab(0.897 0 0.133)
- CIE Lab
- lab(88.41 4.65 57.32)
- LCH
- lch(88.41 57.51 85.4)
- CMYK
- cmyk(0% 15% 57% 0%)
Tints · Shades · Tones
Tints
- FFDD7F
- FFE18F
- FFE59E
- FFE9AD
- FFEDBB
- FFF1C9
- FFF4D7
- FFF8E4
- FFFCF2
Shades
- DEBC5E
- BEA14F
- 9E8641
- 806C33
- 635326
- 483B19
- 2E250D
- 161104
- 030201
Tones
- F2D072
- E4C775
- D7BE78
- CAB57B
- BEAC7D
- B1A37E
- A49A7F
- 989280
- 8C8980
Color harmonies
Complementary +180°
- FFD96D
Golden Butter
- D0DCFF
≈ Arc Light
Analogous -30° +30°
- FFD96D
Golden Butter
- FFD3B1
≈ Papaya Whip
- D1EA82
≈ Sulu
Triadic +120° +240°
- FFD96D
Golden Butter
- 90EEFF
≈ Photon Projector
- FFC8F9
≈ Sugar Chic
Split-complementary +150° +210°
- FFD96D
Golden Butter
- BCE3FF
≈ Dithered Sky
- E3D5FF
≈ Pale Lavender
Tetradic +90° +180° +270°
- FFD96D
Golden Butter
- 62FAE0
≈ Spindrift
- D0DCFF
≈ Arc Light
- FFCEDB
≈ Bologna Sausage
Contrast & accessibility
Ag
FailOn white
WCAG 1.36:1 · APCA Lc 18
Ag
AAAOn black
WCAG 15.39:1 · APCA Lc 86
Best text color: #000000
WCAG 15.39:1 (AAA) · APCA Lc 86
Contrast pairs
Code snippets
CSS
:root {
--golden-butter: #ffd96d;
--golden-butter-rgb: 255 217 109;
--golden-butter-oklch: oklch(0.897 0.133 90.2);
}
.element {
color: var(--golden-butter);
background-color: hsl(44 100% 71%);
border-color: oklch(0.897 0.133 90.2);
}Tailwind CSS v4
@theme {
--color-golden-butter: #ffd96d;
--color-golden-butter-50: #fff5ca;
--color-golden-butter-100: #f8e7b6;
--color-golden-butter-200: #e8d392;
--color-golden-butter-300: #d0b563;
--color-golden-butter-400: #bd9a2f;
--color-golden-butter-500: #a88000;
--color-golden-butter-600: #8e6d00;
--color-golden-butter-700: #725700;
--color-golden-butter-800: #553f00;
--color-golden-butter-900: #3c2b00;
--color-golden-butter-950: #251800;
}SCSS
$golden-butter: #ffd96d;
$golden-butter-rgb: 255, 217, 109;
$golden-butter-light: mix(#fff, $golden-butter, 20%);
$golden-butter-dark: mix(#000, $golden-butter, 20%);
.element {
color: $golden-butter;
box-shadow: 0 0 0 2px rgba($golden-butter, 0.35);
}