Sign Up Sign Up
Gated

Gated

9-color palette · Warm · Mixed · Complementary harmony

Back to Library

Gated

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

Modify
Earthy 9 colors Warm Mixed Complementary scifi nostalgia tv stargate
Likes 26
Colors 9

CSS variables

:root {
  --c-earthy-1: #F5F9FF;
  --c-earthy-2: #5A7598;
  --c-earthy-3: #3E3785;
  --c-earthy-4: #17082C;
  --c-earthy-5: #59422F;
  --c-earthy-6: #766047;
  --c-earthy-7: #AA8F72;
  --c-earthy-8: #E0AA07;
  --c-earthy-9: #833C27;
}

About this palette

This 9-color earthy palette runs from Mā White (#F5F9FF) as its lightest tone to Quiet Abyss (#17082C) as its darkest. It blends Mā White, Privileged Elite, Majestic Eggplant, Quiet Abyss, Garden Loam, Woodward Park, Café Américaine, Mustard Yellow and Grill Master into a single set you can drop straight into a UI. Of its 36 color pairings, 8 meet the WCAG AA contrast threshold (4.5:1) for body text — the strongest is #F5F9FF on #17082C at 17.95:1.

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

Color breakdown

Mā White #F5F9FF
RGB
rgb(245, 249, 255)
HSL
hsl(216, 100%, 98%)
Luminance
0.944
Privileged Elite #5A7598
RGB
rgb(90, 117, 152)
HSL
hsl(214, 26%, 47%)
Luminance
0.172
Majestic Eggplant #3E3785
RGB
rgb(62, 55, 133)
HSL
hsl(245, 41%, 37%)
Luminance
0.055
Quiet Abyss #17082C
RGB
rgb(23, 8, 44)
HSL
hsl(265, 69%, 10%)
Luminance
0.005
Garden Loam #59422F
RGB
rgb(89, 66, 47)
HSL
hsl(27, 31%, 27%)
Luminance
0.062
Woodward Park #766047
RGB
rgb(118, 96, 71)
HSL
hsl(32, 25%, 37%)
Luminance
0.127
Café Américaine #AA8F72
RGB
rgb(170, 143, 114)
HSL
hsl(31, 25%, 56%)
Luminance
0.294
Mustard Yellow #E0AA07
RGB
rgb(224, 170, 7)
HSL
hsl(45, 94%, 45%)
Luminance
0.446
Grill Master #833C27
RGB
rgb(131, 60, 39)
HSL
hsl(14, 54%, 33%)
Luminance
0.082

Contrast & accessibility

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

Aa #F5F9FF on #17082C 17.95:1 AAA
Aa #F5F9FF on #3E3785 9.51:1 AAA
Aa #17082C on #E0AA07 8.96:1 AAA
Aa #F5F9FF on #59422F 8.85:1 AAA
Aa #F5F9FF on #833C27 7.53:1 AAA
Aa #17082C on #AA8F72 6.21:1 AA
Aa #F5F9FF on #766047 5.62:1 AA
Aa #3E3785 on #E0AA07 4.75:1 AA
Aa #F5F9FF on #5A7598 4.48:1 AA Large
Aa #59422F on #E0AA07 4.42:1 AA Large
Aa #5A7598 on #17082C 4.00:1 AA Large
Aa #E0AA07 on #833C27 3.76:1 AA Large
Aa #3E3785 on #AA8F72 3.29:1 AA Large
Aa #17082C on #766047 3.19:1 AA Large
Aa #59422F on #AA8F72 3.06:1 AA Large
Aa #F5F9FF on #AA8F72 2.89:1 Fail
Aa #766047 on #E0AA07 2.81:1 Fail
Aa #AA8F72 on #833C27 2.61:1 Fail
Aa #17082C on #833C27 2.38:1 Fail
Aa #5A7598 on #E0AA07 2.24:1 Fail
Aa #5A7598 on #3E3785 2.12:1 Fail
Aa #17082C on #59422F 2.03:1 Fail
Aa #F5F9FF on #E0AA07 2.00:1 Fail
Aa #5A7598 on #59422F 1.97:1 Fail
Aa #766047 on #AA8F72 1.95:1 Fail
Aa #3E3785 on #17082C 1.89:1 Fail
Aa #3E3785 on #766047 1.69:1 Fail
Aa #5A7598 on #833C27 1.68:1 Fail
Aa #59422F on #766047 1.57:1 Fail
Aa #5A7598 on #AA8F72 1.55:1 Fail
Aa #AA8F72 on #E0AA07 1.44:1 Fail
Aa #766047 on #833C27 1.34:1 Fail
Aa #3E3785 on #833C27 1.26:1 Fail
Aa #5A7598 on #766047 1.25:1 Fail
Aa #59422F on #833C27 1.18:1 Fail
Aa #3E3785 on #59422F 1.07: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