Material Design color scheme with Mytril
Mytril integrates the full Material Design color chart, giving developers access to Google’s design standards directly in their Svelte projects. By activating the Material Design palette in your configuration, you can apply consistent and visually appealing colors across your components using simple CSS variables.
How to Enable the Material Design Palette
- Open plugins/mytril.(js|ts).
- Add this configuration to activate the Material palette:
// plugins/mytril.(js|ts)
export default {
theme: {
palette: 'material'
}
};- Restart your environment to load the Material color variables.
Material Design color options
Once activated, you can access a wide range of colors directly in your stylesheets.
Use material colors in components by easily applying material colors to your components using CSS variables like this one:
button {
background-color: var(--red-500);
color: var(--blue-100);
}Or use hex codes provided within the palette for more detailed control.
- red
- pink
- purple
- deep-purple
- indigo
- blue
- light-blue
- cyan
- teal
- green
- light-green
- lime
- yellow
- amber
- orange
- deep-orange
- brown
- gray
- blue-gray
red
red 50
red 100
red 200
red 300
red 400
red 500
red 600
red 700
red 800
red 900
red A100
red A200
red A400
red A700
pink
pink 50
pink 100
pink 200
pink 300
pink 400
pink 500
pink 600
pink 700
pink 800
pink 900
pink A100
pink A200
pink A400
pink A700
purple
purple 50
purple 100
purple 200
purple 300
purple 400
purple 500
purple 600
purple 700
purple 800
purple 900
purple A100
purple A200
purple A400
purple A700
deep-purple
deep-purple 50
deep-purple 100
deep-purple 200
deep-purple 300
deep-purple 400
deep-purple 500
deep-purple 600
deep-purple 700
deep-purple 800
deep-purple 900
deep-purple A100
deep-purple A200
deep-purple A400
deep-purple A700
indigo
indigo 50
indigo 100
indigo 200
indigo 300
indigo 400
indigo 500
indigo 600
indigo 700
indigo 800
indigo 900
indigo A100
indigo A200
indigo A400
indigo A700
blue
blue 50
blue 100
blue 200
blue 300
blue 400
blue 500
blue 600
blue 700
blue 800
blue 900
blue A100
blue A200
blue A400
blue A700
light-blue
light-blue 50
light-blue 100
light-blue 200
light-blue 300
light-blue 400
light-blue 500
light-blue 600
light-blue 700
light-blue 800
light-blue 900
light-blue A100
light-blue A200
light-blue A400
light-blue A700
cyan
cyan 50
cyan 100
cyan 200
cyan 300
cyan 400
cyan 500
cyan 600
cyan 700
cyan 800
cyan 900
cyan A100
cyan A200
cyan A400
cyan A700
teal
teal 50
teal 100
teal 200
teal 300
teal 400
teal 500
teal 600
teal 700
teal 800
teal 900
teal A100
teal A200
teal A400
teal A700
green
green 50
green 100
green 200
green 300
green 400
green 500
green 600
green 700
green 800
green 900
green A100
green A200
green A400
green A700
light-green
light-green 50
light-green 100
light-green 200
light-green 300
light-green 400
light-green 500
light-green 600
light-green 700
light-green 800
light-green 900
light-green A100
light-green A200
light-green A400
light-green A700
lime
lime 50
lime 100
lime 200
lime 300
lime 400
lime 500
lime 600
lime 700
lime 800
lime 900
lime A100
lime A200
lime A400
lime A700
yellow
yellow 50
yellow 100
yellow 200
yellow 300
yellow 400
yellow 500
yellow 600
yellow 700
yellow 800
yellow 900
yellow A100
yellow A200
yellow A400
yellow A700
amber
amber 50
amber 100
amber 200
amber 300
amber 400
amber 500
amber 600
amber 700
amber 800
amber 900
amber A100
amber A200
amber A400
amber A700
orange
orange 50
orange 100
orange 200
orange 300
orange 400
orange 500
orange 600
orange 700
orange 800
orange 900
orange A100
orange A200
orange A400
orange A700
deep-orange
deep-orange 50
deep-orange 100
deep-orange 200
deep-orange 300
deep-orange 400
deep-orange 500
deep-orange 600
deep-orange 700
deep-orange 800
deep-orange 900
deep-orange A100
deep-orange A200
deep-orange A400
deep-orange A700
brown
brown 50
brown 100
brown 200
brown 300
brown 400
brown 500
brown 600
brown 700
brown 800
brown 900
gray
gray 50
gray 100
gray 200
gray 300
gray 400
gray 500
gray 600
gray 700
gray 800
gray 900
blue-gray
blue-gray 50
blue-gray 100
blue-gray 200
blue-gray 300
blue-gray 400
blue-gray 500
blue-gray 600
blue-gray 700
blue-gray 800
blue-gray 900
generic
white
black
Why choose Material Design colors?
Material Design colors ensure your interface follows a consistent and standardized color scheme, making it a great choice for developers building with Material Design principles.