Indigo palette Materialize CSS
- indigo lighten-4#e8eaf6
- indigo lighten-3#c5cae9
- indigo lighten-2#9fa8da
- indigo lighten-1#7986cb
- #5c6bc0
- indigo#3f51b5
- indigo darken-1#3949ab
- indigo darken-2#303f9f
- indigo darken-3#283593
- indigo darken-4#1a237e
- indigo accent-1#8c9eff
- indigo accent-4#304ffe
- indigo accent-3#3d5afe
- indigo accent-2#536dfe
1
Created at 12/27/2017 20:20
The palette consists of Light, Semi dark, Dark colors. Accent colors indigo accent-1 #8c9eff and indigo accent-4 #304ffe. Palette has Neutral, Cool colors temperature.
By lightness, this palette runs from #1A237E (darkest) to #E8EAF6 (lightest). The lightness range is wide.
Saturation sits in a moderate mid-range, averaging 64% across the palette.
An analogous palette: its hues sit close together on the color wheel, within about 4°.
Overall temperature among swatches leans cool (13 of 14).
HEX codes (sorted): #1A237E, #283593, #303F9F, #304FFE, #3949AB, #3D5AFE, #3F51B5, #536DFE, #5C6BC0, #7986CB, #8C9EFF, #9FA8DA, #C5CAE9, #E8EAF6
Palette Indigo palette Materialize CSS combines 14 color codes:
HEX: #e8eaf6, RGB: (232, 234, 246); HEX: #c5cae9, RGB: (197, 202, 233); HEX: #9fa8da, RGB: (159, 168, 218)
HEX: #7986cb, RGB: (121, 134, 203); HEX: #5c6bc0, RGB: (92, 107, 192); HEX: #3f51b5, RGB: (63, 81, 181)
HEX: #3949ab, RGB: (57, 73, 171); HEX: #303f9f, RGB: (48, 63, 159); HEX: #283593, RGB: (40, 53, 147)
HEX: #1a237e, RGB: (26, 35, 126); HEX: #8c9eff, RGB: (140, 158, 255); HEX: #304ffe, RGB: (48, 79, 254)
HEX: #3d5afe, RGB: (61, 90, 254); HEX: #536dfe, RGB: (83, 109, 254)
Simplified version of palette colors
Tint of Lavender, Tint of Light Steel Blue, Shade of Light Steel Blue, Shade of Cornflower Blue, Tint of Royal Blue, Shade of Slate Blue, Tint of Dark Slate Blue, Shade of Dark Slate Blue, Shade of Dark Slate Blue, Tint of Midnight Blue, Tint of Cornflower Blue, Shade of Slate Blue, Shade of Royal Blue, Tint of Royal Blue
Color scheme was created by mz
Color codes in palette
Indigo palette Materialize CSS color codes HEX, RGB information in table
| Color | HEX | RGB | Name | Alternative name |
|---|---|---|---|---|
| #e8eaf6 | #e8eaf6 | RGB(232, 234, 246) | indigo lighten-4 | — |
| #c5cae9 | #c5cae9 | RGB(197, 202, 233) | indigo lighten-3 | — |
| #9fa8da | #9fa8da | RGB(159, 168, 218) | indigo lighten-2 | — |
| #7986cb | #7986cb | RGB(121, 134, 203) | indigo lighten-1 | — |
| #5c6bc0 | #5c6bc0 | RGB(92, 107, 192) | — | — |
| #3f51b5 | #3f51b5 | RGB(63, 81, 181) | indigo | — |
| #3949ab | #3949ab | RGB(57, 73, 171) | indigo darken-1 | — |
| #303f9f | #303f9f | RGB(48, 63, 159) | indigo darken-2 | — |
| #283593 | #283593 | RGB(40, 53, 147) | indigo darken-3 | — |
| #1a237e | #1a237e | RGB(26, 35, 126) | indigo darken-4 | — |
| #8c9eff | #8c9eff | RGB(140, 158, 255) | indigo accent-1 | — |
| #304ffe | #304ffe | RGB(48, 79, 254) | indigo accent-4 | — |
| #3d5afe | #3d5afe | RGB(61, 90, 254) | indigo accent-3 | — |
| #536dfe | #536dfe | RGB(83, 109, 254) | indigo accent-2 | — |
Color Palette Contrast
43 color pairs have low contrast and need improvement which may impact readability.
| Text Color | Background Color | Contrast Ratio |
|---|---|---|
#e8eaf6 | #c5cae9 | 1.34 |
#e8eaf6 | #9fa8da | 1.92 |
#c5cae9 | #9fa8da | 1.43 |
#c5cae9 | #8c9eff | 1.53 |
#9fa8da | #7986cb | 1.49 |
#9fa8da | #8c9eff | 1.07 |
Image palette Indigo palette Materialize CSS png
Export Palette
Download the "Indigo palette Materialize CSS" in multiple formats for seamless integration into your design projects.
Available formats: