Sign Up Sign Up
Cardplay

Cardplay

12-color palette · Neutral · Mixed · Complementary harmony

Back to Library

Cardplay

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

Modify
Earthy 12 colors Neutral Mixed Complementary 12color colorful cards primary
Likes 48
Colors 12

CSS variables

:root {
  --c-earthy-1: #282828;
  --c-earthy-2: #464CA5;
  --c-earthy-3: #B23535;
  --c-earthy-4: #38AD5F;
  --c-earthy-5: #D9BD57;
  --c-earthy-6: #C0BBB3;
  --c-earthy-7: #7C7774;
  --c-earthy-8: #6F87C4;
  --c-earthy-9: #D58C70;
  --c-earthy-10: #82DB84;
  --c-earthy-11: #E4DD7A;
  --c-earthy-12: #EEEADE;
}

About this palette

This 12-color earthy palette runs from Horseradish Cream (#EEEADE) as its lightest tone to Dire Wolf (#282828) as its darkest. It blends Dire Wolf, Dazzling Blue, Red Contrast, Artificial Turf, Golden Bass, Viaduct, Amazon Stone, Violets Are Blue, Terra Cotta Pot, Electric Lettuce, Lustrous Yellow and Horseradish Cream into a single set you can drop straight into a UI. Of its 66 color pairings, 10 meet the WCAG AA contrast threshold (4.5:1) for body text — the strongest is #282828 on #EEEADE at 12.26:1.

Grounded, natural tones — suits sustainability/organic brands, coffee shops, outdoor gear, and warm editorial typography.

Color breakdown

Dire Wolf #282828
RGB
rgb(40, 40, 40)
HSL
hsl(0, 0%, 16%)
Luminance
0.021
Dazzling Blue #464CA5
RGB
rgb(70, 76, 165)
HSL
hsl(236, 40%, 46%)
Luminance
0.092
Red Contrast #B23535
RGB
rgb(178, 53, 53)
HSL
hsl(0, 54%, 45%)
Luminance
0.123
Artificial Turf #38AD5F
RGB
rgb(56, 173, 95)
HSL
hsl(140, 51%, 45%)
Luminance
0.316
Golden Bass #D9BD57
RGB
rgb(217, 189, 87)
HSL
hsl(47, 63%, 60%)
Luminance
0.518
Viaduct #C0BBB3
RGB
rgb(192, 187, 179)
HSL
hsl(37, 9%, 73%)
Luminance
0.500
Amazon Stone #7C7774
RGB
rgb(124, 119, 116)
HSL
hsl(23, 3%, 47%)
Luminance
0.187
Violets Are Blue #6F87C4
RGB
rgb(111, 135, 196)
HSL
hsl(223, 42%, 60%)
Luminance
0.247
Terra Cotta Pot #D58C70
RGB
rgb(213, 140, 112)
HSL
hsl(17, 55%, 64%)
Luminance
0.341
Electric Lettuce #82DB84
RGB
rgb(130, 219, 132)
HSL
hsl(121, 55%, 68%)
Luminance
0.571
Lustrous Yellow #E4DD7A
RGB
rgb(228, 221, 122)
HSL
hsl(56, 66%, 69%)
Luminance
0.696
Horseradish Cream #EEEADE
RGB
rgb(238, 234, 222)
HSL
hsl(45, 32%, 90%)
Luminance
0.823

Contrast & accessibility

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

Aa #282828 on #EEEADE 12.26:1 AAA
Aa #282828 on #E4DD7A 10.48:1 AAA
Aa #282828 on #82DB84 8.72:1 AAA
Aa #282828 on #D9BD57 7.98:1 AAA
Aa #282828 on #C0BBB3 7.72:1 AAA
Aa #464CA5 on #EEEADE 6.15:1 AA
Aa #282828 on #D58C70 5.49:1 AA
Aa #464CA5 on #E4DD7A 5.26:1 AA
Aa #282828 on #38AD5F 5.13:1 AA
Aa #B23535 on #EEEADE 5.06:1 AA
Aa #464CA5 on #82DB84 4.38:1 AA Large
Aa #B23535 on #E4DD7A 4.32:1 AA Large
Aa #282828 on #6F87C4 4.17:1 AA Large
Aa #464CA5 on #D9BD57 4.01:1 AA Large
Aa #464CA5 on #C0BBB3 3.88:1 AA Large
Aa #7C7774 on #EEEADE 3.68:1 AA Large
Aa #B23535 on #82DB84 3.59:1 AA Large
Aa #282828 on #7C7774 3.33:1 AA Large
Aa #B23535 on #D9BD57 3.29:1 AA Large
Aa #B23535 on #C0BBB3 3.19:1 AA Large
Aa #7C7774 on #E4DD7A 3.14:1 AA Large
Aa #6F87C4 on #EEEADE 2.94:1 Fail
Aa #464CA5 on #D58C70 2.75:1 Fail
Aa #7C7774 on #82DB84 2.61:1 Fail
Aa #464CA5 on #38AD5F 2.58:1 Fail
Aa #6F87C4 on #E4DD7A 2.51:1 Fail
Aa #282828 on #B23535 2.42:1 Fail
Aa #38AD5F on #EEEADE 2.39:1 Fail
Aa #D9BD57 on #7C7774 2.39:1 Fail
Aa #C0BBB3 on #7C7774 2.32:1 Fail
Aa #B23535 on #D58C70 2.26:1 Fail
Aa #D58C70 on #EEEADE 2.23:1 Fail
Aa #B23535 on #38AD5F 2.12:1 Fail
Aa #464CA5 on #6F87C4 2.09:1 Fail
Aa #6F87C4 on #82DB84 2.09:1 Fail
Aa #38AD5F on #E4DD7A 2.04:1 Fail
Aa #282828 on #464CA5 1.99:1 Fail
Aa #D9BD57 on #6F87C4 1.91:1 Fail
Aa #D58C70 on #E4DD7A 1.91:1 Fail
Aa #C0BBB3 on #6F87C4 1.85:1 Fail
Aa #B23535 on #6F87C4 1.72:1 Fail
Aa #38AD5F on #82DB84 1.70:1 Fail
Aa #464CA5 on #7C7774 1.67:1 Fail
Aa #7C7774 on #D58C70 1.65:1 Fail
Aa #C0BBB3 on #EEEADE 1.59:1 Fail
Aa #D58C70 on #82DB84 1.59:1 Fail
Aa #38AD5F on #D9BD57 1.55:1 Fail
Aa #38AD5F on #7C7774 1.54:1 Fail
Aa #D9BD57 on #EEEADE 1.54:1 Fail
Aa #38AD5F on #C0BBB3 1.50:1 Fail
Aa #D9BD57 on #D58C70 1.45:1 Fail
Aa #C0BBB3 on #D58C70 1.41:1 Fail
Aa #82DB84 on #EEEADE 1.41:1 Fail
Aa #B23535 on #7C7774 1.37:1 Fail
Aa #C0BBB3 on #E4DD7A 1.36:1 Fail
Aa #6F87C4 on #D58C70 1.32:1 Fail
Aa #D9BD57 on #E4DD7A 1.31:1 Fail
Aa #7C7774 on #6F87C4 1.25:1 Fail
Aa #38AD5F on #6F87C4 1.23:1 Fail
Aa #464CA5 on #B23535 1.22:1 Fail
Aa #82DB84 on #E4DD7A 1.20:1 Fail
Aa #E4DD7A on #EEEADE 1.17:1 Fail
Aa #C0BBB3 on #82DB84 1.13:1 Fail
Aa #D9BD57 on #82DB84 1.09:1 Fail
Aa #38AD5F on #D58C70 1.07:1 Fail
Aa #D9BD57 on #C0BBB3 1.03:1 Fail

Similar palettes

#EDF1D6 #9DC08B #609966 #40513B
4 colors
#F5F7F8 #F4CE14 #495E57 #45474B
4 colors
#222831 #393E46 #FFD369 #EEEEEE
4 colors
#000000 #52057B #892CDC #BC6FF1
4 colors
#213555 #3E5879 #D8C4B6 #F5EFE7
4 colors
#F5EFE7 #D8C4B6 #4F709C #213555
4 colors
#191A19 #1E5128 #4E9F3D #D8E9A8
4 colors
#352F44 #5C5470 #B9B4C7 #FAF0E6
4 colors