Butter Yellow Color Palette
The soft butter yellow having a moment — vanilla cream through buttery mid-yellows into deep gold, warmed with sand neutrals and a soft sage-and-peach accent. Gentle and sunny rather than acid, it's the cozy, optimistic yellow that reads expensive instead of loud. For on-trend branding, soft packaging, and warm editorial layouts.
Get Paintrix free on the App Store.
Download
Hex codes
Color theory
Base
Complement
Analogous −30°
Analogous +30°
Triadic
Use it for
Code formats
CSS
:root {
--butter-yellow-1: #FBF5E2;
--butter-yellow-2: #F8EFD2;
--butter-yellow-3: #F5E8C0;
--butter-yellow-4: #F1E0AD;
--butter-yellow-5: #EDD89A;
--butter-yellow-6: #E8CF86;
--butter-yellow-7: #F3D98F;
--butter-yellow-8: #EDCE78;
--butter-yellow-9: #E6C263;
--butter-yellow-10: #DDB54E;
--butter-yellow-11: #D1A63C;
--butter-yellow-12: #C2952E;
--butter-yellow-13: #B08328;
--butter-yellow-14: #9E7423;
--butter-yellow-15: #8C661E;
--butter-yellow-16: #7A5719;
--butter-yellow-17: #684A15;
--butter-yellow-18: #563C11;
--butter-yellow-19: #EDE3C8;
--butter-yellow-20: #DFD2AE;
--butter-yellow-21: #CFC093;
--butter-yellow-22: #BCAB78;
--butter-yellow-23: #A89560;
--butter-yellow-24: #93804A;
--butter-yellow-25: #D6DBB8;
--butter-yellow-26: #C6CDA0;
--butter-yellow-27: #E8C9A6;
--butter-yellow-28: #DDB48C;
--butter-yellow-29: #CFA078;
--butter-yellow-30: #BE8C66;
}SCSS
$butter-yellow-1: #FBF5E2;
$butter-yellow-2: #F8EFD2;
$butter-yellow-3: #F5E8C0;
$butter-yellow-4: #F1E0AD;
$butter-yellow-5: #EDD89A;
$butter-yellow-6: #E8CF86;
$butter-yellow-7: #F3D98F;
$butter-yellow-8: #EDCE78;
$butter-yellow-9: #E6C263;
$butter-yellow-10: #DDB54E;
$butter-yellow-11: #D1A63C;
$butter-yellow-12: #C2952E;
$butter-yellow-13: #B08328;
$butter-yellow-14: #9E7423;
$butter-yellow-15: #8C661E;
$butter-yellow-16: #7A5719;
$butter-yellow-17: #684A15;
$butter-yellow-18: #563C11;
$butter-yellow-19: #EDE3C8;
$butter-yellow-20: #DFD2AE;
$butter-yellow-21: #CFC093;
$butter-yellow-22: #BCAB78;
$butter-yellow-23: #A89560;
$butter-yellow-24: #93804A;
$butter-yellow-25: #D6DBB8;
$butter-yellow-26: #C6CDA0;
$butter-yellow-27: #E8C9A6;
$butter-yellow-28: #DDB48C;
$butter-yellow-29: #CFA078;
$butter-yellow-30: #BE8C66;Tailwind
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'butter-yellow': {
'1': '#FBF5E2',
'2': '#F8EFD2',
'3': '#F5E8C0',
'4': '#F1E0AD',
'5': '#EDD89A',
'6': '#E8CF86',
'7': '#F3D98F',
'8': '#EDCE78',
'9': '#E6C263',
'10': '#DDB54E',
'11': '#D1A63C',
'12': '#C2952E',
'13': '#B08328',
'14': '#9E7423',
'15': '#8C661E',
'16': '#7A5719',
'17': '#684A15',
'18': '#563C11',
'19': '#EDE3C8',
'20': '#DFD2AE',
'21': '#CFC093',
'22': '#BCAB78',
'23': '#A89560',
'24': '#93804A',
'25': '#D6DBB8',
'26': '#C6CDA0',
'27': '#E8C9A6',
'28': '#DDB48C',
'29': '#CFA078',
'30': '#BE8C66',
},
},
},
},
};JSON
{
"name": "Butter Yellow",
"colors": [
"#FBF5E2",
"#F8EFD2",
"#F5E8C0",
"#F1E0AD",
"#EDD89A",
"#E8CF86",
"#F3D98F",
"#EDCE78",
"#E6C263",
"#DDB54E",
"#D1A63C",
"#C2952E",
"#B08328",
"#9E7423",
"#8C661E",
"#7A5719",
"#684A15",
"#563C11",
"#EDE3C8",
"#DFD2AE",
"#CFC093",
"#BCAB78",
"#A89560",
"#93804A",
"#D6DBB8",
"#C6CDA0",
"#E8C9A6",
"#DDB48C",
"#CFA078",
"#BE8C66"
]
}Hex list
#FBF5E2
#F8EFD2
#F5E8C0
#F1E0AD
#EDD89A
#E8CF86
#F3D98F
#EDCE78
#E6C263
#DDB54E
#D1A63C
#C2952E
#B08328
#9E7423
#8C661E
#7A5719
#684A15
#563C11
#EDE3C8
#DFD2AE
#CFC093
#BCAB78
#A89560
#93804A
#D6DBB8
#C6CDA0
#E8C9A6
#DDB48C
#CFA078
#BE8C66