Sign Up Sign Up
18 Bytes

18 Bytes

8-color palette · Cool · Mixed · Complementary harmony

Back to Library

18 Bytes

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

Modify
Earthy 8 colors Cool Mixed Complementary blue 8colors cold 8
Likes 49
Colors 8

CSS variables

:root {
  --c-earthy-1: #C8D0D8;
  --c-earthy-2: #C8C8A0;
  --c-earthy-3: #B89888;
  --c-earthy-4: #A07098;
  --c-earthy-5: #302828;
  --c-earthy-6: #283058;
  --c-earthy-7: #506878;
  --c-earthy-8: #609068;
}

About this palette

This 8-color earthy palette runs from Quarzo (#C8D0D8) as its lightest tone to Livid Brown (#302828) as its darkest. It blends Quarzo, Watercress Pesto, Cinnamon Roast, Drama Queen, Livid Brown, Boatswain, Prairie Denim and Stone Green into a single set you can drop straight into a UI. Of its 28 color pairings, 6 meet the WCAG AA contrast threshold (4.5:1) for body text — the strongest is #C8D0D8 on #302828 at 9.23:1.

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

Color breakdown

Quarzo #C8D0D8
RGB
rgb(200, 208, 216)
HSL
hsl(210, 17%, 82%)
Luminance
0.624
Watercress Pesto #C8C8A0
RGB
rgb(200, 200, 160)
HSL
hsl(60, 27%, 71%)
Luminance
0.561
Cinnamon Roast #B89888
RGB
rgb(184, 152, 136)
HSL
hsl(20, 25%, 63%)
Luminance
0.344
Drama Queen #A07098
RGB
rgb(160, 112, 152)
HSL
hsl(310, 20%, 53%)
Luminance
0.213
Livid Brown #302828
RGB
rgb(48, 40, 40)
HSL
hsl(0, 9%, 17%)
Luminance
0.023
Boatswain #283058
RGB
rgb(40, 48, 88)
HSL
hsl(230, 38%, 25%)
Luminance
0.033
Prairie Denim #506878
RGB
rgb(80, 104, 120)
HSL
hsl(204, 20%, 39%)
Luminance
0.130
Stone Green #609068
RGB
rgb(96, 144, 104)
HSL
hsl(130, 20%, 47%)
Luminance
0.234

Contrast & accessibility

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

Aa #C8D0D8 on #302828 9.23:1 AAA
Aa #C8C8A0 on #302828 8.37:1 AAA
Aa #C8D0D8 on #283058 8.14:1 AAA
Aa #C8C8A0 on #283058 7.39:1 AAA
Aa #B89888 on #302828 5.40:1 AA
Aa #B89888 on #283058 4.77:1 AA
Aa #302828 on #609068 3.90:1 AA Large
Aa #C8D0D8 on #506878 3.75:1 AA Large
Aa #A07098 on #302828 3.61:1 AA Large
Aa #283058 on #609068 3.44:1 AA Large
Aa #C8C8A0 on #506878 3.40:1 AA Large
Aa #A07098 on #283058 3.18:1 AA Large
Aa #C8D0D8 on #A07098 2.56:1 Fail
Aa #302828 on #506878 2.46:1 Fail
Aa #C8D0D8 on #609068 2.37:1 Fail
Aa #C8C8A0 on #A07098 2.32:1 Fail
Aa #B89888 on #506878 2.19:1 Fail
Aa #283058 on #506878 2.17:1 Fail
Aa #C8C8A0 on #609068 2.15:1 Fail
Aa #C8D0D8 on #B89888 1.71:1 Fail
Aa #506878 on #609068 1.58:1 Fail
Aa #C8C8A0 on #B89888 1.55:1 Fail
Aa #B89888 on #A07098 1.50:1 Fail
Aa #A07098 on #506878 1.47:1 Fail
Aa #B89888 on #609068 1.39:1 Fail
Aa #302828 on #283058 1.13:1 Fail
Aa #C8D0D8 on #C8C8A0 1.10:1 Fail
Aa #A07098 on #609068 1.08: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