Summer Citrus Color Palette
Peak-summer juice: lemon and lime, tangerine, watermelon-coral, and pool-water aqua. High-energy and refreshing, the colors of popsicles and citrus slices on a hot day. For summer campaigns, food and drink branding, and bright, energetic graphics.
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 {
--summer-citrus-1: #FBE23A;
--summer-citrus-2: #F6D52E;
--summer-citrus-3: #EFC724;
--summer-citrus-4: #E4B41C;
--summer-citrus-5: #D5A015;
--summer-citrus-6: #C28C10;
--summer-citrus-7: #BFE23A;
--summer-citrus-8: #A8D72E;
--summer-citrus-9: #92C924;
--summer-citrus-10: #7CB81C;
--summer-citrus-11: #67A515;
--summer-citrus-12: #549110;
--summer-citrus-13: #FBA03A;
--summer-citrus-14: #F68E2E;
--summer-citrus-15: #EE7C24;
--summer-citrus-16: #E26A1C;
--summer-citrus-17: #D15815;
--summer-citrus-18: #BC4910;
--summer-citrus-19: #F85E6E;
--summer-citrus-20: #EE4E62;
--summer-citrus-21: #E14056;
--summer-citrus-22: #CF3349;
--summer-citrus-23: #BA283E;
--summer-citrus-24: #A41E33;
--summer-citrus-25: #3EC8D0;
--summer-citrus-26: #33B6C8;
--summer-citrus-27: #2AA0C0;
--summer-citrus-28: #3A8FD0;
--summer-citrus-29: #5A9EDE;
--summer-citrus-30: #7CB2E6;
}SCSS
$summer-citrus-1: #FBE23A;
$summer-citrus-2: #F6D52E;
$summer-citrus-3: #EFC724;
$summer-citrus-4: #E4B41C;
$summer-citrus-5: #D5A015;
$summer-citrus-6: #C28C10;
$summer-citrus-7: #BFE23A;
$summer-citrus-8: #A8D72E;
$summer-citrus-9: #92C924;
$summer-citrus-10: #7CB81C;
$summer-citrus-11: #67A515;
$summer-citrus-12: #549110;
$summer-citrus-13: #FBA03A;
$summer-citrus-14: #F68E2E;
$summer-citrus-15: #EE7C24;
$summer-citrus-16: #E26A1C;
$summer-citrus-17: #D15815;
$summer-citrus-18: #BC4910;
$summer-citrus-19: #F85E6E;
$summer-citrus-20: #EE4E62;
$summer-citrus-21: #E14056;
$summer-citrus-22: #CF3349;
$summer-citrus-23: #BA283E;
$summer-citrus-24: #A41E33;
$summer-citrus-25: #3EC8D0;
$summer-citrus-26: #33B6C8;
$summer-citrus-27: #2AA0C0;
$summer-citrus-28: #3A8FD0;
$summer-citrus-29: #5A9EDE;
$summer-citrus-30: #7CB2E6;Tailwind
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'summer-citrus': {
'1': '#FBE23A',
'2': '#F6D52E',
'3': '#EFC724',
'4': '#E4B41C',
'5': '#D5A015',
'6': '#C28C10',
'7': '#BFE23A',
'8': '#A8D72E',
'9': '#92C924',
'10': '#7CB81C',
'11': '#67A515',
'12': '#549110',
'13': '#FBA03A',
'14': '#F68E2E',
'15': '#EE7C24',
'16': '#E26A1C',
'17': '#D15815',
'18': '#BC4910',
'19': '#F85E6E',
'20': '#EE4E62',
'21': '#E14056',
'22': '#CF3349',
'23': '#BA283E',
'24': '#A41E33',
'25': '#3EC8D0',
'26': '#33B6C8',
'27': '#2AA0C0',
'28': '#3A8FD0',
'29': '#5A9EDE',
'30': '#7CB2E6',
},
},
},
},
};JSON
{
"name": "Summer Citrus",
"colors": [
"#FBE23A",
"#F6D52E",
"#EFC724",
"#E4B41C",
"#D5A015",
"#C28C10",
"#BFE23A",
"#A8D72E",
"#92C924",
"#7CB81C",
"#67A515",
"#549110",
"#FBA03A",
"#F68E2E",
"#EE7C24",
"#E26A1C",
"#D15815",
"#BC4910",
"#F85E6E",
"#EE4E62",
"#E14056",
"#CF3349",
"#BA283E",
"#A41E33",
"#3EC8D0",
"#33B6C8",
"#2AA0C0",
"#3A8FD0",
"#5A9EDE",
"#7CB2E6"
]
}Hex list
#FBE23A
#F6D52E
#EFC724
#E4B41C
#D5A015
#C28C10
#BFE23A
#A8D72E
#92C924
#7CB81C
#67A515
#549110
#FBA03A
#F68E2E
#EE7C24
#E26A1C
#D15815
#BC4910
#F85E6E
#EE4E62
#E14056
#CF3349
#BA283E
#A41E33
#3EC8D0
#33B6C8
#2AA0C0
#3A8FD0
#5A9EDE
#7CB2E6