Sign Up Sign Up
BYTE 12

BYTE 12

12-color palette · Warm · Mixed · Complementary harmony

Back to Library

BYTE 12

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

Modify
Earthy 12 colors Warm Mixed Complementary fun games byte twelve
Likes 12
Colors 12

CSS variables

:root {
  --c-earthy-1: #992323;
  --c-earthy-2: #BEB225;
  --c-earthy-3: #3561AF;
  --c-earthy-4: #94BB4F;
  --c-earthy-5: #7E529A;
  --c-earthy-6: #DD997F;
  --c-earthy-7: #E05E95;
  --c-earthy-8: #636363;
  --c-earthy-9: #D1D1D1;
  --c-earthy-10: #202020;
  --c-earthy-11: #5B41C5;
  --c-earthy-12: #161B82;
}

About this palette

This 12-color earthy palette runs from Blowing Smoke (#D1D1D1) as its lightest tone to Lead (#202020) as its darkest. It blends Manchester Nights, Sharp Lime, Adventure of the Seas, Early Spring, Royal Lilac, Light Terracotta, Carmine Rose, Digital, Blowing Smoke, Lead, Dragonlord Purple and Galactic Cruise into a single set you can drop straight into a UI. Of its 66 color pairings, 11 meet the WCAG AA contrast threshold (4.5:1) for body text — the strongest is #D1D1D1 on #202020 at 10.67:1.

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

Color breakdown

Manchester Nights #992323
RGB
rgb(153, 35, 35)
HSL
hsl(0, 63%, 37%)
Luminance
0.081
Sharp Lime #BEB225
RGB
rgb(190, 178, 37)
HSL
hsl(55, 67%, 45%)
Luminance
0.429
Adventure of the Seas #3561AF
RGB
rgb(53, 97, 175)
HSL
hsl(218, 54%, 45%)
Luminance
0.124
Early Spring #94BB4F
RGB
rgb(148, 187, 79)
HSL
hsl(82, 44%, 52%)
Luminance
0.424
Royal Lilac #7E529A
RGB
rgb(126, 82, 154)
HSL
hsl(277, 31%, 46%)
Luminance
0.128
Light Terracotta #DD997F
RGB
rgb(221, 153, 127)
HSL
hsl(17, 58%, 68%)
Luminance
0.397
Carmine Rose #E05E95
RGB
rgb(224, 94, 149)
HSL
hsl(335, 68%, 62%)
Luminance
0.260
Digital #636363
RGB
rgb(99, 99, 99)
HSL
hsl(0, 0%, 39%)
Luminance
0.125
Blowing Smoke #D1D1D1
RGB
rgb(209, 209, 209)
HSL
hsl(0, 0%, 82%)
Luminance
0.638
Lead #202020
RGB
rgb(32, 32, 32)
HSL
hsl(0, 0%, 13%)
Luminance
0.014
Dragonlord Purple #5B41C5
RGB
rgb(91, 65, 197)
HSL
hsl(252, 53%, 51%)
Luminance
0.100
Galactic Cruise #161B82
RGB
rgb(22, 27, 130)
HSL
hsl(237, 71%, 30%)
Luminance
0.026

Contrast & accessibility

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

Aa #D1D1D1 on #202020 10.67:1 AAA
Aa #D1D1D1 on #161B82 9.09:1 AAA
Aa #BEB225 on #202020 7.44:1 AAA
Aa #94BB4F on #202020 7.36:1 AAA
Aa #DD997F on #202020 6.93:1 AA
Aa #BEB225 on #161B82 6.33:1 AA
Aa #94BB4F on #161B82 6.26:1 AA
Aa #DD997F on #161B82 5.91:1 AA
Aa #992323 on #D1D1D1 5.25:1 AA
Aa #E05E95 on #202020 4.81:1 AA
Aa #D1D1D1 on #5B41C5 4.57:1 AA
Aa #E05E95 on #161B82 4.10:1 AA Large
Aa #3561AF on #D1D1D1 3.95:1 AA Large
Aa #636363 on #D1D1D1 3.93:1 AA Large
Aa #7E529A on #D1D1D1 3.86:1 AA Large
Aa #992323 on #BEB225 3.66:1 AA Large
Aa #992323 on #94BB4F 3.62:1 AA Large
Aa #992323 on #DD997F 3.41:1 AA Large
Aa #BEB225 on #5B41C5 3.19:1 AA Large
Aa #94BB4F on #5B41C5 3.15:1 AA Large
Aa #DD997F on #5B41C5 2.97:1 Fail
Aa #7E529A on #202020 2.76:1 Fail
Aa #BEB225 on #3561AF 2.75:1 Fail
Aa #BEB225 on #636363 2.74:1 Fail
Aa #3561AF on #94BB4F 2.72:1 Fail
Aa #94BB4F on #636363 2.71:1 Fail
Aa #636363 on #202020 2.71:1 Fail
Aa #3561AF on #202020 2.70:1 Fail
Aa #BEB225 on #7E529A 2.69:1 Fail
Aa #94BB4F on #7E529A 2.66:1 Fail
Aa #3561AF on #DD997F 2.57:1 Fail
Aa #DD997F on #636363 2.56:1 Fail
Aa #7E529A on #DD997F 2.51:1 Fail
Aa #992323 on #E05E95 2.37:1 Fail
Aa #7E529A on #161B82 2.35:1 Fail
Aa #202020 on #5B41C5 2.33:1 Fail
Aa #636363 on #161B82 2.31:1 Fail
Aa #3561AF on #161B82 2.30:1 Fail
Aa #E05E95 on #D1D1D1 2.22:1 Fail
Aa #E05E95 on #5B41C5 2.06:1 Fail
Aa #992323 on #202020 2.03:1 Fail
Aa #5B41C5 on #161B82 1.99:1 Fail
Aa #3561AF on #E05E95 1.78:1 Fail
Aa #E05E95 on #636363 1.78:1 Fail
Aa #7E529A on #E05E95 1.74:1 Fail
Aa #992323 on #161B82 1.73:1 Fail
Aa #BEB225 on #E05E95 1.54:1 Fail
Aa #DD997F on #D1D1D1 1.54:1 Fail
Aa #94BB4F on #E05E95 1.53:1 Fail
Aa #94BB4F on #D1D1D1 1.45:1 Fail
Aa #DD997F on #E05E95 1.44:1 Fail
Aa #BEB225 on #D1D1D1 1.43:1 Fail
Aa #992323 on #7E529A 1.36:1 Fail
Aa #992323 on #3561AF 1.33:1 Fail
Aa #992323 on #636363 1.33:1 Fail
Aa #7E529A on #5B41C5 1.18:1 Fail
Aa #202020 on #161B82 1.17:1 Fail
Aa #3561AF on #5B41C5 1.16:1 Fail
Aa #636363 on #5B41C5 1.16:1 Fail
Aa #992323 on #5B41C5 1.15:1 Fail
Aa #BEB225 on #DD997F 1.07:1 Fail
Aa #94BB4F on #DD997F 1.06:1 Fail
Aa #3561AF on #7E529A 1.02:1 Fail
Aa #7E529A on #636363 1.02:1 Fail
Aa #BEB225 on #94BB4F 1.01:1 Fail
Aa #3561AF on #636363 1.00: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