Sign Up Sign Up
Gravel Slush Grass

Gravel Slush Grass

10-color palette · Cool · Mixed · Complementary harmony

Back to Library

Gravel Slush Grass

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

Modify
Earthy 10 colors Cool Mixed Complementary polyphrog retro aahhhh
Likes 15
Colors 10

CSS variables

:root {
  --c-earthy-1: #162121;
  --c-earthy-2: #5B3122;
  --c-earthy-3: #745446;
  --c-earthy-4: #91908B;
  --c-earthy-5: #E5E5E5;
  --c-earthy-6: #7FADBC;
  --c-earthy-7: #696D8D;
  --c-earthy-8: #443E6A;
  --c-earthy-9: #6E854C;
  --c-earthy-10: #B8C063;
}

About this palette

This 10-color earthy palette runs from Cold Morning (#E5E5E5) as its lightest tone to Black Feather (#162121) as its darkest. It blends Black Feather, Wild Boar, Briar, Four-Wheel Grey, Cold Morning, Open Seas, Dark Prince, Evening Mauve, Happy Camper and Avocado Cream into a single set you can drop straight into a UI. Of its 45 color pairings, 10 meet the WCAG AA contrast threshold (4.5:1) for body text — the strongest is #162121 on #E5E5E5 at 13.09:1.

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

Color breakdown

Black Feather #162121
RGB
rgb(22, 33, 33)
HSL
hsl(180, 20%, 11%)
Luminance
0.014
Wild Boar #5B3122
RGB
rgb(91, 49, 34)
HSL
hsl(16, 46%, 25%)
Luminance
0.045
Briar #745446
RGB
rgb(116, 84, 70)
HSL
hsl(18, 25%, 36%)
Luminance
0.105
Four-Wheel Grey #91908B
RGB
rgb(145, 144, 139)
HSL
hsl(50, 3%, 56%)
Luminance
0.278
Cold Morning #E5E5E5
RGB
rgb(229, 229, 229)
HSL
hsl(0, 0%, 90%)
Luminance
0.784
Open Seas #7FADBC
RGB
rgb(127, 173, 188)
HSL
hsl(195, 31%, 62%)
Luminance
0.380
Dark Prince #696D8D
RGB
rgb(105, 109, 141)
HSL
hsl(233, 15%, 48%)
Luminance
0.159
Evening Mauve #443E6A
RGB
rgb(68, 62, 106)
HSL
hsl(248, 26%, 33%)
Luminance
0.057
Happy Camper #6E854C
RGB
rgb(110, 133, 76)
HSL
hsl(84, 27%, 41%)
Luminance
0.206
Avocado Cream #B8C063
RGB
rgb(184, 192, 99)
HSL
hsl(65, 42%, 57%)
Luminance
0.488

Contrast & accessibility

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

Aa #162121 on #E5E5E5 13.09:1 AAA
Aa #5B3122 on #E5E5E5 8.74:1 AAA
Aa #162121 on #B8C063 8.45:1 AAA
Aa #E5E5E5 on #443E6A 7.78:1 AAA
Aa #162121 on #7FADBC 6.76:1 AA
Aa #5B3122 on #B8C063 5.64:1 AA
Aa #745446 on #E5E5E5 5.38:1 AA
Aa #162121 on #91908B 5.16:1 AA
Aa #443E6A on #B8C063 5.02:1 AA
Aa #5B3122 on #7FADBC 4.51:1 AA
Aa #162121 on #6E854C 4.02:1 AA Large
Aa #7FADBC on #443E6A 4.02:1 AA Large
Aa #E5E5E5 on #696D8D 4.00:1 AA Large
Aa #745446 on #B8C063 3.47:1 AA Large
Aa #5B3122 on #91908B 3.44:1 AA Large
Aa #162121 on #696D8D 3.28:1 AA Large
Aa #E5E5E5 on #6E854C 3.25:1 AA Large
Aa #91908B on #443E6A 3.06:1 AA Large
Aa #745446 on #7FADBC 2.78:1 Fail
Aa #5B3122 on #6E854C 2.69:1 Fail
Aa #696D8D on #B8C063 2.58:1 Fail
Aa #91908B on #E5E5E5 2.54:1 Fail
Aa #162121 on #745446 2.43:1 Fail
Aa #443E6A on #6E854C 2.39:1 Fail
Aa #5B3122 on #696D8D 2.19:1 Fail
Aa #745446 on #91908B 2.12:1 Fail
Aa #6E854C on #B8C063 2.10:1 Fail
Aa #7FADBC on #696D8D 2.06:1 Fail
Aa #696D8D on #443E6A 1.95:1 Fail
Aa #E5E5E5 on #7FADBC 1.94:1 Fail
Aa #162121 on #443E6A 1.68:1 Fail
Aa #7FADBC on #6E854C 1.68:1 Fail
Aa #745446 on #6E854C 1.65:1 Fail
Aa #91908B on #B8C063 1.64:1 Fail
Aa #5B3122 on #745446 1.62:1 Fail
Aa #91908B on #696D8D 1.57:1 Fail
Aa #E5E5E5 on #B8C063 1.55:1 Fail
Aa #162121 on #5B3122 1.50:1 Fail
Aa #745446 on #443E6A 1.45:1 Fail
Aa #745446 on #696D8D 1.35:1 Fail
Aa #91908B on #7FADBC 1.31:1 Fail
Aa #91908B on #6E854C 1.28:1 Fail
Aa #7FADBC on #B8C063 1.25:1 Fail
Aa #696D8D on #6E854C 1.23:1 Fail
Aa #5B3122 on #443E6A 1.12: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