Butter Yellow Color Palette
A warm butter yellow palette radiating cheerfulness. Great for children brands, bakeries, and optimistic designs.
Golden Butter
HEX: #c9a62c
RGB: rgb(201, 166, 44)
HSL: hsl(47, 64%, 48%)
Rich Yellow
HEX: #e2c048
RGB: rgb(226, 192, 72)
HSL: hsl(47, 73%, 58%)
Butter Yellow
HEX: #f7dc6f
RGB: rgb(247, 220, 111)
HSL: hsl(48, 89%, 70%)
Light Butter
HEX: #fae99f
RGB: rgb(250, 233, 159)
HSL: hsl(49, 90%, 80%)
Cream
HEX: #fdf7dc
RGB: rgb(253, 247, 220)
HSL: hsl(49, 89%, 93%)
CSS Variables
:root {
--butter-yellow-1: #c9a62c;
--butter-yellow-2: #e2c048;
--butter-yellow-3: #f7dc6f;
--butter-yellow-4: #fae99f;
--butter-yellow-5: #fdf7dc;
}Tailwind CSS Config
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'butter-yellow': {
'100': '#c9a62c',
'200': '#e2c048',
'300': '#f7dc6f',
'400': '#fae99f',
'500': '#fdf7dc',
},
},
},
},
}Use Cases
Children brands
Bakeries
Positive messaging
Summer campaigns
Related Palettes
Frequently Asked Questions
How does yellow affect mood?▾
Yellow is associated with happiness, optimism, and energy. It stimulates mental activity and generates positive feelings, making it ideal for uplifting brand messages.
Why is yellow difficult to use in web design?▾
Pure yellow has low contrast against white backgrounds, making text hard to read. Use darker shades for text and reserve bright yellows for accents on contrasting backgrounds.