Sign Up Sign Up
TY Legend Of The Loop 7

TY Legend Of The Loop 7

7-color palette · Neutral · Mixed · Complementary harmony

Back to Library

TY Legend Of The Loop 7

7-color palette · Neutral temperature · Mixed tone · Complementary harmony

Modify
Earthy 7 colors Neutral Mixed Complementary loophero hero loop
Likes 10
Colors 7

CSS variables

:root {
  --c-earthy-1: #A4BEC1;
  --c-earthy-2: #9FA089;
  --c-earthy-3: #726D66;
  --c-earthy-4: #493A39;
  --c-earthy-5: #815938;
  --c-earthy-6: #602217;
  --c-earthy-7: #1C2134;
}

About this palette

This 7-color earthy palette runs from Clear Vista (#A4BEC1) as its lightest tone to Eclipse Elixir (#1C2134) as its darkest. It blends Clear Vista, Potting Moss, Ironside Grey, Warm Operator’s Overalls, Football, Brown Moelleux and Eclipse Elixir into a single set you can drop straight into a UI. Of its 21 color pairings, 5 meet the WCAG AA contrast threshold (4.5:1) for body text — the strongest is #A4BEC1 on #1C2134 at 8.14:1.

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

Color breakdown

Clear Vista #A4BEC1
RGB
rgb(164, 190, 193)
HSL
hsl(186, 19%, 70%)
Luminance
0.486
Potting Moss #9FA089
RGB
rgb(159, 160, 137)
HSL
hsl(63, 11%, 58%)
Luminance
0.343
Ironside Grey #726D66
RGB
rgb(114, 109, 102)
HSL
hsl(35, 6%, 42%)
Luminance
0.155
Warm Operator’s Overalls #493A39
RGB
rgb(73, 58, 57)
HSL
hsl(4, 12%, 25%)
Luminance
0.047
Football #815938
RGB
rgb(129, 89, 56)
HSL
hsl(27, 39%, 36%)
Luminance
0.121
Brown Moelleux #602217
RGB
rgb(96, 34, 23)
HSL
hsl(9, 61%, 23%)
Luminance
0.037
Eclipse Elixir #1C2134
RGB
rgb(28, 33, 52)
HSL
hsl(228, 30%, 16%)
Luminance
0.016

Contrast & accessibility

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

Aa #A4BEC1 on #1C2134 8.14:1 AAA
Aa #A4BEC1 on #602217 6.16:1 AA
Aa #9FA089 on #1C2134 5.97:1 AA
Aa #A4BEC1 on #493A39 5.50:1 AA
Aa #9FA089 on #602217 4.52:1 AA
Aa #9FA089 on #493A39 4.04:1 AA Large
Aa #A4BEC1 on #815938 3.13:1 AA Large
Aa #726D66 on #1C2134 3.11:1 AA Large
Aa #A4BEC1 on #726D66 2.62:1 Fail
Aa #815938 on #1C2134 2.60:1 Fail
Aa #726D66 on #602217 2.36:1 Fail
Aa #9FA089 on #815938 2.30:1 Fail
Aa #726D66 on #493A39 2.10:1 Fail
Aa #815938 on #602217 1.97:1 Fail
Aa #9FA089 on #726D66 1.92:1 Fail
Aa #493A39 on #815938 1.76:1 Fail
Aa #493A39 on #1C2134 1.48:1 Fail
Aa #A4BEC1 on #9FA089 1.36:1 Fail
Aa #602217 on #1C2134 1.32:1 Fail
Aa #726D66 on #815938 1.20:1 Fail
Aa #493A39 on #602217 1.12:1 Fail

Similar palettes

#EDF1D6 #9DC08B #609966 #40513B
4 colors
#F5F7F8 #F4CE14 #495E57 #45474B
4 colors
#222831 #393E46 #FFD369 #EEEEEE
4 colors
#000000 #52057B #892CDC #BC6FF1
4 colors
#213555 #3E5879 #D8C4B6 #F5EFE7
4 colors
#F5EFE7 #D8C4B6 #4F709C #213555
4 colors
#191A19 #1E5128 #4E9F3D #D8E9A8
4 colors
#352F44 #5C5470 #B9B4C7 #FAF0E6
4 colors