Sign Up Sign Up
BASIC BIT

BASIC BIT

9-color palette · Warm · Light · Complementary harmony

Back to Library

BASIC BIT

9-color palette · Warm temperature · Light tone · Complementary harmony

Modify
Earthy 9 colors Warm Light Complementary simple lowsaturation rainbow
Likes 107
Colors 9

CSS variables

:root {
  --c-earthy-1: #D76C6C;
  --c-earthy-2: #F49461;
  --c-earthy-3: #FFDD7E;
  --c-earthy-4: #87BF72;
  --c-earthy-5: #6A94B1;
  --c-earthy-6: #73577E;
  --c-earthy-7: #FFFCF1;
  --c-earthy-8: #BEBEB4;
  --c-earthy-9: #3E3E3E;
}

About this palette

This 9-color earthy palette runs from Granulated Sugar (#FFFCF1) as its lightest tone to Black Lacquer (#3E3E3E) as its darkest. It blends Coral Expression, Brown Sand, Cup Noodles, Laudable Lime, Aragonite Blue, Dr Who, Granulated Sugar, Light Year and Black Lacquer into a single set you can drop straight into a UI. Of its 36 color pairings, 7 meet the WCAG AA contrast threshold (4.5:1) for body text — the strongest is #FFFCF1 on #3E3E3E at 10.41:1.

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

Color breakdown

Coral Expression #D76C6C
RGB
rgb(215, 108, 108)
HSL
hsl(0, 57%, 63%)
Luminance
0.263
Brown Sand #F49461
RGB
rgb(244, 148, 97)
HSL
hsl(21, 87%, 67%)
Luminance
0.413
Cup Noodles #FFDD7E
RGB
rgb(255, 221, 126)
HSL
hsl(44, 100%, 75%)
Luminance
0.745
Laudable Lime #87BF72
RGB
rgb(135, 191, 114)
HSL
hsl(104, 38%, 60%)
Luminance
0.436
Aragonite Blue #6A94B1
RGB
rgb(106, 148, 177)
HSL
hsl(205, 31%, 55%)
Luminance
0.274
Dr Who #73577E
RGB
rgb(115, 87, 126)
HSL
hsl(283, 18%, 42%)
Luminance
0.120
Granulated Sugar #FFFCF1
RGB
rgb(255, 252, 241)
HSL
hsl(47, 100%, 97%)
Luminance
0.972
Light Year #BEBEB4
RGB
rgb(190, 190, 180)
HSL
hsl(60, 7%, 73%)
Luminance
0.511
Black Lacquer #3E3E3E
RGB
rgb(62, 62, 62)
HSL
hsl(0, 0%, 24%)
Luminance
0.048

Contrast & accessibility

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

Aa #FFFCF1 on #3E3E3E 10.41:1 AAA
Aa #FFDD7E on #3E3E3E 8.10:1 AAA
Aa #73577E on #FFFCF1 6.03:1 AA
Aa #BEBEB4 on #3E3E3E 5.71:1 AA
Aa #87BF72 on #3E3E3E 4.95:1 AA
Aa #F49461 on #3E3E3E 4.71:1 AA
Aa #FFDD7E on #73577E 4.68:1 AA
Aa #6A94B1 on #3E3E3E 3.30:1 AA Large
Aa #73577E on #BEBEB4 3.30:1 AA Large
Aa #D76C6C on #FFFCF1 3.27:1 AA Large
Aa #D76C6C on #3E3E3E 3.18:1 AA Large
Aa #6A94B1 on #FFFCF1 3.15:1 AA Large
Aa #87BF72 on #73577E 2.87:1 Fail
Aa #F49461 on #73577E 2.73:1 Fail
Aa #D76C6C on #FFDD7E 2.54:1 Fail
Aa #FFDD7E on #6A94B1 2.45:1 Fail
Aa #F49461 on #FFFCF1 2.21:1 Fail
Aa #87BF72 on #FFFCF1 2.10:1 Fail
Aa #6A94B1 on #73577E 1.91:1 Fail
Aa #D76C6C on #73577E 1.84:1 Fail
Aa #FFFCF1 on #BEBEB4 1.82:1 Fail
Aa #D76C6C on #BEBEB4 1.79:1 Fail
Aa #6A94B1 on #BEBEB4 1.73:1 Fail
Aa #73577E on #3E3E3E 1.73:1 Fail
Aa #F49461 on #FFDD7E 1.72:1 Fail
Aa #FFDD7E on #87BF72 1.63:1 Fail
Aa #D76C6C on #87BF72 1.56:1 Fail
Aa #87BF72 on #6A94B1 1.50:1 Fail
Aa #D76C6C on #F49461 1.48:1 Fail
Aa #F49461 on #6A94B1 1.43:1 Fail
Aa #FFDD7E on #BEBEB4 1.42:1 Fail
Aa #FFDD7E on #FFFCF1 1.29:1 Fail
Aa #F49461 on #BEBEB4 1.21:1 Fail
Aa #87BF72 on #BEBEB4 1.15:1 Fail
Aa #F49461 on #87BF72 1.05:1 Fail
Aa #D76C6C on #6A94B1 1.04:1 Fail

Similar palettes

#FFF5E4 #FFE3E1 #FFD1D1 #FF9494
4 colors
#F9F5F6 #F8E8EE #FDCEDF #F2BED1
4 colors
#FFC7C7 #FFE2E2 #F6F6F6 #8785A2
4 colors
#AD8B73 #CEAB93 #E3CAA5 #FFFBE9
4 colors
#F38181 #FCE38A #EAFFD0 #95E1D3
4 colors
#B7C4CF #EEE3CB #D7C0AE #967E76
4 colors
#FFEDDB #EDCDBB #E3B7A0 #BF9270
4 colors
#8D7B68 #A4907C #C8B6A6 #F1DEC9
4 colors