Created at 12/27/2017 21:07
2
Yellow palette Materialize CSS
- yellow lighten-5#fffde7
- yellow lighten-4#fff9c4
- yellow lighten-3#fff59d
- yellow lighten-2#fff176
- yellow lighten-1#ffee58
- yellow#ffeb3b
- yellow darken-1#fdd835
- yellow darken-2#fbc02d
- yellow darken-3#f9a825
- yellow darken-4#f57f17
- yellow accent-1#ffff8d
- yellow accent-2#ffff00
- yellow accent-3#ffea00
- yellow accent-4#ffd600
The palette consists of Light colors. Accent colors yellow lighten-5 #fffde7 and yellow lighten-4 #fff9c4. Palette has Neutral, Warm colors temperature.
By lightness, this palette runs from #FFFF00 (darkest) to #FFFDE7 (lightest). The lightness range is moderate.
Overall saturation feels vivid (higher chroma).
Hue spacing suggests a mostly analogous cluster (loose heuristic, not a strict color-theory label).
Overall temperature among swatches leans warm.
HEX codes (sorted): #F57F17, #F9A825, #FBC02D, #FDD835, #FFD600, #FFEA00, #FFEB3B, #FFEE58, #FFF176, #FFF59D, #FFF9C4, #FFFDE7, #FFFF00, #FFFF8D
Palette Yellow palette Materialize CSS has combination of 14 codes colors:
HEX: #fffde7, RGB: (255, 253, 231); HEX: #fff9c4, RGB: (255, 249, 196); HEX: #fff59d, RGB: (255, 245, 157)
HEX: #fff176, RGB: (255, 241, 118); HEX: #ffee58, RGB: (255, 238, 88); HEX: #ffeb3b, RGB: (255, 235, 59)
HEX: #fdd835, RGB: (253, 216, 53); HEX: #fbc02d, RGB: (251, 192, 45); HEX: #f9a825, RGB: (249, 168, 37)
HEX: #f57f17, RGB: (245, 127, 23); HEX: #ffff8d, RGB: (255, 255, 141); HEX: #ffff00, RGB: (255, 255, 0)
HEX: #ffea00, RGB: (255, 234, 0); HEX: #ffd600, RGB: (255, 214, 0)
Simplified version of palette colors
Shade of beige, Tint of lemonchiffon, Shade of Khaki, Shade of Khaki, Shade of Yellow, Tint of Yellow, Shade of gold, Shade of goldenrod, Shade of Orange, Tint of darkorange, Shade of Khaki, Yellow, Shade of gold, Tint of gold
Color scheme was created by mz
Colors codes in palette
Yellow palette Materialize CSS color codes HEX, RGB information in table
| Color | HEX | RGB | Name | Alternative name |
| #fffde7 | #fffde7 | RGB(255, 253, 231) | yellow lighten-5 | — |
| #fff9c4 | #fff9c4 | RGB(255, 249, 196) | yellow lighten-4 | — |
| #fff59d | #fff59d | RGB(255, 245, 157) | yellow lighten-3 | — |
| #fff176 | #fff176 | RGB(255, 241, 118) | yellow lighten-2 | — |
| #ffee58 | #ffee58 | RGB(255, 238, 88) | yellow lighten-1 | — |
| #ffeb3b | #ffeb3b | RGB(255, 235, 59) | yellow | — |
| #fdd835 | #fdd835 | RGB(253, 216, 53) | yellow darken-1 | — |
| #fbc02d | #fbc02d | RGB(251, 192, 45) | yellow darken-2 | — |
| #f9a825 | #f9a825 | RGB(249, 168, 37) | yellow darken-3 | — |
| #f57f17 | #f57f17 | RGB(245, 127, 23) | yellow darken-4 | — |
| #ffff8d | #ffff8d | RGB(255, 255, 141) | yellow accent-1 | — |
| #ffff00 | #ffff00 | RGB(255, 255, 0) | yellow accent-2 | Yellow |
| #ffea00 | #ffea00 | RGB(255, 234, 0) | yellow accent-3 | — |
| #ffd600 | #ffd600 | RGB(255, 214, 0) | yellow accent-4 | — |
Color Palette Contrast
82 color pairs have low contrast and need improvement which may impact readability.
| Text Color | Background Color | Contrast Ratio |
#fffde7 | #fff9c4 | 1.04 |
#fffde7 | #fff59d | 1.08 |
#fffde7 | #fff176 | 1.13 |
#fffde7 | #ffee58 | 1.16 |
#fffde7 | #ffeb3b | 1.18 |
#fffde7 | #fdd835 | 1.35 |
Image palette Yellow palette Materialize CSS png
Export Palette
Download the "Yellow palette Materialize CSS" in multiple formats for seamless integration into your design projects.
Available formats: