Sign Up Sign Up
Primary 8

Primary 8

8-color palette · Cool · Mixed · Complementary harmony

Back to Library

Primary 8

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

Modify
Earthy 8 colors Cool Mixed Complementary isasstudio
Likes 56
Colors 8

CSS variables

:root {
  --c-earthy-1: #F5FFE0;
  --c-earthy-2: #1B1926;
  --c-earthy-3: #262157;
  --c-earthy-4: #323DA1;
  --c-earthy-5: #BD2F40;
  --c-earthy-6: #F0E143;
  --c-earthy-7: #6CA84D;
  --c-earthy-8: #23574D;
}

About this palette

This 8-color earthy palette runs from Milk Foam (#F5FFE0) as its lightest tone to Coarse Wool (#1B1926) as its darkest. It blends Milk Foam, Coarse Wool, Spacescape, Liquid Denim, Crimson Cloud, Golden Snitch, Fern Flash and Forest Biome into a single set you can drop straight into a UI. Of its 28 color pairings, 11 meet the WCAG AA contrast threshold (4.5:1) for body text — the strongest is #F5FFE0 on #1B1926 at 16.7:1.

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

Color breakdown

Milk Foam #F5FFE0
RGB
rgb(245, 255, 224)
HSL
hsl(79, 100%, 94%)
Luminance
0.963
Coarse Wool #1B1926
RGB
rgb(27, 25, 38)
HSL
hsl(249, 21%, 12%)
Luminance
0.011
Spacescape #262157
RGB
rgb(38, 33, 87)
HSL
hsl(246, 45%, 24%)
Luminance
0.022
Liquid Denim #323DA1
RGB
rgb(50, 61, 161)
HSL
hsl(234, 53%, 41%)
Luminance
0.066
Crimson Cloud #BD2F40
RGB
rgb(189, 47, 64)
HSL
hsl(353, 60%, 46%)
Luminance
0.132
Golden Snitch #F0E143
RGB
rgb(240, 225, 67)
HSL
hsl(55, 85%, 60%)
Luminance
0.728
Fern Flash #6CA84D
RGB
rgb(108, 168, 77)
HSL
hsl(100, 37%, 48%)
Luminance
0.317
Forest Biome #23574D
RGB
rgb(35, 87, 77)
HSL
hsl(168, 43%, 24%)
Luminance
0.077

Contrast & accessibility

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

Aa #F5FFE0 on #1B1926 16.70:1 AAA
Aa #F5FFE0 on #262157 14.10:1 AAA
Aa #1B1926 on #F0E143 12.82:1 AAA
Aa #262157 on #F0E143 10.82:1 AAA
Aa #F5FFE0 on #323DA1 8.74:1 AAA
Aa #F5FFE0 on #23574D 7.97:1 AAA
Aa #323DA1 on #F0E143 6.71:1 AA
Aa #F0E143 on #23574D 6.12:1 AA
Aa #1B1926 on #6CA84D 6.05:1 AA
Aa #F5FFE0 on #BD2F40 5.56:1 AA
Aa #262157 on #6CA84D 5.11:1 AA
Aa #BD2F40 on #F0E143 4.27:1 AA Large
Aa #323DA1 on #6CA84D 3.17:1 AA Large
Aa #1B1926 on #BD2F40 3.00:1 AA Large
Aa #6CA84D on #23574D 2.89:1 Fail
Aa #F5FFE0 on #6CA84D 2.76:1 Fail
Aa #262157 on #BD2F40 2.54:1 Fail
Aa #F0E143 on #6CA84D 2.12:1 Fail
Aa #1B1926 on #23574D 2.09:1 Fail
Aa #BD2F40 on #6CA84D 2.02:1 Fail
Aa #1B1926 on #323DA1 1.91:1 Fail
Aa #262157 on #23574D 1.77:1 Fail
Aa #262157 on #323DA1 1.61:1 Fail
Aa #323DA1 on #BD2F40 1.57:1 Fail
Aa #BD2F40 on #23574D 1.43:1 Fail
Aa #F5FFE0 on #F0E143 1.30:1 Fail
Aa #1B1926 on #262157 1.18:1 Fail
Aa #323DA1 on #23574D 1.10: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