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
2
Created at 12/27/2017 21:23
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.
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
| Color | HEX | RGB | Name | Alternative name |
|---|---|---|---|---|
| #efebe9 | #efebe9 | RGB(239, 235, 233) | brown lighten-5 | — |
| #d7ccc8 | #d7ccc8 | RGB(215, 204, 200) | brown lighten-4 | — |
| #bcaaa4 | #bcaaa4 | RGB(188, 170, 164) | brown lighten-3 | — |
| #a1887f | #a1887f | RGB(161, 136, 127) | brown lighten-2 | — |
| #8d6e63 | #8d6e63 | RGB(141, 110, 99) | brown lighten-1 | — |
| #795548 | #795548 | RGB(121, 85, 72) | brown | — |
| #6d4c41 | #6d4c41 | RGB(109, 76, 65) | brown darken-1 | — |
| #5d4037 | #5d4037 | RGB(93, 64, 55) | brown darken-2 | — |
| #4e342e | #4e342e | RGB(78, 52, 46) | brown darken-3 | — |
| #3e2723 | #3e2723 | RGB(62, 39, 35) | brown darken-4 | — |
Color Palette Contrast
17 color pairs have low contrast and need improvement which may impact readability.
| Text Color | Background Color | Contrast 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
Export Palette
Download the "Brown palette Materialize CSS" in multiple formats for seamless integration into your design projects.
Available formats: