Sign Up Sign Up
12j4nk

12j4nk

12-color palette · Cool · Mixed · Complementary harmony

Back to Library

12j4nk

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

Modify
Earthy 12 colors Cool Mixed Complementary ui soft colorful nature
Likes 51
Colors 12

CSS variables

:root {
  --c-earthy-1: #FCFCF2;
  --c-earthy-2: #D5DDE4;
  --c-earthy-3: #9DA0A8;
  --c-earthy-4: #42133F;
  --c-earthy-5: #DDAC46;
  --c-earthy-6: #00A2A8;
  --c-earthy-7: #376E49;
  --c-earthy-8: #1B1729;
  --c-earthy-9: #CD4A42;
  --c-earthy-10: #1773B8;
  --c-earthy-11: #18292E;
  --c-earthy-12: #101010;
}

About this palette

This 12-color earthy palette runs from White Desert (#FCFCF2) as its lightest tone to Chaos Black (#101010) as its darkest. It blends White Desert, Cautious Blue, Grey Wolf, Velvet Cosmos, Tiger Cub, Wax Crayon Blue, Chopped Chive, Sambucus, Race Car Stripe, Beautiful Blue, Abyssal Anchorfish Blue and Chaos Black into a single set you can drop straight into a UI. Of its 66 color pairings, 22 meet the WCAG AA contrast threshold (4.5:1) for body text — the strongest is #FCFCF2 on #101010 at 18.43:1.

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

Color breakdown

White Desert #FCFCF2
RGB
rgb(252, 252, 242)
HSL
hsl(60, 63%, 97%)
Luminance
0.967
Cautious Blue #D5DDE4
RGB
rgb(213, 221, 228)
HSL
hsl(208, 22%, 86%)
Luminance
0.715
Grey Wolf #9DA0A8
RGB
rgb(157, 160, 168)
HSL
hsl(224, 6%, 64%)
Luminance
0.351
Velvet Cosmos #42133F
RGB
rgb(66, 19, 63)
HSL
hsl(304, 55%, 17%)
Luminance
0.020
Tiger Cub #DDAC46
RGB
rgb(221, 172, 70)
HSL
hsl(41, 69%, 57%)
Luminance
0.453
Wax Crayon Blue #00A2A8
RGB
rgb(0, 162, 168)
HSL
hsl(182, 100%, 33%)
Luminance
0.287
Chopped Chive #376E49
RGB
rgb(55, 110, 73)
HSL
hsl(140, 33%, 32%)
Luminance
0.125
Sambucus #1B1729
RGB
rgb(27, 23, 41)
HSL
hsl(253, 28%, 13%)
Luminance
0.010
Race Car Stripe #CD4A42
RGB
rgb(205, 74, 66)
HSL
hsl(3, 58%, 53%)
Luminance
0.183
Beautiful Blue #1773B8
RGB
rgb(23, 115, 184)
HSL
hsl(206, 78%, 41%)
Luminance
0.159
Abyssal Anchorfish Blue #18292E
RGB
rgb(24, 41, 46)
HSL
hsl(194, 31%, 14%)
Luminance
0.020
Chaos Black #101010
RGB
rgb(16, 16, 16)
HSL
hsl(0, 0%, 6%)
Luminance
0.005

Contrast & accessibility

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

Aa #FCFCF2 on #101010 18.43:1 AAA
Aa #FCFCF2 on #1B1729 16.94:1 AAA
Aa #FCFCF2 on #18292E 14.58:1 AAA
Aa #FCFCF2 on #42133F 14.57:1 AAA
Aa #D5DDE4 on #101010 13.86:1 AAA
Aa #D5DDE4 on #1B1729 12.73:1 AAA
Aa #D5DDE4 on #18292E 10.96:1 AAA
Aa #D5DDE4 on #42133F 10.95:1 AAA
Aa #DDAC46 on #101010 9.12:1 AAA
Aa #DDAC46 on #1B1729 8.38:1 AAA
Aa #9DA0A8 on #101010 7.27:1 AAA
Aa #42133F on #DDAC46 7.21:1 AAA
Aa #DDAC46 on #18292E 7.21:1 AAA
Aa #9DA0A8 on #1B1729 6.68:1 AA
Aa #00A2A8 on #101010 6.10:1 AA
Aa #FCFCF2 on #376E49 5.83:1 AA
Aa #9DA0A8 on #42133F 5.75:1 AA
Aa #9DA0A8 on #18292E 5.75:1 AA
Aa #00A2A8 on #1B1729 5.61:1 AA
Aa #FCFCF2 on #1773B8 4.87:1 AA
Aa #00A2A8 on #18292E 4.83:1 AA
Aa #42133F on #00A2A8 4.82:1 AA
Aa #D5DDE4 on #376E49 4.38:1 AA Large
Aa #FCFCF2 on #CD4A42 4.37:1 AA Large
Aa #CD4A42 on #101010 4.22:1 AA Large
Aa #1B1729 on #CD4A42 3.87:1 AA Large
Aa #1773B8 on #101010 3.79:1 AA Large
Aa #D5DDE4 on #1773B8 3.66:1 AA Large
Aa #1B1729 on #1773B8 3.48:1 AA Large
Aa #CD4A42 on #18292E 3.34:1 AA Large
Aa #42133F on #CD4A42 3.33:1 AA Large
Aa #D5DDE4 on #CD4A42 3.29:1 AA Large
Aa #376E49 on #101010 3.16:1 AA Large
Aa #FCFCF2 on #00A2A8 3.02:1 AA Large
Aa #1773B8 on #18292E 3.00:1 AA Large
Aa #42133F on #1773B8 2.99:1 Fail
Aa #376E49 on #1B1729 2.90:1 Fail
Aa #DDAC46 on #376E49 2.88:1 Fail
Aa #FCFCF2 on #9DA0A8 2.53:1 Fail
Aa #42133F on #376E49 2.50:1 Fail
Aa #376E49 on #18292E 2.50:1 Fail
Aa #DDAC46 on #1773B8 2.41:1 Fail
Aa #9DA0A8 on #376E49 2.30:1 Fail
Aa #D5DDE4 on #00A2A8 2.27:1 Fail
Aa #DDAC46 on #CD4A42 2.16:1 Fail
Aa #FCFCF2 on #DDAC46 2.02:1 Fail
Aa #00A2A8 on #376E49 1.93:1 Fail
Aa #9DA0A8 on #1773B8 1.92:1 Fail
Aa #D5DDE4 on #9DA0A8 1.90:1 Fail
Aa #9DA0A8 on #CD4A42 1.72:1 Fail
Aa #00A2A8 on #1773B8 1.61:1 Fail
Aa #D5DDE4 on #DDAC46 1.52:1 Fail
Aa #DDAC46 on #00A2A8 1.49:1 Fail
Aa #00A2A8 on #CD4A42 1.45:1 Fail
Aa #FCFCF2 on #D5DDE4 1.33:1 Fail
Aa #376E49 on #CD4A42 1.33:1 Fail
Aa #42133F on #101010 1.27:1 Fail
Aa #18292E on #101010 1.26:1 Fail
Aa #9DA0A8 on #DDAC46 1.25:1 Fail
Aa #376E49 on #1773B8 1.20:1 Fail
Aa #9DA0A8 on #00A2A8 1.19:1 Fail
Aa #42133F on #1B1729 1.16:1 Fail
Aa #1B1729 on #18292E 1.16:1 Fail
Aa #CD4A42 on #1773B8 1.11:1 Fail
Aa #1B1729 on #101010 1.09:1 Fail
Aa #42133F on #18292E 1.00:1 Fail

Similar palettes

#222831 #393E46 #00ADB5 #EEEEEE
4 colors
#F9F7F7 #DBE2EF #3F72AF #112D4E
4 colors
#1B262C #0F4C75 #3282B8 #BBE1FA
4 colors
#08D9D6 #252A34 #FF2E63 #EAEAEA
4 colors
#27374D #526D82 #9DB2BF #DDE6ED
4 colors
#364F6B #3FC1C9 #F5F5F5 #FC5185
4 colors
#E4F9F5 #30E3CA #11999E #40514E
4 colors
#F0F5F9 #C9D6DF #52616B #1E2022
4 colors