Sign Up Sign Up
Popcorn 12

Popcorn 12

12-color palette · Warm · Mixed · Complementary harmony

Back to Library

Popcorn 12

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

Modify
Vibrant 12 colors Warm Mixed Complementary
Likes 12
Colors 12

CSS variables

:root {
  --c-vibrant-1: #0E1012;
  --c-vibrant-2: #654E78;
  --c-vibrant-3: #7A73FF;
  --c-vibrant-4: #FFDBAB;
  --c-vibrant-5: #A33665;
  --c-vibrant-6: #FF524C;
  --c-vibrant-7: #FF8CD7;
  --c-vibrant-8: #539C81;
  --c-vibrant-9: #4CFF79;
  --c-vibrant-10: #F7A359;
  --c-vibrant-11: #FFED78;
  --c-vibrant-12: #FFF9D6;
}

About this palette

This 12-color vibrant palette runs from Wild Apple (#FFF9D6) as its lightest tone to Ruined Smores (#0E1012) as its darkest. It blends Ruined Smores, Imperial Palace, Stargate Shimmer, Peach Glow, Valentine’s Day, Red Orange Juice, Pink Delight, Wintergreen Shadow, Experimintal Green, Ginger Milk, Golden Aurelia and Wild Apple into a single set you can drop straight into a UI. Of its 66 color pairings, 17 meet the WCAG AA contrast threshold (4.5:1) for body text — the strongest is #0E1012 on #FFF9D6 at 17.95:1.

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

Color breakdown

Ruined Smores #0E1012
RGB
rgb(14, 16, 18)
HSL
hsl(210, 13%, 6%)
Luminance
0.005
Imperial Palace #654E78
RGB
rgb(101, 78, 120)
HSL
hsl(273, 21%, 39%)
Luminance
0.096
Stargate Shimmer #7A73FF
RGB
rgb(122, 115, 255)
HSL
hsl(243, 100%, 73%)
Luminance
0.236
Peach Glow #FFDBAB
RGB
rgb(255, 219, 171)
HSL
hsl(34, 100%, 84%)
Luminance
0.749
Valentine’s Day #A33665
RGB
rgb(163, 54, 101)
HSL
hsl(334, 50%, 43%)
Luminance
0.114
Red Orange Juice #FF524C
RGB
rgb(255, 82, 76)
HSL
hsl(2, 100%, 65%)
Luminance
0.278
Pink Delight #FF8CD7
RGB
rgb(255, 140, 215)
HSL
hsl(321, 100%, 77%)
Luminance
0.449
Wintergreen Shadow #539C81
RGB
rgb(83, 156, 129)
HSL
hsl(158, 31%, 47%)
Luminance
0.272
Experimintal Green #4CFF79
RGB
rgb(76, 255, 121)
HSL
hsl(135, 100%, 65%)
Luminance
0.744
Ginger Milk #F7A359
RGB
rgb(247, 163, 89)
HSL
hsl(28, 91%, 66%)
Luminance
0.467
Golden Aurelia #FFED78
RGB
rgb(255, 237, 120)
HSL
hsl(52, 100%, 74%)
Luminance
0.832
Wild Apple #FFF9D6
RGB
rgb(255, 249, 214)
HSL
hsl(51, 100%, 92%)
Luminance
0.939

Contrast & accessibility

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

Aa #0E1012 on #FFF9D6 17.95:1 AAA
Aa #0E1012 on #FFED78 16.01:1 AAA
Aa #0E1012 on #FFDBAB 14.50:1 AAA
Aa #0E1012 on #4CFF79 14.42:1 AAA
Aa #0E1012 on #F7A359 9.39:1 AAA
Aa #0E1012 on #FF8CD7 9.06:1 AAA
Aa #654E78 on #FFF9D6 6.78:1 AA
Aa #654E78 on #FFED78 6.05:1 AA
Aa #A33665 on #FFF9D6 6.04:1 AA
Aa #0E1012 on #FF524C 5.96:1 AA
Aa #0E1012 on #539C81 5.85:1 AA
Aa #654E78 on #FFDBAB 5.48:1 AA
Aa #654E78 on #4CFF79 5.45:1 AA
Aa #A33665 on #FFED78 5.39:1 AA
Aa #0E1012 on #7A73FF 5.20:1 AA
Aa #FFDBAB on #A33665 4.88:1 AA
Aa #A33665 on #4CFF79 4.85:1 AA
Aa #654E78 on #F7A359 3.55:1 AA Large
Aa #7A73FF on #FFF9D6 3.45:1 AA Large
Aa #654E78 on #FF8CD7 3.43:1 AA Large
Aa #A33665 on #F7A359 3.16:1 AA Large
Aa #7A73FF on #FFED78 3.08:1 AA Large
Aa #539C81 on #FFF9D6 3.07:1 AA Large
Aa #A33665 on #FF8CD7 3.05:1 AA Large
Aa #FF524C on #FFF9D6 3.01:1 AA Large
Aa #0E1012 on #A33665 2.97:1 Fail
Aa #7A73FF on #FFDBAB 2.79:1 Fail
Aa #7A73FF on #4CFF79 2.78:1 Fail
Aa #539C81 on #FFED78 2.74:1 Fail
Aa #FF524C on #FFED78 2.69:1 Fail
Aa #0E1012 on #654E78 2.65:1 Fail
Aa #FFDBAB on #539C81 2.48:1 Fail
Aa #539C81 on #4CFF79 2.47:1 Fail
Aa #FFDBAB on #FF524C 2.43:1 Fail
Aa #FF524C on #4CFF79 2.42:1 Fail
Aa #654E78 on #FF524C 2.25:1 Fail
Aa #654E78 on #539C81 2.21:1 Fail
Aa #A33665 on #FF524C 2.01:1 Fail
Aa #FF8CD7 on #FFF9D6 1.98:1 Fail
Aa #A33665 on #539C81 1.97:1 Fail
Aa #654E78 on #7A73FF 1.96:1 Fail
Aa #F7A359 on #FFF9D6 1.91:1 Fail
Aa #7A73FF on #F7A359 1.81:1 Fail
Aa #FF8CD7 on #FFED78 1.77:1 Fail
Aa #7A73FF on #A33665 1.75:1 Fail
Aa #7A73FF on #FF8CD7 1.74:1 Fail
Aa #F7A359 on #FFED78 1.71:1 Fail
Aa #539C81 on #F7A359 1.61:1 Fail
Aa #FFDBAB on #FF8CD7 1.60:1 Fail
Aa #FF8CD7 on #4CFF79 1.59:1 Fail
Aa #FF524C on #F7A359 1.58:1 Fail
Aa #FFDBAB on #F7A359 1.55:1 Fail
Aa #FF8CD7 on #539C81 1.55:1 Fail
Aa #4CFF79 on #F7A359 1.54:1 Fail
Aa #FF524C on #FF8CD7 1.52:1 Fail
Aa #FFDBAB on #FFF9D6 1.24:1 Fail
Aa #4CFF79 on #FFF9D6 1.24:1 Fail
Aa #7A73FF on #FF524C 1.15:1 Fail
Aa #7A73FF on #539C81 1.13:1 Fail
Aa #654E78 on #A33665 1.12:1 Fail
Aa #FFED78 on #FFF9D6 1.12:1 Fail
Aa #4CFF79 on #FFED78 1.11:1 Fail
Aa #FFDBAB on #FFED78 1.10:1 Fail
Aa #FF8CD7 on #F7A359 1.04:1 Fail
Aa #FF524C on #539C81 1.02:1 Fail
Aa #FFDBAB on #4CFF79 1.01: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