Sign Up Sign Up
Gas Station 12

Gas Station 12

12-color palette · Warm · Dark · Monochromatic harmony

Back to Library

Gas Station 12

12-color palette · Warm temperature · Dark tone · Monochromatic harmony

Modify
Muted 12 colors Warm Dark Monochromatic green dark blue cyan
Likes 51
Colors 12

CSS variables

:root {
  --c-muted-1: #BABE7C;
  --c-muted-2: #7D825A;
  --c-muted-3: #49513E;
  --c-muted-4: #373F34;
  --c-muted-5: #443F2D;
  --c-muted-6: #2F2D22;
  --c-muted-7: #1C1C17;
  --c-muted-8: #151614;
  --c-muted-9: #519585;
  --c-muted-10: #376862;
  --c-muted-11: #203F42;
  --c-muted-12: #19343A;
}

About this palette

This 12-color muted palette runs from Pine Glade (#BABE7C) as its lightest tone to Matt Black (#151614) as its darkest. It blends Pine Glade, Mosstone, Savannah Moss, Aged Pine, Woodrush, Karaka, Coco’s Black, Matt Black, Crisp Lettuce, Seiheki Green, Pine Hollow and Ore Bluish Black into a single set you can drop straight into a UI. Of its 66 color pairings, 10 meet the WCAG AA contrast threshold (4.5:1) for body text — the strongest is #BABE7C on #151614 at 9.29:1.

A versatile palette suitable for marketing pages, product hero blocks, illustrations, and accent UI states.

Color breakdown

Pine Glade #BABE7C
RGB
rgb(186, 190, 124)
HSL
hsl(64, 34%, 62%)
Luminance
0.487
Mosstone #7D825A
RGB
rgb(125, 130, 90)
HSL
hsl(68, 18%, 43%)
Luminance
0.211
Savannah Moss #49513E
RGB
rgb(73, 81, 62)
HSL
hsl(85, 13%, 28%)
Luminance
0.077
Aged Pine #373F34
RGB
rgb(55, 63, 52)
HSL
hsl(104, 10%, 23%)
Luminance
0.046
Woodrush #443F2D
RGB
rgb(68, 63, 45)
HSL
hsl(47, 20%, 22%)
Luminance
0.050
Karaka #2F2D22
RGB
rgb(47, 45, 34)
HSL
hsl(51, 16%, 16%)
Luminance
0.026
Coco’s Black #1C1C17
RGB
rgb(28, 28, 23)
HSL
hsl(60, 10%, 10%)
Luminance
0.011
Matt Black #151614
RGB
rgb(21, 22, 20)
HSL
hsl(90, 5%, 8%)
Luminance
0.008
Crisp Lettuce #519585
RGB
rgb(81, 149, 133)
HSL
hsl(166, 30%, 45%)
Luminance
0.249
Seiheki Green #376862
RGB
rgb(55, 104, 98)
HSL
hsl(173, 31%, 31%)
Luminance
0.116
Pine Hollow #203F42
RGB
rgb(32, 63, 66)
HSL
hsl(185, 35%, 19%)
Luminance
0.043
Ore Bluish Black #19343A
RGB
rgb(25, 52, 58)
HSL
hsl(191, 40%, 16%)
Luminance
0.030

Contrast & accessibility

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

Aa #BABE7C on #151614 9.29:1 AAA
Aa #BABE7C on #1C1C17 8.75:1 AAA
Aa #BABE7C on #2F2D22 7.07:1 AAA
Aa #BABE7C on #19343A 6.74:1 AA
Aa #BABE7C on #203F42 5.80:1 AA
Aa #BABE7C on #373F34 5.59:1 AA
Aa #BABE7C on #443F2D 5.39:1 AA
Aa #151614 on #519585 5.18:1 AA
Aa #1C1C17 on #519585 4.88:1 AA
Aa #7D825A on #151614 4.51:1 AA
Aa #BABE7C on #49513E 4.25:1 AA Large
Aa #7D825A on #1C1C17 4.25:1 AA Large
Aa #2F2D22 on #519585 3.94:1 AA Large
Aa #519585 on #19343A 3.76:1 AA Large
Aa #7D825A on #2F2D22 3.43:1 AA Large
Aa #7D825A on #19343A 3.27:1 AA Large
Aa #BABE7C on #376862 3.24:1 AA Large
Aa #519585 on #203F42 3.23:1 AA Large
Aa #373F34 on #519585 3.11:1 AA Large
Aa #443F2D on #519585 3.00:1 AA Large
Aa #151614 on #376862 2.87:1 Fail
Aa #7D825A on #203F42 2.82:1 Fail
Aa #7D825A on #373F34 2.71:1 Fail
Aa #1C1C17 on #376862 2.70:1 Fail
Aa #7D825A on #443F2D 2.61:1 Fail
Aa #49513E on #519585 2.37:1 Fail
Aa #49513E on #151614 2.19:1 Fail
Aa #2F2D22 on #376862 2.18:1 Fail
Aa #376862 on #19343A 2.08:1 Fail
Aa #BABE7C on #7D825A 2.06:1 Fail
Aa #7D825A on #49513E 2.06:1 Fail
Aa #49513E on #1C1C17 2.06:1 Fail
Aa #519585 on #376862 1.80:1 Fail
Aa #BABE7C on #519585 1.79:1 Fail
Aa #376862 on #203F42 1.79:1 Fail
Aa #373F34 on #376862 1.73:1 Fail
Aa #443F2D on #151614 1.72:1 Fail
Aa #49513E on #2F2D22 1.67:1 Fail
Aa #373F34 on #151614 1.66:1 Fail
Aa #443F2D on #376862 1.66:1 Fail
Aa #443F2D on #1C1C17 1.62:1 Fail
Aa #151614 on #203F42 1.60:1 Fail
Aa #49513E on #19343A 1.59:1 Fail
Aa #7D825A on #376862 1.57:1 Fail
Aa #373F34 on #1C1C17 1.57:1 Fail
Aa #1C1C17 on #203F42 1.51:1 Fail
Aa #151614 on #19343A 1.38:1 Fail
Aa #49513E on #203F42 1.37:1 Fail
Aa #49513E on #373F34 1.32:1 Fail
Aa #49513E on #376862 1.31:1 Fail
Aa #443F2D on #2F2D22 1.31:1 Fail
Aa #2F2D22 on #151614 1.31:1 Fail
Aa #1C1C17 on #19343A 1.30:1 Fail
Aa #49513E on #443F2D 1.27:1 Fail
Aa #373F34 on #2F2D22 1.27:1 Fail
Aa #443F2D on #19343A 1.25:1 Fail
Aa #2F2D22 on #1C1C17 1.24:1 Fail
Aa #2F2D22 on #203F42 1.22:1 Fail
Aa #373F34 on #19343A 1.21:1 Fail
Aa #203F42 on #19343A 1.16:1 Fail
Aa #7D825A on #519585 1.15:1 Fail
Aa #443F2D on #203F42 1.08:1 Fail
Aa #1C1C17 on #151614 1.06:1 Fail
Aa #2F2D22 on #19343A 1.05:1 Fail
Aa #373F34 on #443F2D 1.04:1 Fail
Aa #373F34 on #203F42 1.04:1 Fail

Similar palettes

#000000 #3D0000 #950101 #FF0000
4 colors
#E23E57 #88304E #522546 #311D3F
4 colors
#FF204E #A0153E #5D0E41 #00224D
4 colors
#030637 #3C0753 #720455 #910A67
4 colors
#1C0A00 #361500 #603601 #CC9544
4 colors
#252525 #FF0000 #AF0404 #414141
4 colors
#362222 #171010 #423F3E #2B2B2B
4 colors
#1A1A1D #3B1C32 #6A1E55 #A64D79
4 colors