Sign Up Sign Up
Mesa Vapor

Mesa Vapor

7-color palette · Warm · Mixed · Complementary harmony

Back to Library

Mesa Vapor

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

Modify
Earthy 7 colors Warm Mixed Complementary green orange red cactus
Likes 49
Colors 7

CSS variables

:root {
  --c-earthy-1: #EEEEEE;
  --c-earthy-2: #89BABF;
  --c-earthy-3: #34402B;
  --c-earthy-4: #4B7230;
  --c-earthy-5: #3D2B2B;
  --c-earthy-6: #5D3A3A;
  --c-earthy-7: #9F5644;
}

About this palette

This 7-color earthy palette runs from Super Silver (#EEEEEE) as its lightest tone to Wenge Black (#3D2B2B) as its darkest. It blends Super Silver, Sea Angel, Deep Seaweed, Botanical, Wenge Black, Pa Red and Ceramic Brown into a single set you can drop straight into a UI. Of its 21 color pairings, 8 meet the WCAG AA contrast threshold (4.5:1) for body text — the strongest is #EEEEEE on #3D2B2B at 11.46:1.

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

Color breakdown

Super Silver #EEEEEE
RGB
rgb(238, 238, 238)
HSL
hsl(0, 0%, 93%)
Luminance
0.855
Sea Angel #89BABF
RGB
rgb(137, 186, 191)
HSL
hsl(186, 30%, 64%)
Luminance
0.442
Deep Seaweed #34402B
RGB
rgb(52, 64, 43)
HSL
hsl(94, 20%, 21%)
Luminance
0.046
Botanical #4B7230
RGB
rgb(75, 114, 48)
HSL
hsl(95, 41%, 32%)
Luminance
0.137
Wenge Black #3D2B2B
RGB
rgb(61, 43, 43)
HSL
hsl(0, 17%, 20%)
Luminance
0.029
Pa Red #5D3A3A
RGB
rgb(93, 58, 58)
HSL
hsl(0, 23%, 30%)
Luminance
0.057
Ceramic Brown #9F5644
RGB
rgb(159, 86, 68)
HSL
hsl(12, 40%, 45%)
Luminance
0.144

Contrast & accessibility

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

Aa #EEEEEE on #3D2B2B 11.46:1 AAA
Aa #EEEEEE on #34402B 9.46:1 AAA
Aa #EEEEEE on #5D3A3A 8.49:1 AAA
Aa #89BABF on #3D2B2B 6.23:1 AA
Aa #89BABF on #34402B 5.14:1 AA
Aa #EEEEEE on #4B7230 4.83:1 AA
Aa #EEEEEE on #9F5644 4.65:1 AA
Aa #89BABF on #5D3A3A 4.62:1 AA
Aa #89BABF on #4B7230 2.62:1 Fail
Aa #89BABF on #9F5644 2.53:1 Fail
Aa #3D2B2B on #9F5644 2.46:1 Fail
Aa #4B7230 on #3D2B2B 2.37:1 Fail
Aa #34402B on #9F5644 2.03:1 Fail
Aa #34402B on #4B7230 1.96:1 Fail
Aa #EEEEEE on #89BABF 1.84:1 Fail
Aa #5D3A3A on #9F5644 1.82:1 Fail
Aa #4B7230 on #5D3A3A 1.76:1 Fail
Aa #3D2B2B on #5D3A3A 1.35:1 Fail
Aa #34402B on #3D2B2B 1.21:1 Fail
Aa #34402B on #5D3A3A 1.11:1 Fail
Aa #4B7230 on #9F5644 1.04: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