Red palette Materialize CSS
- red-lighten-5#ffebee
- red-lighten-4#ffcdd2
- red-lighten-3#ef9a9a
- red-lighten-2#e57373
- red-lighten-1#ef5350
- red#f44336
- red-darken-1#e53935
- red-darken-2#d32f2f
- red-darken-3#c62828
- red-darken-4#b71c1c
- red-accent-1#ff8a80
- red-accent-2#ff5252
- red-accent-3#ff1744
- red-accent-4#d50000
Created at 12/16/2017 13:43
The palette consists of Light, Semi dark, Dark colors. Accent colors red-lighten-5 #ffebee and red-lighten-4 #ffcdd2. Palette has Neutral, Warm colors temperature.
By lightness, this palette runs from #B71C1C (darkest) to #FFEBEE (lightest). The lightness range is moderate.
Overall saturation feels vivid (higher chroma) — 100% of colors are vivid.
An analogous palette: its hues sit close together on the color wheel, within about 16°.
Overall temperature among swatches leans warm (13 of 14).
HEX codes (sorted): #B71C1C, #C62828, #D32F2F, #D50000, #E53935, #E57373, #EF5350, #EF9A9A, #F44336, #FF1744, #FF5252, #FF8A80, #FFCDD2, #FFEBEE
Palette Red palette Materialize CSS combines 14 color codes:
HEX: #ffebee, RGB: (255, 235, 238); HEX: #ffcdd2, RGB: (255, 205, 210); HEX: #ef9a9a, RGB: (239, 154, 154)
HEX: #e57373, RGB: (229, 115, 115); HEX: #ef5350, RGB: (239, 83, 80); HEX: #f44336, RGB: (244, 67, 54)
HEX: #e53935, RGB: (229, 57, 53); HEX: #d32f2f, RGB: (211, 47, 47); HEX: #c62828, RGB: (198, 40, 40)
HEX: #b71c1c, RGB: (183, 28, 28); HEX: #ff8a80, RGB: (255, 138, 128); HEX: #ff5252, RGB: (255, 82, 82)
HEX: #ff1744, RGB: (255, 23, 68); HEX: #d50000, RGB: (213, 0, 0)
Simplified version of palette colors
Shade of Lavender Blush, Tint of Pink, Tint of Light Coral, Shade of Light Coral, Tint of Indian Red, Shade of Tomato, Tint of Red, Tint of Crimson, Tint of Firebrick, Shade of Firebrick, Tint of Salmon, Shade of Tomato, Tint of Crimson, Shade of Firebrick
Color scheme was created by mz
Color codes in palette
Red palette Materialize CSS color codes HEX, RGB information in table
| Color | HEX | RGB | Name | Alternative name |
|---|---|---|---|---|
| #ffebee | #ffebee | RGB(255, 235, 238) | red-lighten-5 | Just Pink Enough |
| #ffcdd2 | #ffcdd2 | RGB(255, 205, 210) | red-lighten-4 | — |
| #ef9a9a | #ef9a9a | RGB(239, 154, 154) | red-lighten-3 | — |
| #e57373 | #e57373 | RGB(229, 115, 115) | red-lighten-2 | — |
| #ef5350 | #ef5350 | RGB(239, 83, 80) | red-lighten-1 | — |
| #f44336 | #f44336 | RGB(244, 67, 54) | red | — |
| #e53935 | #e53935 | RGB(229, 57, 53) | red-darken-1 | — |
| #d32f2f | #d32f2f | RGB(211, 47, 47) | red-darken-2 | — |
| #c62828 | #c62828 | RGB(198, 40, 40) | red-darken-3 | — |
| #b71c1c | #b71c1c | RGB(183, 28, 28) | red-darken-4 | — |
| #ff8a80 | #ff8a80 | RGB(255, 138, 128) | red-accent-1 | — |
| #ff5252 | #ff5252 | RGB(255, 82, 82) | red-accent-2 | — |
| #ff1744 | #ff1744 | RGB(255, 23, 68) | red-accent-3 | — |
| #d50000 | #d50000 | RGB(213, 0, 0) | red-accent-4 | — |
Color Palette Contrast
61 color pairs have low contrast and need improvement which may impact readability.
| Text Color | Background Color | Contrast Ratio |
|---|---|---|
#ffebee | #ffcdd2 | 1.23 |
#ffebee | #ef9a9a | 1.88 |
#ffebee | #ff8a80 | 1.99 |
#ffcdd2 | #ef9a9a | 1.52 |
#ffcdd2 | #ff8a80 | 1.62 |
#ef9a9a | #e57373 | 1.38 |
Image palette Red palette Materialize CSS png
Export Palette
Download the "Red palette Materialize CSS" in multiple formats for seamless integration into your design projects.
Available formats: