Generate Palette
  1. Color Palettes
  2. Brown palette Materialize CSS

Brown palette Materialize CSS

  • brown lighten-5
    #efebe9
  • brown lighten-4
    #d7ccc8
  • brown lighten-3
    #bcaaa4
  • brown lighten-2
    #a1887f
  • brown lighten-1
    #8d6e63
  • brown
    #795548
  • brown darken-1
    #6d4c41
  • brown darken-2
    #5d4037
  • brown darken-3
    #4e342e
  • brown darken-4
    #3e2723
  11.81k

Brown palette Materialize CSS has 10 colors, mostly red. The lightest color is Brown lighten-5 (#EFEBE9), the darkest Brown darken-4 (#3E2723). Its strongest contrast pair is #3E2723 on #EFEBE9 (11.6:1, WCAG AAA).

Created at 12/27/2017 21:23
bymz
The palette consists of Light, Semi dark, Dark colors. Accent colors brown darken-3 #4e342e and brown darken-4 #3e2723. Palette has Neutral, Warm colors temperature.

A sequential monochrome scheme: tints and shades of a single hue step between light and dark.

By lightness, this palette runs from #3E2723 (darkest) to #EFEBE9 (lightest). The lightness range is wide.

Overall saturation feels mostly muted (lower chroma) — 100% of colors are muted.

An analogous palette: its hues sit close together on the color wheel, within about 11°.

Overall temperature among swatches leans warm (9 of 10).

HEX codes (sorted): #3E2723, #4E342E, #5D4037, #6D4C41, #795548, #8D6E63, #A1887F, #BCAAA4, #D7CCC8, #EFEBE9

Palette Brown palette Materialize CSS combines 10 color codes:
HEX: #efebe9, RGB: (239, 235, 233); HEX: #d7ccc8, RGB: (215, 204, 200); HEX: #bcaaa4, RGB: (188, 170, 164)
HEX: #a1887f, RGB: (161, 136, 127); HEX: #8d6e63, RGB: (141, 110, 99); HEX: #795548, RGB: (121, 85, 72)
HEX: #6d4c41, RGB: (109, 76, 65); HEX: #5d4037, RGB: (93, 64, 55); HEX: #4e342e, RGB: (78, 52, 46)
HEX: #3e2723, RGB: (62, 39, 35)
Simplified version of palette colors
Shade of White Smoke, Shade of Light Gray, Tint of Dark Gray, Shade of Rosy Brown, Tint of Sienna, Shade of Sienna, Tint of Saddle Brown, Shade of Saddle Brown, Tint of Maroon, Tint of Black
Color scheme was created by mz

Color codes in palette

Brown palette Materialize CSS color codes HEX, RGB information in table

ColorHEXRGBNameAlternative name
#efebe9#efebe9RGB(239, 235, 233)brown lighten-5—
#d7ccc8#d7ccc8RGB(215, 204, 200)brown lighten-4—
#bcaaa4#bcaaa4RGB(188, 170, 164)brown lighten-3—
#a1887f#a1887fRGB(161, 136, 127)brown lighten-2—
#8d6e63#8d6e63RGB(141, 110, 99)brown lighten-1—
#795548#795548RGB(121, 85, 72)brown—
#6d4c41#6d4c41RGB(109, 76, 65)brown darken-1—
#5d4037#5d4037RGB(93, 64, 55)brown darken-2—
#4e342e#4e342eRGB(78, 52, 46)brown darken-3—
#3e2723#3e2723RGB(62, 39, 35)brown darken-4—

Color Palette Contrast

17 color pairs have low contrast and need improvement which may impact readability.
Text ColorBackground ColorContrast Ratio
#efebe9
#d7ccc8
1.32
#efebe9
#bcaaa4
1.88
#d7ccc8
#bcaaa4
1.41
#bcaaa4
#a1887f
1.48
#a1887f
#8d6e63
1.39
#a1887f
#795548
1.97

Image palette Brown palette Materialize CSS png

Brown palette Materialize CSS: brown lighten-5, brown lighten-4, brown lighten-3, brown lighten-2, brown lighten-1, brown
 Download image