Sign Up Sign Up
DUMPTRUCK 12

DUMPTRUCK 12

12-color palette · Cool · Mixed · Complementary harmony

Back to Library

DUMPTRUCK 12

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

Modify
Earthy 12 colors Cool Mixed Complementary cyan fydotiles highcontrast rust
Likes 15
Colors 12

CSS variables

:root {
  --c-earthy-1: #2DD7C9;
  --c-earthy-2: #0074B7;
  --c-earthy-3: #4C3380;
  --c-earthy-4: #3E002E;
  --c-earthy-5: #110000;
  --c-earthy-6: #4F4F4F;
  --c-earthy-7: #9E9E9E;
  --c-earthy-8: #F0F0F0;
  --c-earthy-9: #FFD170;
  --c-earthy-10: #C97636;
  --c-earthy-11: #A14D3F;
  --c-earthy-12: #82674A;
}

About this palette

This 12-color earthy palette runs from Snowflake (#F0F0F0) as its lightest tone to Dark Matter (#110000) as its darkest. It blends Turquoise Panic, Biloxi Blue, Galactic Compass, Dark Sanctuary, Dark Matter, Black Oak, Mortar Grey, Snowflake, Banana Bread, October, Arabian Red and Twilight Jungle into a single set you can drop straight into a UI. Of its 66 color pairings, 18 meet the WCAG AA contrast threshold (4.5:1) for body text — the strongest is #110000 on #F0F0F0 at 18:1.

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

Color breakdown

Turquoise Panic #2DD7C9
RGB
rgb(45, 215, 201)
HSL
hsl(175, 68%, 51%)
Luminance
0.534
Biloxi Blue #0074B7
RGB
rgb(0, 116, 183)
HSL
hsl(202, 100%, 36%)
Luminance
0.159
Galactic Compass #4C3380
RGB
rgb(76, 51, 128)
HSL
hsl(259, 43%, 35%)
Luminance
0.055
Dark Sanctuary #3E002E
RGB
rgb(62, 0, 46)
HSL
hsl(315, 100%, 12%)
Luminance
0.012
Dark Matter #110000
RGB
rgb(17, 0, 0)
HSL
hsl(0, 100%, 3%)
Luminance
0.001
Black Oak #4F4F4F
RGB
rgb(79, 79, 79)
HSL
hsl(0, 0%, 31%)
Luminance
0.078
Mortar Grey #9E9E9E
RGB
rgb(158, 158, 158)
HSL
hsl(0, 0%, 62%)
Luminance
0.342
Snowflake #F0F0F0
RGB
rgb(240, 240, 240)
HSL
hsl(0, 0%, 94%)
Luminance
0.871
Banana Bread #FFD170
RGB
rgb(255, 209, 112)
HSL
hsl(41, 100%, 72%)
Luminance
0.680
October #C97636
RGB
rgb(201, 118, 54)
HSL
hsl(26, 58%, 50%)
Luminance
0.256
Arabian Red #A14D3F
RGB
rgb(161, 77, 63)
HSL
hsl(9, 44%, 44%)
Luminance
0.132
Twilight Jungle #82674A
RGB
rgb(130, 103, 74)
HSL
hsl(31, 27%, 40%)
Luminance
0.149

Contrast & accessibility

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

Aa #110000 on #F0F0F0 18.00:1 AAA
Aa #3E002E on #F0F0F0 14.81:1 AAA
Aa #110000 on #FFD170 14.27:1 AAA
Aa #3E002E on #FFD170 11.74:1 AAA
Aa #2DD7C9 on #110000 11.40:1 AAA
Aa #2DD7C9 on #3E002E 9.38:1 AAA
Aa #4C3380 on #F0F0F0 8.81:1 AAA
Aa #110000 on #9E9E9E 7.66:1 AAA
Aa #4F4F4F on #F0F0F0 7.19:1 AAA
Aa #4C3380 on #FFD170 6.98:1 AA
Aa #3E002E on #9E9E9E 6.30:1 AA
Aa #110000 on #C97636 5.99:1 AA
Aa #4F4F4F on #FFD170 5.70:1 AA
Aa #2DD7C9 on #4C3380 5.58:1 AA
Aa #F0F0F0 on #A14D3F 5.05:1 AA
Aa #3E002E on #C97636 4.93:1 AA
Aa #F0F0F0 on #82674A 4.62:1 AA
Aa #2DD7C9 on #4F4F4F 4.55:1 AA
Aa #0074B7 on #F0F0F0 4.41:1 AA Large
Aa #0074B7 on #110000 4.08:1 AA Large
Aa #FFD170 on #A14D3F 4.00:1 AA Large
Aa #110000 on #82674A 3.90:1 AA Large
Aa #4C3380 on #9E9E9E 3.75:1 AA Large
Aa #FFD170 on #82674A 3.66:1 AA Large
Aa #110000 on #A14D3F 3.56:1 AA Large
Aa #0074B7 on #FFD170 3.49:1 AA Large
Aa #0074B7 on #3E002E 3.36:1 AA Large
Aa #3E002E on #82674A 3.21:1 AA Large
Aa #2DD7C9 on #A14D3F 3.20:1 AA Large
Aa #4F4F4F on #9E9E9E 3.06:1 AA Large
Aa #F0F0F0 on #C97636 3.01:1 AA Large
Aa #2DD7C9 on #82674A 2.93:1 Fail
Aa #4C3380 on #C97636 2.93:1 Fail
Aa #3E002E on #A14D3F 2.93:1 Fail
Aa #2DD7C9 on #0074B7 2.79:1 Fail
Aa #110000 on #4F4F4F 2.50:1 Fail
Aa #4F4F4F on #C97636 2.39:1 Fail
Aa #FFD170 on #C97636 2.38:1 Fail
Aa #9E9E9E on #F0F0F0 2.35:1 Fail
Aa #9E9E9E on #A14D3F 2.15:1 Fail
Aa #3E002E on #4F4F4F 2.06:1 Fail
Aa #4C3380 on #110000 2.04:1 Fail
Aa #0074B7 on #4C3380 2.00:1 Fail
Aa #9E9E9E on #82674A 1.97:1 Fail
Aa #2DD7C9 on #C97636 1.91:1 Fail
Aa #4C3380 on #82674A 1.91:1 Fail
Aa #0074B7 on #9E9E9E 1.87:1 Fail
Aa #9E9E9E on #FFD170 1.86:1 Fail
Aa #4C3380 on #A14D3F 1.74:1 Fail
Aa #4C3380 on #3E002E 1.68:1 Fail
Aa #C97636 on #A14D3F 1.68:1 Fail
Aa #0074B7 on #4F4F4F 1.63:1 Fail
Aa #2DD7C9 on #F0F0F0 1.58:1 Fail
Aa #4F4F4F on #82674A 1.56:1 Fail
Aa #C97636 on #82674A 1.54:1 Fail
Aa #2DD7C9 on #9E9E9E 1.49:1 Fail
Aa #0074B7 on #C97636 1.47:1 Fail
Aa #4F4F4F on #A14D3F 1.42:1 Fail
Aa #9E9E9E on #C97636 1.28:1 Fail
Aa #F0F0F0 on #FFD170 1.26:1 Fail
Aa #2DD7C9 on #FFD170 1.25:1 Fail
Aa #4C3380 on #4F4F4F 1.23:1 Fail
Aa #3E002E on #110000 1.22:1 Fail
Aa #0074B7 on #A14D3F 1.15:1 Fail
Aa #A14D3F on #82674A 1.09:1 Fail
Aa #0074B7 on #82674A 1.05: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