Kolory dodajemy w prosty sposób, wystarczy dodać odpowiednią klasę do elementu, podstawowych kolorów jest kilkanaście, oto one:
| red | pink | purple | lime | yellow | deep-orange |
| deep-purple | indigo | blue | green | amber | brown |
| light-blue | cyan | teal | light-green | orange | grey |
Przykład purple lighten-5
Przykład purple lighten-4
Przykład purple lighten-3
Przykład purple lighten-2
Przykład purple lighten-1
Przykład purple
Przykład purple darken-1
Przykład purple darken-2
Przykład purple darken-3
Przykład purple darken-4
Przykład purple accent-1
Przykład purple accent-2
Przykład purple accent-3
Przykład purple accent-4
Jak widać na przykładzie koloru purpurowego obok, jeśli chcemy użyć odpowiedniego odcienia (lighten, darken, accent) wystarczy połączyć z nim podstawowy kolor i użyć odpowiedniego numeru.
Należy dodać, że oczywiście kolory można używać również w stosunku do tekstu, wystarczy w klasie połączyć "text" z interesującym nas odcieniem.
Przykład:
<span class="blue-text text-darken-2">Niebieski tekst</span>
Daje nam niebieski tekst:
