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
2
Created at 12/27/2017 21:07
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 #F57F17 (darkest) to #FFFDE7 (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 32°.
Overall temperature among swatches leans warm (13 of 14).
HEX codes (sorted): #F57F17, #F9A825, #FBC02D, #FDD835, #FFD600, #FFEA00, #FFEB3B, #FFEE58, #FFF176, #FFF59D, #FFF9C4, #FFFDE7, #FFFF00, #FFFF8D
Palette Yellow palette Materialize CSS combines 14 color codes:
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
Tint of Beige, Shade of Lemon Chiffon, Tint of Khaki, Tint of Khaki, Tint of Yellow, Shade of Yellow, Tint of Gold, Tint of Goldenrod, Tint of Orange, Shade of Dark Orange, Tint of Khaki, Yellow, Tint of Gold, Shade of Gold
Color scheme was created by mz
Color 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: