Sign Up Sign Up
PLEASE DELETE MY ACCOUNT

PLEASE DELETE MY ACCOUNT

10-color palette · Warm · Mixed · Complementary harmony

Back to Library

PLEASE DELETE MY ACCOUNT

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

Modify
Vibrant 10 colors Warm Mixed Complementary pixelart limited whatthedec tencolor
Likes 43
Colors 10

CSS variables

:root {
  --c-vibrant-1: #FFFDCE;
  --c-vibrant-2: #FFCD6B;
  --c-vibrant-3: #78DA22;
  --c-vibrant-4: #17854E;
  --c-vibrant-5: #E66649;
  --c-vibrant-6: #8349A6;
  --c-vibrant-7: #38153B;
  --c-vibrant-8: #A6CED2;
  --c-vibrant-9: #4796CF;
  --c-vibrant-10: #204075;
}

About this palette

This 10-color vibrant palette runs from Ice Yellow (#FFFDCE) as its lightest tone to Blackcurrant (#38153B) as its darkest. It blends Ice Yellow, Faded Sunlight, King Lizard, Lucky Green, Heirloom Blush, Purple Pleasures, Blackcurrant, Wave, Perfect Sky and Blue Expanse into a single set you can drop straight into a UI. Of its 45 color pairings, 11 meet the WCAG AA contrast threshold (4.5:1) for body text — the strongest is #FFFDCE on #38153B at 15.09:1.

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

Color breakdown

Ice Yellow #FFFDCE
RGB
rgb(255, 253, 206)
HSL
hsl(58, 100%, 90%)
Luminance
0.960
Faded Sunlight #FFCD6B
RGB
rgb(255, 205, 107)
HSL
hsl(40, 100%, 71%)
Luminance
0.660
King Lizard #78DA22
RGB
rgb(120, 218, 34)
HSL
hsl(92, 73%, 49%)
Luminance
0.543
Lucky Green #17854E
RGB
rgb(23, 133, 78)
HSL
hsl(150, 71%, 31%)
Luminance
0.175
Heirloom Blush #E66649
RGB
rgb(230, 102, 73)
HSL
hsl(11, 76%, 59%)
Luminance
0.268
Purple Pleasures #8349A6
RGB
rgb(131, 73, 166)
HSL
hsl(277, 39%, 47%)
Luminance
0.123
Blackcurrant #38153B
RGB
rgb(56, 21, 59)
HSL
hsl(295, 48%, 16%)
Luminance
0.017
Wave #A6CED2
RGB
rgb(166, 206, 210)
HSL
hsl(185, 33%, 74%)
Luminance
0.569
Perfect Sky #4796CF
RGB
rgb(71, 150, 207)
HSL
hsl(205, 59%, 55%)
Luminance
0.277
Blue Expanse #204075
RGB
rgb(32, 64, 117)
HSL
hsl(217, 57%, 29%)
Luminance
0.053

Contrast & accessibility

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

Aa #FFFDCE on #38153B 15.09:1 AAA
Aa #FFCD6B on #38153B 10.61:1 AAA
Aa #FFFDCE on #204075 9.84:1 AAA
Aa #38153B on #A6CED2 9.25:1 AAA
Aa #78DA22 on #38153B 8.85:1 AAA
Aa #FFCD6B on #204075 6.92:1 AA
Aa #A6CED2 on #204075 6.03:1 AA
Aa #FFFDCE on #8349A6 5.82:1 AA
Aa #78DA22 on #204075 5.78:1 AA
Aa #38153B on #4796CF 4.88:1 AA
Aa #E66649 on #38153B 4.75:1 AA
Aa #FFFDCE on #17854E 4.49:1 AA Large
Aa #FFCD6B on #8349A6 4.09:1 AA Large
Aa #8349A6 on #A6CED2 3.57:1 AA Large
Aa #78DA22 on #8349A6 3.42:1 AA Large
Aa #17854E on #38153B 3.36:1 AA Large
Aa #4796CF on #204075 3.18:1 AA Large
Aa #FFFDCE on #E66649 3.17:1 AA Large
Aa #FFCD6B on #17854E 3.15:1 AA Large
Aa #E66649 on #204075 3.10:1 AA Large
Aa #FFFDCE on #4796CF 3.09:1 AA Large
Aa #17854E on #A6CED2 2.75:1 Fail
Aa #78DA22 on #17854E 2.63:1 Fail
Aa #8349A6 on #38153B 2.59:1 Fail
Aa #FFCD6B on #E66649 2.23:1 Fail
Aa #17854E on #204075 2.19:1 Fail
Aa #FFCD6B on #4796CF 2.17:1 Fail
Aa #E66649 on #A6CED2 1.95:1 Fail
Aa #A6CED2 on #4796CF 1.90:1 Fail
Aa #8349A6 on #4796CF 1.88:1 Fail
Aa #78DA22 on #E66649 1.86:1 Fail
Aa #E66649 on #8349A6 1.83:1 Fail
Aa #78DA22 on #4796CF 1.81:1 Fail
Aa #FFFDCE on #78DA22 1.70:1 Fail
Aa #8349A6 on #204075 1.69:1 Fail
Aa #FFFDCE on #A6CED2 1.63:1 Fail
Aa #38153B on #204075 1.53:1 Fail
Aa #17854E on #4796CF 1.45:1 Fail
Aa #FFFDCE on #FFCD6B 1.42:1 Fail
Aa #17854E on #E66649 1.41:1 Fail
Aa #17854E on #8349A6 1.30:1 Fail
Aa #FFCD6B on #78DA22 1.20:1 Fail
Aa #FFCD6B on #A6CED2 1.15:1 Fail
Aa #78DA22 on #A6CED2 1.04:1 Fail
Aa #E66649 on #4796CF 1.03: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