Pikka Logo Pikka
Chrome App
Soft Gentle Morning Sunshine Pastel Category: Yellow

Butter Yellow (#FFFD96) — Color Codes, Meaning & UI Palettes

Butter Yellow (#FFFD96) is a delicate, warm cream-yellow reminiscent of fresh churned sweet cream butter. It expresses gentle morning light, quiet optimism, culinary joy, and comforting nostalgia.

Quick Answer (Butter Yellow Color Code): The exact HEX code for Butter Yellow is #FFFD96. In RGB, it is rgb(255, 253, 150). In HSL, it is hsl(59deg, 100%, 79%), and its print CMYK formulation is cmyk(0%, 1%, 41%, 0%). It has a relative luminance of 0.937 and pairs best in UI design with Deep French Navy (#0F172A) and Soft Lavender (#E6E6FA).
Click to Copy HEX
Butter Yellow
#FFFD96
HEX
#FFFD96
RGB
rgb(255, 253, 150)
HSL
hsl(59deg, 100%, 79%)
CMYK (Print)
cmyk(0%, 1%, 41%, 0%)
Apple Display P3
color(display-p3 1.000 0.992 0.588)

WCAG 2.1 Accessibility & Contrast Rating

White Text (#FFFFFF) 1.06:1 (Fail)
Black Text (#000000) 19.74:1 (AAA)

11-Step Tints & Shades Scale (Tailwind 50–950)

Mathematically balanced luminance scale for design tokens and CSS color palettes. Click any shade to copy hex code:

50
#FFFFEB
100
#FFFED6
200
#FFFEAD
300
#FFFD7A
400
#FFFC3D
500
#FFFD96
600
#FFFC4B
700
#FFFB07
800
#C1BE00
900
#817F00
950
#494700

Color Harmonies & Palette Schemes

Complementary

#9496FF
Opposite 180° Contrast

Analogous -30°

#FFC894
Natural Harmony

Analogous +30°

#CBFF94
Natural Harmony

Triadic +120°

#94FFFD
120° Balanced Triad

Triadic +240°

#FD94FF
120° Balanced Triad

Curated UI Design Pairings for Butter Yellow

Trending accent for spring/summer fashion lookbooks, pastry eCommerce, friendly SaaS alert banners, and nursery platforms.

Deep French Navy
#0F172A
High-Contrast Readable Text
Soft Lavender
#E6E6FA
Charming Floral Complement
Crisp White
#FFFFFF
Pristine Clean Canvas
Warm Cinnamon
#78350F
Cozy Contrast Border

Export Butter Yellow Code Snippets

CSS Variable --color-butter-yellow: #FFFD96;
Tailwind Config 'butter-yellow': '#FFFD96'
Swift / SwiftUI Color(hex: "#FFFD96")
JSON Design Token {"name": "Butter Yellow", "hex": "#FFFD96"}

Frequently Asked Questions About Butter Yellow (#FFFD96)

What is the exact HEX code for Butter Yellow?

The exact HEX code for Butter Yellow is #FFFD96. In 8-digit hexadecimal (with 100% opacity), it is #FFFD96FF. Its RGB decimal equivalent is rgb(255, 253, 150) and its HSL value is hsl(59deg, 100%, 79%).

What colors go best with Butter Yellow in UI and web design?

Butter Yellow pairs exceptionally well with Deep French Navy (#0F172A), Soft Lavender (#E6E6FA), Crisp White (#FFFFFF), and Warm Cinnamon (#78350F).

How do I use Butter Yellow in CSS and Tailwind CSS?

In standard CSS, apply it directly via color: #FFFD96; or background-color: #FFFD96;. In Tailwind CSS, use arbitrary value syntax like bg-[#fffd96] or text-[#fffd96], or define it in your Tailwind v4 @theme block as --color-butter-yellow: #FFFD96;.

Is Butter Yellow WCAG accessible for readable text?

Against a pure white background (#FFFFFF), Butter Yellow achieves a contrast ratio of 1.06:1 (Fail). Against a pure black background (#000000), it achieves 19.74:1 (AAA). Check custom contrast pairings on Pikka's WCAG Contrast Checker.

Explore More Colors in the Dictionary

Browse our complete catalog of curated named colors, harmonic palettes, and accessible UI combinations.

Named Color Dictionary Interactive Color Wheel Tint & Shade Generator