Loading...
Created at 06/09/2025 16:10
Material Design Interaction Layers
- Elevation Gray#eceff1
- Ripple Blue#42a5f5
- Touchpoint Amber#ffc107
- Toolbar Graphite#212121
- Snack Red#ef5350
- Dialog Cream#fff8e1
The palette consists of Light, Dark colors. Accent colors Ripple Blue #42a5f5 and Dialog Cream #fff8e1. Palette has Neutral, Cool, Warm colors temperature.
By lightness, this palette runs from #212121 (darkest) to #FFF8E1 (lightest). The lightness range is wide.
Overall saturation feels vivid (higher chroma).
Some hue pairs sit near complementary positions — you may read this as complementary contrast (loose heuristic).
Overall temperature among swatches leans warm.
HEX codes (sorted): #212121, #42A5F5, #ECEFF1, #EF5350, #FFC107, #FFF8E1
Palette Material Design Interaction Layers has combination of 6 codes colors:
HEX: #eceff1, RGB: (236, 239, 241); HEX: #42a5f5, RGB: (66, 165, 245); HEX: #ffc107, RGB: (255, 193, 7)
HEX: #212121, RGB: (33, 33, 33); HEX: #ef5350, RGB: (239, 83, 80); HEX: #fff8e1, RGB: (255, 248, 225)
Simplified version of palette colors
Tint of whitesmoke, Shade of dodgerblue, Tint of gold, Shade of Black, Shade of indianred, Shade of cornsilk
Color scheme was created by colorslib
Colors codes in palette
Material Design Interaction Layers color codes HEX, RGB information in table
| Color | HEX | RGB | Name | Alternative name |
| #eceff1 | #eceff1 | RGB(236, 239, 241) | Elevation Gray | — |
| #42a5f5 | #42a5f5 | RGB(66, 165, 245) | Ripple Blue | — |
| #ffc107 | #ffc107 | RGB(255, 193, 7) | Touchpoint Amber | — |
| #212121 | #212121 | RGB(33, 33, 33) | Toolbar Graphite | Lead |
| #ef5350 | #ef5350 | RGB(239, 83, 80) | Snack Red | — |
| #fff8e1 | #fff8e1 | RGB(255, 248, 225) | Dialog Cream | Still Morning |
Color Palette Contrast
5 color pairs have low contrast and need improvement which may impact readability.
| Text Color | Background Color | Contrast Ratio |
#eceff1 | #ffc107 | 1.41 |
#eceff1 | #fff8e1 | 1.08 |
#42a5f5 | #ffc107 | 1.62 |
#42a5f5 | #ef5350 | 1.31 |
#ffc107 | #fff8e1 | 1.53 |
Image palette Material Design Interaction Layers png
Export Palette
Download the "Material Design Interaction Layers" in multiple formats for seamless integration into your design projects.
Available formats: