Palette

Shido has color classes taken from Material Design, ready to use in your project. The color palette is generated from internal mixins, if you want to use the color variables you must having Shido within your build process.

Color list

Red red-500

50

#

rgb()

100

#

rgb()

200

#

rgb()

300

#

rgb()

400

#

rgb()

500

#

rgb()

600

#

rgb()

700

#

rgb()

800

#

rgb()

900

#

rgb()

Pink pink-500

50

#

rgb()

100

#

rgb()

200

#

rgb()

300

#

rgb()

400

#

rgb()

500

#

rgb()

600

#

rgb()

700

#

rgb()

800

#

rgb()

900

#

rgb()

Purple purple-500

50

#

rgb()

100

#

rgb()

200

#

rgb()

300

#

rgb()

400

#

rgb()

500

#

rgb()

600

#

rgb()

700

#

rgb()

800

#

rgb()

900

#

rgb()

Deep Purple deep-purple-500

50

#

rgb()

100

#

rgb()

200

#

rgb()

300

#

rgb()

400

#

rgb()

500

#

rgb()

600

#

rgb()

700

#

rgb()

800

#

rgb()

900

#

rgb()

Indigo indigo-500

50

#

rgb()

100

#

rgb()

200

#

rgb()

300

#

rgb()

400

#

rgb()

500

#

rgb()

600

#

rgb()

700

#

rgb()

800

#

rgb()

900

#

rgb()

Blue blue-500

50

#

rgb()

100

#

rgb()

200

#

rgb()

300

#

rgb()

400

#

rgb()

500

#

rgb()

600

#

rgb()

700

#

rgb()

800

#

rgb()

900

#

rgb()

Light Blue light-blue-500

50

#

rgb()

100

#

rgb()

200

#

rgb()

300

#

rgb()

400

#

rgb()

500

#

rgb()

600

#

rgb()

700

#

rgb()

800

#

rgb()

900

#

rgb()

Cyan cyan-500

50

#

rgb()

100

#

rgb()

200

#

rgb()

300

#

rgb()

400

#

rgb()

500

#

rgb()

600

#

rgb()

700

#

rgb()

800

#

rgb()

900

#

rgb()

Teal teal-500

50

#

rgb()

100

#

rgb()

200

#

rgb()

300

#

rgb()

400

#

rgb()

500

#

rgb()

600

#

rgb()

700

#

rgb()

800

#

rgb()

900

#

rgb()

Green green-500

50

#

rgb()

100

#

rgb()

200

#

rgb()

300

#

rgb()

400

#

rgb()

500

#

rgb()

600

#

rgb()

700

#

rgb()

800

#

rgb()

900

#

rgb()

Light Green light-green-500

50

#

rgb()

100

#

rgb()

200

#

rgb()

300

#

rgb()

400

#

rgb()

500

#

rgb()

600

#

rgb()

700

#

rgb()

800

#

rgb()

900

#

rgb()

Lime lime-500

50

#

rgb()

100

#

rgb()

200

#

rgb()

300

#

rgb()

400

#

rgb()

500

#

rgb()

600

#

rgb()

700

#

rgb()

800

#

rgb()

900

#

rgb()

Yellow yellow-500

50

#

rgb()

100

#

rgb()

200

#

rgb()

300

#

rgb()

400

#

rgb()

500

#

rgb()

600

#

rgb()

700

#

rgb()

800

#

rgb()

900

#

rgb()

Amber amber-500

50

#

rgb()

100

#

rgb()

200

#

rgb()

300

#

rgb()

400

#

rgb()

500

#

rgb()

600

#

rgb()

700

#

rgb()

800

#

rgb()

900

#

rgb()

Orange orange-500

50

#

rgb()

100

#

rgb()

200

#

rgb()

300

#

rgb()

400

#

rgb()

500

#

rgb()

600

#

rgb()

700

#

rgb()

800

#

rgb()

900

#

rgb()

Deep Orange deep-orange-500

50

#

rgb()

100

#

rgb()

200

#

rgb()

300

#

rgb()

400

#

rgb()

500

#

rgb()

600

#

rgb()

700

#

rgb()

800

#

rgb()

900

#

rgb()

Brown brown-500

50

#

rgb()

100

#

rgb()

200

#

rgb()

300

#

rgb()

400

#

rgb()

500

#

rgb()

600

#

rgb()

700

#

rgb()

800

#

rgb()

900

#

rgb()

Grey grey-500

50

#

rgb()

100

#

rgb()

200

#

rgb()

300

#

rgb()

400

#

rgb()

500

#

rgb()

600

#

rgb()

700

#

rgb()

800

#

rgb()

900

#

rgb()

Blue Grey blue-grey-500

50

#

rgb()

100

#

rgb()

200

#

rgb()

300

#

rgb()

400

#

rgb()

500

#

rgb()

600

#

rgb()

700

#

rgb()

800

#

rgb()

900

#

rgb()

Basic white / black

white

#

rgb()

black

#

rgb()