Sign Up Sign Up
Soft Sunny Days

Soft Sunny Days

12-color palette · Neutral · Mixed · Complementary harmony

Back to Library

Soft Sunny Days

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

Modify
Earthy 12 colors Neutral Mixed Complementary soft soundsdotzip small 12
Likes 41
Colors 12

CSS variables

:root {
  --c-earthy-1: #0B0A0D;
  --c-earthy-2: #5E656E;
  --c-earthy-3: #BAAE95;
  --c-earthy-4: #FFF8F2;
  --c-earthy-5: #75BAE6;
  --c-earthy-6: #3A3878;
  --c-earthy-7: #469173;
  --c-earthy-8: #7BC456;
  --c-earthy-9: #FAD461;
  --c-earthy-10: #E37444;
  --c-earthy-11: #B0305A;
  --c-earthy-12: #613321;
}

About this palette

This 12-color earthy palette runs from Sugar Milk (#FFF8F2) as its lightest tone to Raven (#0B0A0D) as its darkest. It blends Raven, Lava Grey, Nile Sand, Sugar Milk, Costa Rica Blue, Torea Bay, Good Luck, Green Flash, Salmon Eggs, Jaffa, Blood Thorn and Chubby Chocolate into a single set you can drop straight into a UI. Of its 66 color pairings, 19 meet the WCAG AA contrast threshold (4.5:1) for body text — the strongest is #0B0A0D on #FFF8F2 at 18.77:1.

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

Color breakdown

Raven #0B0A0D
RGB
rgb(11, 10, 13)
HSL
hsl(260, 13%, 5%)
Luminance
0.003
Lava Grey #5E656E
RGB
rgb(94, 101, 110)
HSL
hsl(214, 8%, 40%)
Luminance
0.128
Nile Sand #BAAE95
RGB
rgb(186, 174, 149)
HSL
hsl(41, 21%, 66%)
Luminance
0.429
Sugar Milk #FFF8F2
RGB
rgb(255, 248, 242)
HSL
hsl(28, 100%, 97%)
Luminance
0.948
Costa Rica Blue #75BAE6
RGB
rgb(117, 186, 230)
HSL
hsl(203, 69%, 68%)
Luminance
0.446
Torea Bay #3A3878
RGB
rgb(58, 56, 120)
HSL
hsl(242, 36%, 35%)
Luminance
0.051
Good Luck #469173
RGB
rgb(70, 145, 115)
HSL
hsl(156, 35%, 42%)
Luminance
0.228
Green Flash #7BC456
RGB
rgb(123, 196, 86)
HSL
hsl(100, 48%, 55%)
Luminance
0.444
Salmon Eggs #FAD461
RGB
rgb(250, 212, 97)
HSL
hsl(45, 94%, 68%)
Luminance
0.683
Jaffa #E37444
RGB
rgb(227, 116, 68)
HSL
hsl(18, 74%, 58%)
Luminance
0.292
Blood Thorn #B0305A
RGB
rgb(176, 48, 90)
HSL
hsl(340, 57%, 44%)
Luminance
0.121
Chubby Chocolate #613321
RGB
rgb(97, 51, 33)
HSL
hsl(17, 49%, 25%)
Luminance
0.050

Contrast & accessibility

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

Aa #0B0A0D on #FFF8F2 18.77:1 AAA
Aa #0B0A0D on #FAD461 13.78:1 AAA
Aa #FFF8F2 on #613321 9.96:1 AAA
Aa #FFF8F2 on #3A3878 9.90:1 AAA
Aa #0B0A0D on #75BAE6 9.33:1 AAA
Aa #0B0A0D on #7BC456 9.28:1 AAA
Aa #0B0A0D on #BAAE95 9.00:1 AAA
Aa #FAD461 on #613321 7.31:1 AAA
Aa #3A3878 on #FAD461 7.27:1 AAA
Aa #0B0A0D on #E37444 6.44:1 AA
Aa #FFF8F2 on #B0305A 5.84:1 AA
Aa #5E656E on #FFF8F2 5.60:1 AA
Aa #0B0A0D on #469173 5.23:1 AA
Aa #75BAE6 on #613321 4.95:1 AA
Aa #7BC456 on #613321 4.93:1 AA
Aa #75BAE6 on #3A3878 4.92:1 AA
Aa #3A3878 on #7BC456 4.90:1 AA
Aa #BAAE95 on #613321 4.78:1 AA
Aa #BAAE95 on #3A3878 4.75:1 AA
Aa #FAD461 on #B0305A 4.29:1 AA Large
Aa #5E656E on #FAD461 4.11:1 AA Large
Aa #FFF8F2 on #469173 3.59:1 AA Large
Aa #E37444 on #613321 3.42:1 AA Large
Aa #3A3878 on #E37444 3.40:1 AA Large
Aa #0B0A0D on #5E656E 3.35:1 AA Large
Aa #0B0A0D on #B0305A 3.21:1 AA Large
Aa #FFF8F2 on #E37444 2.91:1 Fail
Aa #75BAE6 on #B0305A 2.90:1 Fail
Aa #7BC456 on #B0305A 2.89:1 Fail
Aa #BAAE95 on #B0305A 2.80:1 Fail
Aa #5E656E on #75BAE6 2.79:1 Fail
Aa #5E656E on #7BC456 2.77:1 Fail
Aa #469173 on #613321 2.77:1 Fail
Aa #3A3878 on #469173 2.76:1 Fail
Aa #5E656E on #BAAE95 2.69:1 Fail
Aa #469173 on #FAD461 2.64:1 Fail
Aa #FAD461 on #E37444 2.14:1 Fail
Aa #BAAE95 on #FFF8F2 2.08:1 Fail
Aa #FFF8F2 on #7BC456 2.02:1 Fail
Aa #FFF8F2 on #75BAE6 2.01:1 Fail
Aa #E37444 on #B0305A 2.00:1 Fail
Aa #5E656E on #E37444 1.92:1 Fail
Aa #0B0A0D on #3A3878 1.90:1 Fail
Aa #0B0A0D on #613321 1.88:1 Fail
Aa #75BAE6 on #469173 1.79:1 Fail
Aa #5E656E on #613321 1.78:1 Fail
Aa #469173 on #7BC456 1.78:1 Fail
Aa #5E656E on #3A3878 1.77:1 Fail
Aa #BAAE95 on #469173 1.72:1 Fail
Aa #B0305A on #613321 1.71:1 Fail
Aa #3A3878 on #B0305A 1.69:1 Fail
Aa #469173 on #B0305A 1.63:1 Fail
Aa #5E656E on #469173 1.56:1 Fail
Aa #BAAE95 on #FAD461 1.53:1 Fail
Aa #75BAE6 on #FAD461 1.48:1 Fail
Aa #7BC456 on #FAD461 1.48:1 Fail
Aa #75BAE6 on #E37444 1.45:1 Fail
Aa #7BC456 on #E37444 1.44:1 Fail
Aa #BAAE95 on #E37444 1.40:1 Fail
Aa #FFF8F2 on #FAD461 1.36:1 Fail
Aa #469173 on #E37444 1.23:1 Fail
Aa #5E656E on #B0305A 1.04:1 Fail
Aa #BAAE95 on #75BAE6 1.04:1 Fail
Aa #BAAE95 on #7BC456 1.03:1 Fail
Aa #75BAE6 on #7BC456 1.01:1 Fail
Aa #3A3878 on #613321 1.01: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