Sign Up Sign Up
Foggy Nature

Foggy Nature

12-color palette · Neutral · Mixed · Complementary harmony

Back to Library

Foggy Nature

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

Modify
Earthy 12 colors Neutral Mixed Complementary green grey nature neutral
Likes 31
Colors 12

CSS variables

:root {
  --c-earthy-1: #BFBFFF;
  --c-earthy-2: #9F9FCF;
  --c-earthy-3: #937FA2;
  --c-earthy-4: #925F79;
  --c-earthy-5: #584049;
  --c-earthy-6: #273620;
  --c-earthy-7: #032300;
  --c-earthy-8: #93887F;
  --c-earthy-9: #926D5F;
  --c-earthy-10: #274020;
  --c-earthy-11: #585940;
  --c-earthy-12: #9FA3B3;
}

About this palette

This 12-color earthy palette runs from Dried Lilac (#BFBFFF) as its lightest tone to Rainforest Nights (#032300) as its darkest. It blends Dried Lilac, Indigo Child, Violet Chalk, Victorian Plum, Bruised Burgundy, Mountain Range Green, Rainforest Nights, Abandoned Mansion, Chocolate Curl, Myrtle, Pinetop and Great Falls into a single set you can drop straight into a UI. Of its 66 color pairings, 12 meet the WCAG AA contrast threshold (4.5:1) for body text — the strongest is #BFBFFF on #032300 at 9.73:1.

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

Color breakdown

Dried Lilac #BFBFFF
RGB
rgb(191, 191, 255)
HSL
hsl(240, 100%, 87%)
Luminance
0.556
Indigo Child #9F9FCF
RGB
rgb(159, 159, 207)
HSL
hsl(240, 33%, 72%)
Luminance
0.367
Violet Chalk #937FA2
RGB
rgb(147, 127, 162)
HSL
hsl(274, 16%, 57%)
Luminance
0.240
Victorian Plum #925F79
RGB
rgb(146, 95, 121)
HSL
hsl(329, 21%, 47%)
Luminance
0.157
Bruised Burgundy #584049
RGB
rgb(88, 64, 73)
HSL
hsl(338, 16%, 30%)
Luminance
0.062
Mountain Range Green #273620
RGB
rgb(39, 54, 32)
HSL
hsl(101, 26%, 17%)
Luminance
0.032
Rainforest Nights #032300
RGB
rgb(3, 35, 0)
HSL
hsl(115, 100%, 7%)
Luminance
0.012
Abandoned Mansion #93887F
RGB
rgb(147, 136, 127)
HSL
hsl(27, 8%, 54%)
Luminance
0.253
Chocolate Curl #926D5F
RGB
rgb(146, 109, 95)
HSL
hsl(16, 21%, 47%)
Luminance
0.179
Myrtle #274020
RGB
rgb(39, 64, 32)
HSL
hsl(107, 33%, 19%)
Luminance
0.042
Pinetop #585940
RGB
rgb(88, 89, 64)
HSL
hsl(62, 16%, 30%)
Luminance
0.096
Great Falls #9FA3B3
RGB
rgb(159, 163, 179)
HSL
hsl(228, 12%, 66%)
Luminance
0.368

Contrast & accessibility

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

Aa #BFBFFF on #032300 9.73:1 AAA
Aa #BFBFFF on #273620 7.41:1 AAA
Aa #032300 on #9FA3B3 6.72:1 AA
Aa #9F9FCF on #032300 6.70:1 AA
Aa #BFBFFF on #274020 6.58:1 AA
Aa #BFBFFF on #584049 5.40:1 AA
Aa #273620 on #9FA3B3 5.12:1 AA
Aa #9F9FCF on #273620 5.10:1 AA
Aa #032300 on #93887F 4.88:1 AA
Aa #937FA2 on #032300 4.66:1 AA
Aa #274020 on #9FA3B3 4.54:1 AA
Aa #9F9FCF on #274020 4.53:1 AA
Aa #BFBFFF on #585940 4.15:1 AA Large
Aa #584049 on #9FA3B3 3.73:1 AA Large
Aa #9F9FCF on #584049 3.71:1 AA Large
Aa #273620 on #93887F 3.71:1 AA Large
Aa #032300 on #926D5F 3.68:1 AA Large
Aa #937FA2 on #273620 3.55:1 AA Large
Aa #925F79 on #032300 3.32:1 AA Large
Aa #93887F on #274020 3.30:1 AA Large
Aa #937FA2 on #274020 3.15:1 AA Large
Aa #BFBFFF on #925F79 2.93:1 Fail
Aa #585940 on #9FA3B3 2.87:1 Fail
Aa #9F9FCF on #585940 2.86:1 Fail
Aa #273620 on #926D5F 2.80:1 Fail
Aa #584049 on #93887F 2.70:1 Fail
Aa #BFBFFF on #926D5F 2.65:1 Fail
Aa #937FA2 on #584049 2.58:1 Fail
Aa #925F79 on #273620 2.53:1 Fail
Aa #926D5F on #274020 2.49:1 Fail
Aa #032300 on #585940 2.35:1 Fail
Aa #925F79 on #274020 2.25:1 Fail
Aa #BFBFFF on #937FA2 2.09:1 Fail
Aa #93887F on #585940 2.08:1 Fail
Aa #584049 on #926D5F 2.04:1 Fail
Aa #9F9FCF on #925F79 2.02:1 Fail
Aa #925F79 on #9FA3B3 2.02:1 Fail
Aa #BFBFFF on #93887F 2.00:1 Fail
Aa #937FA2 on #585940 1.99:1 Fail
Aa #925F79 on #584049 1.84:1 Fail
Aa #926D5F on #9FA3B3 1.83:1 Fail
Aa #9F9FCF on #926D5F 1.82:1 Fail
Aa #584049 on #032300 1.80:1 Fail
Aa #273620 on #585940 1.78:1 Fail
Aa #274020 on #585940 1.59:1 Fail
Aa #926D5F on #585940 1.57:1 Fail
Aa #032300 on #274020 1.48:1 Fail
Aa #925F79 on #93887F 1.47:1 Fail
Aa #BFBFFF on #9F9FCF 1.45:1 Fail
Aa #BFBFFF on #9FA3B3 1.45:1 Fail
Aa #9F9FCF on #937FA2 1.44:1 Fail
Aa #937FA2 on #9FA3B3 1.44:1 Fail
Aa #925F79 on #585940 1.42:1 Fail
Aa #937FA2 on #925F79 1.40:1 Fail
Aa #93887F on #9FA3B3 1.38:1 Fail
Aa #9F9FCF on #93887F 1.37:1 Fail
Aa #584049 on #273620 1.37:1 Fail
Aa #93887F on #926D5F 1.33:1 Fail
Aa #273620 on #032300 1.31:1 Fail
Aa #584049 on #585940 1.30:1 Fail
Aa #937FA2 on #926D5F 1.27:1 Fail
Aa #584049 on #274020 1.22:1 Fail
Aa #273620 on #274020 1.13:1 Fail
Aa #925F79 on #926D5F 1.11:1 Fail
Aa #937FA2 on #93887F 1.05:1 Fail
Aa #9F9FCF on #9FA3B3 1.00: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