Colors
MatCSS has a set of colors that you can use to create your website. The colors are meant to look joyful, bright and modern.
Color Demo
Indigo 1
Indigo 2
Indigo 3
Indigo 4
Indigo 5
Indigo 6
Indigo 7
Indigo 8
Indigo 9
Purple 1
Purple 2
Purple 3
Purple 4
Purple 5
Purple 6
Purple 7
Purple 8
Purple 9
Pink 1
Pink 2
Pink 3
Pink 4
Pink 5
Pink 6
Pink 7
Pink 8
Pink 9
Red 1
Red 2
Red 3
Red 4
Red 5
Red 6
Red 7
Red 8
Red 9
Orange 1
Orange 2
Orange 3
Orange 4
Orange 5
Orange 6
Orange 7
Orange 8
Orange 9
Yellow 1
Yellow 2
Yellow 3
Yellow 4
Yellow 5
Yellow 6
Yellow 7
Yellow 8
Yellow 9
Green 1
Green 2
Green 3
Green 4
Green 5
Green 6
Green 7
Green 8
Green 9
Teal 1
Teal 2
Teal 3
Teal 4
Teal 5
Teal 6
Teal 7
Teal 8
Teal 9
Cyan 1
Cyan 2
Cyan 3
Cyan 4
Cyan 5
Cyan 6
Cyan 7
Cyan 8
Cyan 9
Blue 1
Blue 2
Blue 3
Blue 4
Blue 5
Blue 6
Blue 7
Blue 8
Blue 9
Gray 1
Gray 2
Gray 3
Gray 4
Gray 5
Gray 6
Gray 7
Gray 8
Gray 9
Cloud 5
Dark 5
These colors are available as CSS variables, so you can easily use them in your own CSS.
The format of the variable names is --mat-<color>-<shade>, where <color> is the color name and <shade> is the shade number.
Full List
| Color | CSS Variable | Hex | Preview |
|---|---|---|---|
| Indigo-1 | --mat-indigo-1 | #dee5fe | |
| Indigo-2 | --mat-indigo-2 | #becbfd | |
| Indigo-3 | --mat-indigo-3 | #9db0fc | |
| Indigo-4 | --mat-indigo-4 | #7d96fb | |
| Indigo-5 | --mat-indigo-5 | #5c7cfa | |
| Indigo-6 | --mat-indigo-6 | #4a63c8 | |
| Indigo-7 | --mat-indigo-7 | #374a96 | |
| Indigo-8 | --mat-indigo-8 | #253264 | |
| Indigo-9 | --mat-indigo-9 | #121932 | |
| Purple-1 | --mat-purple-1 | #fbe1ff | |
| Purple-2 | --mat-purple-2 | #f6c3ff | |
| Purple-3 | --mat-purple-3 | #f2a6ff | |
| Purple-4 | --mat-purple-4 | #ed88ff | |
| Purple-5 | --mat-purple-5 | #e96aff | |
| Purple-6 | --mat-purple-6 | #ba55cc | |
| Purple-7 | --mat-purple-7 | #8c4099 | |
| Purple-8 | --mat-purple-8 | #5d2a66 | |
| Purple-9 | --mat-purple-9 | #2f1533 | |
| Pink-1 | --mat-pink-1 | #ffe4f5 | |
| Pink-2 | --mat-pink-2 | #ffc9ea | |
| Pink-3 | --mat-pink-3 | #ffade0 | |
| Pink-4 | --mat-pink-4 | #ff92d5 | |
| Pink-5 | --mat-pink-5 | #ff77cb | |
| Pink-6 | --mat-pink-6 | #cc5fa2 | |
| Pink-7 | --mat-pink-7 | #99477a | |
| Pink-8 | --mat-pink-8 | #663051 | |
| Pink-9 | --mat-pink-9 | #331829 | |
| Red-1 | --mat-red-1 | #ffd9d9 | |
| Red-2 | --mat-red-2 | #ffb3b3 | |
| Red-3 | --mat-red-3 | #ff8c8c | |
| Red-4 | --mat-red-4 | #ff6666 | |
| Red-5 | --mat-red-5 | #ff4040 | |
| Red-6 | --mat-red-6 | #cc3333 | |
| Red-7 | --mat-red-7 | #992626 | |
| Red-8 | --mat-red-8 | #661a1a | |
| Red-9 | --mat-red-9 | #330d0d | |
| Orange-1 | --mat-orange-1 | #ffeacc | |
| Orange-2 | --mat-orange-2 | #ffd699 | |
| Orange-3 | --mat-orange-3 | #ffc166 | |
| Orange-4 | --mat-orange-4 | #ffad33 | |
| Orange-5 | --mat-orange-5 | #ff9800 | |
| Orange-6 | --mat-orange-6 | #cc7a00 | |
| Orange-7 | --mat-orange-7 | #995b00 | |
| Orange-8 | --mat-orange-8 | #663d00 | |
| Orange-9 | --mat-orange-9 | #331e00 | |
| Yellow-1 | --mat-yellow-1 | #fffad2 | |
| Yellow-2 | --mat-yellow-2 | #fef5a5 | |
| Yellow-3 | --mat-yellow-3 | #fef179 | |
| Yellow-4 | --mat-yellow-4 | #fdec4c | |
| Yellow-5 | --mat-yellow-5 | #fde71f | |
| Yellow-6 | --mat-yellow-6 | #cab919 | |
| Yellow-7 | --mat-yellow-7 | #988b13 | |
| Yellow-8 | --mat-yellow-8 | #655c0c | |
| Yellow-9 | --mat-yellow-9 | #332e06 | |
| Green-1 | --mat-green-1 | #e9fcd3 | |
| Green-2 | --mat-green-2 | #d3f9a7 | |
| Green-3 | --mat-green-3 | #bdf77a | |
| Green-4 | --mat-green-4 | #a7f44e | |
| Green-5 | --mat-green-5 | #91f122 | |
| Green-6 | --mat-green-6 | #74c11b | |
| Green-7 | --mat-green-7 | #579114 | |
| Green-8 | --mat-green-8 | #3a600e | |
| Green-9 | --mat-green-9 | #1d3007 | |
| Teal-1 | --mat-teal-1 | #ccf3f3 | |
| Teal-2 | --mat-teal-2 | #99e6e6 | |
| Teal-3 | --mat-teal-3 | #66dada | |
| Teal-4 | --mat-teal-4 | #33cdcd | |
| Teal-5 | --mat-teal-5 | #00c1c1 | |
| Teal-6 | --mat-teal-6 | #009a9a | |
| Teal-7 | --mat-teal-7 | #007474 | |
| Teal-8 | --mat-teal-8 | #004d4d | |
| Teal-9 | --mat-teal-9 | #002727 | |
| Cyan-1 | --mat-cyan-1 | #ccf4e5 | |
| Cyan-2 | --mat-cyan-2 | #99e9cb | |
| Cyan-3 | --mat-cyan-3 | #66ddb2 | |
| Cyan-4 | --mat-cyan-4 | #33d298 | |
| Cyan-5 | --mat-cyan-5 | #00c77e | |
| Cyan-6 | --mat-cyan-6 | #009f65 | |
| Cyan-7 | --mat-cyan-7 | #00774c | |
| Cyan-8 | --mat-cyan-8 | #005032 | |
| Cyan-9 | --mat-cyan-9 | #002819 | |
| Blue-1 | --mat-blue-1 | #d7f2ff | |
| Blue-2 | --mat-blue-2 | #afe5ff | |
| Blue-3 | --mat-blue-3 | #86d9ff | |
| Blue-4 | --mat-blue-4 | #5eccff | |
| Blue-5 | --mat-blue-5 | #36bfff | |
| Blue-6 | --mat-blue-6 | #2b99cc | |
| Blue-7 | --mat-blue-7 | #207399 | |
| Blue-8 | --mat-blue-8 | #164c66 | |
| Blue-9 | --mat-blue-9 | #0b2633 | |
| Gray-1 | --mat-gray-1 | #ececec | |
| Gray-2 | --mat-gray-2 | #d8d8d8 | |
| Gray-3 | --mat-gray-3 | #c5c5c5 | |
| Gray-4 | --mat-gray-4 | #b1b1b1 | |
| Gray-5 | --mat-gray-5 | #9e9e9e | |
| Gray-6 | --mat-gray-6 | #7e7e7e | |
| Gray-7 | --mat-gray-7 | #5f5f5f | |
| Gray-8 | --mat-gray-8 | #3f3f3f | |
| Gray-9 | --mat-gray-9 | #202020 | |
| Cloud-1 | --mat-cloud-1 | #f5f7f9 | |
| Cloud-2 | --mat-cloud-2 | #f3f6f8 | |
| Cloud-3 | --mat-cloud-3 | #f2f5f8 | |
| Cloud-4 | --mat-cloud-4 | #f2f5f7 | |
| Cloud-5 | --mat-cloud-5 | #f1f4f7 | |
| Cloud-6 | --mat-cloud-6 | #e5e8eb | |
| Cloud-7 | --mat-cloud-7 | #d9dcde | |
| Cloud-8 | --mat-cloud-8 | #cdcfd2 | |
| Cloud-9 | --mat-cloud-9 | #b5b7b9 | |
| Dark-1 | --mat-dark-1 | #62707d | |
| Dark-2 | --mat-dark-2 | #4d5d6b | |
| Dark-3 | --mat-dark-3 | #435362 | |
| Dark-4 | --mat-dark-4 | #384a5a | |
| Dark-5 | --mat-dark-5 | #2e4051 | |
| Dark-6 | --mat-dark-6 | #2c3d4d | |
| Dark-7 | --mat-dark-7 | #293a49 | |
| Dark-8 | --mat-dark-8 | #273645 | |
| Dark-9 | --mat-dark-9 | #23303d |