Sign Up Sign Up
Fade12

Fade12

12-color palette · Warm · Mixed · Complementary harmony

Back to Library

Fade12

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

Modify
Vibrant 12 colors Warm Mixed Complementary 12colors
Likes 9
Colors 12

CSS variables

:root {
  --c-vibrant-1: #FE5F55;
  --c-vibrant-2: #F5D549;
  --c-vibrant-3: #5ABD5C;
  --c-vibrant-4: #423A60;
  --c-vibrant-5: #9C579E;
  --c-vibrant-6: #E986C6;
  --c-vibrant-7: #FFDCA8;
  --c-vibrant-8: #C1FFA8;
  --c-vibrant-9: #A8D9FF;
  --c-vibrant-10: #000019;
  --c-vibrant-11: #828282;
  --c-vibrant-12: #F0FFFE;
}

About this palette

This 12-color vibrant palette runs from Vapour (#F0FFFE) as its lightest tone to Benthic Black (#000019) as its darkest. It blends Sunset Orange, Anna Banana, Forest Maid, Patriot Blue, Heath Spotted Orchid, Blushed Bombshell, Sarcoline, Menthol, Malmö FF, Benthic Black, Squant and Vapour into a single set you can drop straight into a UI. Of its 66 color pairings, 15 meet the WCAG AA contrast threshold (4.5:1) for body text — the strongest is #000019 on #F0FFFE at 20.16:1.

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

Color breakdown

Sunset Orange #FE5F55
RGB
rgb(254, 95, 85)
HSL
hsl(4, 99%, 66%)
Luminance
0.299
Anna Banana #F5D549
RGB
rgb(245, 213, 73)
HSL
hsl(49, 90%, 62%)
Luminance
0.675
Forest Maid #5ABD5C
RGB
rgb(90, 189, 92)
HSL
hsl(121, 43%, 55%)
Luminance
0.393
Patriot Blue #423A60
RGB
rgb(66, 58, 96)
HSL
hsl(253, 25%, 30%)
Luminance
0.050
Heath Spotted Orchid #9C579E
RGB
rgb(156, 87, 158)
HSL
hsl(298, 29%, 48%)
Luminance
0.164
Blushed Bombshell #E986C6
RGB
rgb(233, 134, 198)
HSL
hsl(321, 69%, 72%)
Luminance
0.385
Sarcoline #FFDCA8
RGB
rgb(255, 220, 168)
HSL
hsl(36, 100%, 83%)
Luminance
0.753
Menthol #C1FFA8
RGB
rgb(193, 255, 168)
HSL
hsl(103, 100%, 83%)
Luminance
0.857
Malmö FF #A8D9FF
RGB
rgb(168, 217, 255)
HSL
hsl(206, 100%, 83%)
Luminance
0.652
Benthic Black #000019
RGB
rgb(0, 0, 25)
HSL
hsl(240, 100%, 5%)
Luminance
0.001
Squant #828282
RGB
rgb(130, 130, 130)
HSL
hsl(0, 0%, 51%)
Luminance
0.223
Vapour #F0FFFE
RGB
rgb(240, 255, 254)
HSL
hsl(176, 100%, 97%)
Luminance
0.972

Contrast & accessibility

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

Aa #000019 on #F0FFFE 20.16:1 AAA
Aa #C1FFA8 on #000019 17.89:1 AAA
Aa #FFDCA8 on #000019 15.83:1 AAA
Aa #F5D549 on #000019 14.30:1 AAA
Aa #A8D9FF on #000019 13.84:1 AAA
Aa #423A60 on #F0FFFE 10.19:1 AAA
Aa #423A60 on #C1FFA8 9.04:1 AAA
Aa #5ABD5C on #000019 8.75:1 AAA
Aa #E986C6 on #000019 8.57:1 AAA
Aa #423A60 on #FFDCA8 8.00:1 AAA
Aa #F5D549 on #423A60 7.23:1 AAA
Aa #423A60 on #A8D9FF 7.00:1 AAA
Aa #FE5F55 on #000019 6.89:1 AA
Aa #000019 on #828282 5.39:1 AA
Aa #9C579E on #F0FFFE 4.79:1 AA
Aa #5ABD5C on #423A60 4.42:1 AA Large
Aa #423A60 on #E986C6 4.33:1 AA Large
Aa #9C579E on #C1FFA8 4.25:1 AA Large
Aa #9C579E on #000019 4.21:1 AA Large
Aa #9C579E on #FFDCA8 3.76:1 AA Large
Aa #828282 on #F0FFFE 3.74:1 AA Large
Aa #FE5F55 on #423A60 3.48:1 AA Large
Aa #F5D549 on #9C579E 3.39:1 AA Large
Aa #C1FFA8 on #828282 3.32:1 AA Large
Aa #9C579E on #A8D9FF 3.29:1 AA Large
Aa #FFDCA8 on #828282 2.94:1 Fail
Aa #FE5F55 on #F0FFFE 2.93:1 Fail
Aa #423A60 on #828282 2.72:1 Fail
Aa #F5D549 on #828282 2.65:1 Fail
Aa #FE5F55 on #C1FFA8 2.60:1 Fail
Aa #A8D9FF on #828282 2.57:1 Fail
Aa #E986C6 on #F0FFFE 2.35:1 Fail
Aa #FE5F55 on #FFDCA8 2.30:1 Fail
Aa #5ABD5C on #F0FFFE 2.30:1 Fail
Aa #423A60 on #9C579E 2.13:1 Fail
Aa #E986C6 on #C1FFA8 2.09:1 Fail
Aa #FE5F55 on #F5D549 2.08:1 Fail
Aa #5ABD5C on #9C579E 2.08:1 Fail
Aa #5ABD5C on #C1FFA8 2.05:1 Fail
Aa #9C579E on #E986C6 2.03:1 Fail
Aa #FE5F55 on #A8D9FF 2.01:1 Fail
Aa #423A60 on #000019 1.98:1 Fail
Aa #E986C6 on #FFDCA8 1.85:1 Fail
Aa #5ABD5C on #FFDCA8 1.81:1 Fail
Aa #F5D549 on #E986C6 1.67:1 Fail
Aa #FE5F55 on #9C579E 1.63:1 Fail
Aa #F5D549 on #5ABD5C 1.63:1 Fail
Aa #5ABD5C on #828282 1.62:1 Fail
Aa #E986C6 on #A8D9FF 1.61:1 Fail
Aa #E986C6 on #828282 1.59:1 Fail
Aa #5ABD5C on #A8D9FF 1.58:1 Fail
Aa #A8D9FF on #F0FFFE 1.46:1 Fail
Aa #F5D549 on #F0FFFE 1.41:1 Fail
Aa #C1FFA8 on #A8D9FF 1.29:1 Fail
Aa #FE5F55 on #828282 1.28:1 Fail
Aa #9C579E on #828282 1.28:1 Fail
Aa #FE5F55 on #5ABD5C 1.27:1 Fail
Aa #FFDCA8 on #F0FFFE 1.27:1 Fail
Aa #F5D549 on #C1FFA8 1.25:1 Fail
Aa #FE5F55 on #E986C6 1.24:1 Fail
Aa #FFDCA8 on #A8D9FF 1.14:1 Fail
Aa #FFDCA8 on #C1FFA8 1.13:1 Fail
Aa #C1FFA8 on #F0FFFE 1.13:1 Fail
Aa #F5D549 on #FFDCA8 1.11:1 Fail
Aa #F5D549 on #A8D9FF 1.03:1 Fail
Aa #5ABD5C on #E986C6 1.02:1 Fail

Similar palettes

#F9ED69 #F08A5D #B83B5E #6A2C70
4 colors
#7D5A50 #B4846C #E5B299 #FCDEC0
4 colors
#FFF8EA #9E7676 #815B5B #594545
4 colors
#2C3639 #3F4E4F #A27B5C #DCD7C9
4 colors
#F67280 #C06C84 #6C5B7B #355C7D
4 colors
#2B2E4A #E84545 #903749 #53354A
4 colors
#E5D9B6 #A4BE7B #5F8D4E #285430
4 colors
#A9907E #F3DEBA #ABC4AA #675D50
4 colors