Sign Up Sign Up
Iced Coffee

Iced Coffee

7-color palette · Neutral · Mixed · Complementary harmony

Back to Library

Iced Coffee

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

Modify
Earthy 7 colors Neutral Mixed Complementary
Likes 32
Colors 7

CSS variables

:root {
  --c-earthy-1: #E6FAFF;
  --c-earthy-2: #95C4E5;
  --c-earthy-3: #7EA8E6;
  --c-earthy-4: #6E636F;
  --c-earthy-5: #664033;
  --c-earthy-6: #4D2D22;
  --c-earthy-7: #331C14;
}

About this palette

This 7-color earthy palette runs from Calm Waters (#E6FAFF) as its lightest tone to Scorched (#331C14) as its darkest. It blends Calm Waters, Salvia Blue, Jordy Blue, Vintage Grape, Roasted Coffee, Couch and Scorched into a single set you can drop straight into a UI. Of its 21 color pairings, 9 meet the WCAG AA contrast threshold (4.5:1) for body text — the strongest is #E6FAFF on #331C14 at 14.79:1.

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

Color breakdown

Calm Waters #E6FAFF
RGB
rgb(230, 250, 255)
HSL
hsl(192, 100%, 95%)
Luminance
0.924
Salvia Blue #95C4E5
RGB
rgb(149, 196, 229)
HSL
hsl(205, 61%, 74%)
Luminance
0.515
Jordy Blue #7EA8E6
RGB
rgb(126, 168, 230)
HSL
hsl(216, 68%, 70%)
Luminance
0.382
Vintage Grape #6E636F
RGB
rgb(110, 99, 111)
HSL
hsl(295, 6%, 41%)
Luminance
0.134
Roasted Coffee #664033
RGB
rgb(102, 64, 51)
HSL
hsl(15, 33%, 30%)
Luminance
0.067
Couch #4D2D22
RGB
rgb(77, 45, 34)
HSL
hsl(15, 39%, 22%)
Luminance
0.036
Scorched #331C14
RGB
rgb(51, 28, 20)
HSL
hsl(15, 44%, 14%)
Luminance
0.016

Contrast & accessibility

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

Aa #E6FAFF on #331C14 14.79:1 AAA
Aa #E6FAFF on #4D2D22 11.37:1 AAA
Aa #95C4E5 on #331C14 8.58:1 AAA
Aa #E6FAFF on #664033 8.30:1 AAA
Aa #95C4E5 on #4D2D22 6.60:1 AA
Aa #7EA8E6 on #331C14 6.55:1 AA
Aa #E6FAFF on #6E636F 5.30:1 AA
Aa #7EA8E6 on #4D2D22 5.04:1 AA
Aa #95C4E5 on #664033 4.82:1 AA
Aa #7EA8E6 on #664033 3.68:1 AA Large
Aa #95C4E5 on #6E636F 3.07:1 AA Large
Aa #6E636F on #331C14 2.79:1 Fail
Aa #7EA8E6 on #6E636F 2.35:1 Fail
Aa #E6FAFF on #7EA8E6 2.26:1 Fail
Aa #6E636F on #4D2D22 2.15:1 Fail
Aa #664033 on #331C14 1.78:1 Fail
Aa #E6FAFF on #95C4E5 1.72:1 Fail
Aa #6E636F on #664033 1.57:1 Fail
Aa #664033 on #4D2D22 1.37:1 Fail
Aa #95C4E5 on #7EA8E6 1.31:1 Fail
Aa #4D2D22 on #331C14 1.30: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