Sign Up Sign Up
SeasonOfWishes

SeasonOfWishes

12-color palette · Cool · Mixed · Complementary harmony

Back to Library

SeasonOfWishes

12-color palette · Cool temperature · Mixed tone · Complementary harmony

Modify
Vibrant 12 colors Cool Mixed Complementary sky stars christmas tree
Likes 21
Colors 12

CSS variables

:root {
  --c-vibrant-1: #001E3D;
  --c-vibrant-2: #005C66;
  --c-vibrant-3: #22AB80;
  --c-vibrant-4: #7DFFD4;
  --c-vibrant-5: #A1411B;
  --c-vibrant-6: #DE9A26;
  --c-vibrant-7: #FFC68C;
  --c-vibrant-8: #E6FFF7;
  --c-vibrant-9: #3B001F;
  --c-vibrant-10: #5C1515;
  --c-vibrant-11: #A62121;
  --c-vibrant-12: #FF443B;
}

About this palette

This 12-color vibrant palette runs from Mint Chiffon (#E6FFF7) as its lightest tone to Vienna Roast (#3B001F) as its darkest. It blends Midnight Mirage, Egyptian Enamel, Crayola Green, Hiroshima Aquamarine, Hot Brown, Tiger King, Bundaberg Sand, Mint Chiffon, Vienna Roast, Philippine Brown, Red Menace and Red Coral into a single set you can drop straight into a UI. Of its 66 color pairings, 25 meet the WCAG AA contrast threshold (4.5:1) for body text — the strongest is #E6FFF7 on #3B001F at 16.6:1.

A versatile palette suitable for marketing pages, product hero blocks, illustrations, and accent UI states.

Color breakdown

Midnight Mirage #001E3D
RGB
rgb(0, 30, 61)
HSL
hsl(210, 100%, 12%)
Luminance
0.013
Egyptian Enamel #005C66
RGB
rgb(0, 92, 102)
HSL
hsl(186, 100%, 20%)
Luminance
0.086
Crayola Green #22AB80
RGB
rgb(34, 171, 128)
HSL
hsl(161, 67%, 40%)
Luminance
0.310
Hiroshima Aquamarine #7DFFD4
RGB
rgb(125, 255, 212)
HSL
hsl(160, 100%, 75%)
Luminance
0.806
Hot Brown #A1411B
RGB
rgb(161, 65, 27)
HSL
hsl(17, 71%, 37%)
Luminance
0.114
Tiger King #DE9A26
RGB
rgb(222, 154, 38)
HSL
hsl(38, 74%, 51%)
Luminance
0.388
Bundaberg Sand #FFC68C
RGB
rgb(255, 198, 140)
HSL
hsl(30, 100%, 77%)
Luminance
0.635
Mint Chiffon #E6FFF7
RGB
rgb(230, 255, 247)
HSL
hsl(161, 100%, 95%)
Luminance
0.951
Vienna Roast #3B001F
RGB
rgb(59, 0, 31)
HSL
hsl(328, 100%, 12%)
Luminance
0.010
Philippine Brown #5C1515
RGB
rgb(92, 21, 21)
HSL
hsl(0, 63%, 22%)
Luminance
0.029
Red Menace #A62121
RGB
rgb(166, 33, 33)
HSL
hsl(0, 67%, 39%)
Luminance
0.093
Red Coral #FF443B
RGB
rgb(255, 68, 59)
HSL
hsl(3, 100%, 62%)
Luminance
0.257

Contrast & accessibility

25 of 66 color pairings meet the WCAG AA contrast threshold (4.5:1) for body text.

Aa #E6FFF7 on #3B001F 16.60:1 AAA
Aa #001E3D on #E6FFF7 15.97:1 AAA
Aa #7DFFD4 on #3B001F 14.20:1 AAA
Aa #001E3D on #7DFFD4 13.67:1 AAA
Aa #E6FFF7 on #5C1515 12.72:1 AAA
Aa #FFC68C on #3B001F 11.37:1 AAA
Aa #001E3D on #FFC68C 10.94:1 AAA
Aa #7DFFD4 on #5C1515 10.89:1 AAA
Aa #FFC68C on #5C1515 8.71:1 AAA
Aa #005C66 on #E6FFF7 7.35:1 AAA
Aa #DE9A26 on #3B001F 7.26:1 AAA
Aa #001E3D on #DE9A26 6.99:1 AA
Aa #E6FFF7 on #A62121 6.99:1 AA
Aa #005C66 on #7DFFD4 6.29:1 AA
Aa #A1411B on #E6FFF7 6.09:1 AA
Aa #7DFFD4 on #A62121 5.99:1 AA
Aa #22AB80 on #3B001F 5.98:1 AA
Aa #001E3D on #22AB80 5.75:1 AA
Aa #DE9A26 on #5C1515 5.57:1 AA
Aa #7DFFD4 on #A1411B 5.21:1 AA
Aa #3B001F on #FF443B 5.09:1 AA
Aa #005C66 on #FFC68C 5.03:1 AA
Aa #001E3D on #FF443B 4.90:1 AA
Aa #FFC68C on #A62121 4.79:1 AA
Aa #22AB80 on #5C1515 4.58:1 AA
Aa #A1411B on #FFC68C 4.17:1 AA Large
Aa #5C1515 on #FF443B 3.90:1 AA Large
Aa #E6FFF7 on #FF443B 3.26:1 AA Large
Aa #005C66 on #DE9A26 3.22:1 AA Large
Aa #DE9A26 on #A62121 3.06:1 AA Large
Aa #7DFFD4 on #FF443B 2.79:1 Fail
Aa #22AB80 on #E6FFF7 2.78:1 Fail
Aa #A1411B on #3B001F 2.73:1 Fail
Aa #A1411B on #DE9A26 2.66:1 Fail
Aa #005C66 on #22AB80 2.65:1 Fail
Aa #001E3D on #A1411B 2.62:1 Fail
Aa #22AB80 on #A62121 2.52:1 Fail
Aa #22AB80 on #7DFFD4 2.38:1 Fail
Aa #3B001F on #A62121 2.37:1 Fail
Aa #DE9A26 on #E6FFF7 2.29:1 Fail
Aa #001E3D on #A62121 2.28:1 Fail
Aa #005C66 on #3B001F 2.26:1 Fail
Aa #005C66 on #FF443B 2.26:1 Fail
Aa #FFC68C on #FF443B 2.23:1 Fail
Aa #22AB80 on #A1411B 2.19:1 Fail
Aa #001E3D on #005C66 2.17:1 Fail
Aa #A62121 on #FF443B 2.15:1 Fail
Aa #A1411B on #5C1515 2.09:1 Fail
Aa #7DFFD4 on #DE9A26 1.96:1 Fail
Aa #22AB80 on #FFC68C 1.90:1 Fail
Aa #A1411B on #FF443B 1.87:1 Fail
Aa #5C1515 on #A62121 1.82:1 Fail
Aa #005C66 on #5C1515 1.73:1 Fail
Aa #DE9A26 on #FFC68C 1.57:1 Fail
Aa #FFC68C on #E6FFF7 1.46:1 Fail
Aa #DE9A26 on #FF443B 1.43:1 Fail
Aa #3B001F on #5C1515 1.30:1 Fail
Aa #001E3D on #5C1515 1.26:1 Fail
Aa #7DFFD4 on #FFC68C 1.25:1 Fail
Aa #22AB80 on #DE9A26 1.22:1 Fail
Aa #005C66 on #A1411B 1.21:1 Fail
Aa #22AB80 on #FF443B 1.17:1 Fail
Aa #7DFFD4 on #E6FFF7 1.17:1 Fail
Aa #A1411B on #A62121 1.15:1 Fail
Aa #005C66 on #A62121 1.05:1 Fail
Aa #001E3D on #3B001F 1.04:1 Fail

Similar palettes

#222831 #393E46 #00ADB5 #EEEEEE
4 colors
#F9F7F7 #DBE2EF #3F72AF #112D4E
4 colors
#1B262C #0F4C75 #3282B8 #BBE1FA
4 colors
#08D9D6 #252A34 #FF2E63 #EAEAEA
4 colors
#27374D #526D82 #9DB2BF #DDE6ED
4 colors
#364F6B #3FC1C9 #F5F5F5 #FC5185
4 colors
#E4F9F5 #30E3CA #11999E #40514E
4 colors
#F0F5F9 #C9D6DF #52616B #1E2022
4 colors