Sign Up Sign Up
Shido 10

Shido 10

10-color palette · Warm · Mixed · Complementary harmony

Back to Library

Shido 10

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

Modify
Earthy 10 colors Warm Mixed Complementary 10 shido shido10
Likes 33
Colors 10

CSS variables

:root {
  --c-earthy-1: #000000;
  --c-earthy-2: #58122B;
  --c-earthy-3: #AF4040;
  --c-earthy-4: #FAA174;
  --c-earthy-5: #FFC783;
  --c-earthy-6: #359097;
  --c-earthy-7: #22337D;
  --c-earthy-8: #88AEC0;
  --c-earthy-9: #C4FFF0;
  --c-earthy-10: #F7F7F7;
}

About this palette

This 10-color earthy palette runs from Lynx White (#F7F7F7) as its lightest tone to Black (#000000) as its darkest. It blends Black, Brown Chocolate, Landjäger, Usugaki Persimmon, Apricot Butter, Aqueous, Deep Space Royal, Chilly Blue, Arabica Mint and Lynx White into a single set you can drop straight into a UI. Of its 45 color pairings, 18 meet the WCAG AA contrast threshold (4.5:1) for body text — the strongest is #000000 on #F7F7F7 at 19.6:1.

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

Color breakdown

Black #000000
RGB
rgb(0, 0, 0)
HSL
hsl(0, 0%, 0%)
Luminance
0.000
Brown Chocolate #58122B
RGB
rgb(88, 18, 43)
HSL
hsl(339, 66%, 21%)
Luminance
0.027
Landjäger #AF4040
RGB
rgb(175, 64, 64)
HSL
hsl(0, 46%, 47%)
Luminance
0.132
Usugaki Persimmon #FAA174
RGB
rgb(250, 161, 116)
HSL
hsl(20, 93%, 72%)
Luminance
0.471
Apricot Butter #FFC783
RGB
rgb(255, 199, 131)
HSL
hsl(33, 100%, 76%)
Luminance
0.638
Aqueous #359097
RGB
rgb(53, 144, 151)
HSL
hsl(184, 48%, 40%)
Luminance
0.229
Deep Space Royal #22337D
RGB
rgb(34, 51, 125)
HSL
hsl(229, 57%, 31%)
Luminance
0.042
Chilly Blue #88AEC0
RGB
rgb(136, 174, 192)
HSL
hsl(199, 31%, 64%)
Luminance
0.393
Arabica Mint #C4FFF0
RGB
rgb(196, 255, 240)
HSL
hsl(165, 100%, 88%)
Luminance
0.896
Lynx White #F7F7F7
RGB
rgb(247, 247, 247)
HSL
hsl(0, 0%, 97%)
Luminance
0.930

Contrast & accessibility

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

Aa #000000 on #F7F7F7 19.60:1 AAA
Aa #000000 on #C4FFF0 18.91:1 AAA
Aa #000000 on #FFC783 13.75:1 AAA
Aa #58122B on #F7F7F7 12.76:1 AAA
Aa #58122B on #C4FFF0 12.31:1 AAA
Aa #22337D on #F7F7F7 10.67:1 AAA
Aa #000000 on #FAA174 10.41:1 AAA
Aa #22337D on #C4FFF0 10.29:1 AAA
Aa #58122B on #FFC783 8.95:1 AAA
Aa #000000 on #88AEC0 8.86:1 AAA
Aa #FFC783 on #22337D 7.48:1 AAA
Aa #58122B on #FAA174 6.78:1 AA
Aa #58122B on #88AEC0 5.77:1 AA
Aa #FAA174 on #22337D 5.67:1 AA
Aa #000000 on #359097 5.59:1 AA
Aa #AF4040 on #F7F7F7 5.40:1 AA
Aa #AF4040 on #C4FFF0 5.21:1 AA
Aa #22337D on #88AEC0 4.82:1 AA
Aa #AF4040 on #FFC783 3.79:1 AA Large
Aa #58122B on #359097 3.64:1 AA Large
Aa #000000 on #AF4040 3.63:1 AA Large
Aa #359097 on #F7F7F7 3.51:1 AA Large
Aa #359097 on #C4FFF0 3.38:1 AA Large
Aa #359097 on #22337D 3.04:1 AA Large
Aa #AF4040 on #FAA174 2.87:1 Fail
Aa #FFC783 on #359097 2.46:1 Fail
Aa #AF4040 on #88AEC0 2.44:1 Fail
Aa #58122B on #AF4040 2.36:1 Fail
Aa #88AEC0 on #F7F7F7 2.21:1 Fail
Aa #88AEC0 on #C4FFF0 2.13:1 Fail
Aa #AF4040 on #22337D 1.98:1 Fail
Aa #FAA174 on #F7F7F7 1.88:1 Fail
Aa #FAA174 on #359097 1.86:1 Fail
Aa #000000 on #22337D 1.84:1 Fail
Aa #FAA174 on #C4FFF0 1.82:1 Fail
Aa #359097 on #88AEC0 1.59:1 Fail
Aa #FFC783 on #88AEC0 1.55:1 Fail
Aa #000000 on #58122B 1.54:1 Fail
Aa #AF4040 on #359097 1.54:1 Fail
Aa #FFC783 on #F7F7F7 1.43:1 Fail
Aa #FFC783 on #C4FFF0 1.38:1 Fail
Aa #FAA174 on #FFC783 1.32:1 Fail
Aa #58122B on #22337D 1.20:1 Fail
Aa #FAA174 on #88AEC0 1.18:1 Fail
Aa #C4FFF0 on #F7F7F7 1.04:1 Fail

Similar palettes

#F9ED69 #F08A5D #B83B5E #6A2C70
4 colors
#7D5A50 #B4846C #E5B299 #FCDEC0
4 colors
#FFF8EA #9E7676 #815B5B #594545
4 colors
#2C3639 #3F4E4F #A27B5C #DCD7C9
4 colors
#F67280 #C06C84 #6C5B7B #355C7D
4 colors
#2B2E4A #E84545 #903749 #53354A
4 colors
#E5D9B6 #A4BE7B #5F8D4E #285430
4 colors
#A9907E #F3DEBA #ABC4AA #675D50
4 colors