Material design primary colors in CSS format


Here is the list of color extracted from material design color patterns, it included only the primary colors which being frequently used by the web developers. The following 17 colors can be applied for foreground color, background color,  border color and fill colors of the different types of HTML elements by using just color name. Go through all the class names mentioned bellow and apply wherever you need the color to plot. Copy the code and past in your project main CSS and use it as you go.

.purple {
  color: #9C27B0;
}

.deep-purple {
  color: #673AB7;
}

.indigo {
  color: #3F51B5;
}

.blue {
  color: #2196F3;
}

.loght-blue {
  color: #03A9F4;
}

.cyan {
  color: #00BCD4;
}

.teal {
  color: #009688;
}

.green {
  color: #4CAF50;
}

.light-green {
  color: #8BC34A;
}

.lime {
  color: #CDDC39;
}

.yellow {
  color: #FFEB3B;
}

.amber {
  color: #FFC107;
}

.orange {
  color: #FF9800;
}

.deep-orange {
  color: #FF5722;
}

.brown {
  color: #795548;
}

.grey {
  color: #9E9E9E;
}

.blue-grey {
  color: #607D8B;
}


/*background*/
/* Colors */
.bg-red {
  background-color: #f44336;
}

.bg-pink {
  background-color: #E91E63;
}

.bg-purple {
  background-color: #9C27B0;
}

.bg-deep-purple {
  background-color: #673AB7;
}

.bg-indigo {
  background-color: #3F51B5;
}

.bg-blue {
  background-color: #2196F3;
}

.bg-loght-blue {
  background-color: #03A9F4;
}

.bg-cyan {
  background-color: #00BCD4;
}

.bg-teal {
  background-color: #009688;
}

.bg-green {
  background-color: #4CAF50;
}

.bg-light-green {
  background-color: #8BC34A;
}

.bg-lime {
  background-color: #CDDC39;
}

.bg-yellow {
  background-color: #FFEB3B;
}

.bg-amber {
  background-color: #FFC107;
}

.bg-orange {
  background-color: #FF9800;
}

.bg-deep-orange {
  background-color: #FF5722;
}

.bg-brown {
  background-color: #795548;
}

.bg-grey {
  background-color: #9E9E9E;
}

.bg-blue-grey {
  background-color: #607D8B;
}

/*border*/

/* Colors */
.border-red {
  border-color: #f44336;
}

.border-pink {
  border-color: #E91E63;
}

.border-purple {
  border-color: #9C27B0;
}

.border-deep-purple {
  border-color: #673AB7;
}

.border-indigo {
  border-color: #3F51B5;
}

.border-blue {
  border-color: #2196F3;
}

.border-loght-blue {
  border-color: #03A9F4;
}

.border-cyan {
  border-color: #00BCD4;
}

.border-teal {
  border-color: #009688;
}

.border-green {
  border-color: #4CAF50;
}

.border-light-green {
  border-color: #8BC34A;
}

.border-lime {
  border-color: #CDDC39;
}

.border-yellow {
  border-color: #FFEB3B;
}

.border-amber {
  border-color: #FFC107;
}

.border-orange {
  border-color: #FF9800;
}

.border-deep-orange {
  border-color: #FF5722;
}

.border-brown {
  border-color: #795548;
}

.border-grey {
  border-color: #9E9E9E;
}

.border-blue-grey {
  border-color: #607D8B;
}

/*Fill*/

.fill-pink {
  fill: #E91E63;
}

.fill-purple {
  fill: #9C27B0;
}

.fill-deep-purple {
  fill: #673AB7;
}

.fill-indigo {
  fill: #3F51B5;
}

.fill-blue {
  fill: #2196F3;
}

.fill-loght-blue {
  fill: #03A9F4;
}

.fill-cyan {
  fill: #00BCD4;
}

.fill-teal {
  fill: #009688;
}

.fill-green {
  fill: #4CAF50;
}

.fill-light-green {
  fill: #8BC34A;
}

.fill-lime {
  fill: #CDDC39;
}

.fill-yellow {
  fill: #FFEB3B;
}

.fill-amber {
  fill: #FFC107;
}

.fill-orange {
  fill: #FF9800;
}

.fill-deep-orange {
  fill: #FF5722;
}

.fill-brown {
  fill: #795548;
}

.fill-grey {
  fill: #9E9E9E;
}

.fill-blue-grey {
  fill: #607D8B;
}


/* Hover Colors */

.purple-hvr:hover {
  color: #9C27B0;
}

.deep-purple-hvr:hover {
  color: #673AB7;
}

.indigo-hvr:hover {
  color: #3F51B5;
}

.blue-hvr:hover {
  color: #2196F3;
}

.loght-blue-hvr:hover {
  color: #03A9F4;
}

.cyan-hvr:hover {
  color: #00BCD4;
}

.teal-hvr:hover {
  color: #009688;
}

.green-hvr:hover {
  color: #4CAF50;
}

.light-green-hvr:hover {
  color: #8BC34A;
}

.lime-hvr:hover {
  color: #CDDC39;
}

.yellow-hvr:hover {
  color: #FFEB3B;
}

.amber-hvr:hover {
  color: #FFC107;
}

.orange-hvr:hover {
  color: #FF9800;
}

.deep-orange-hvr:hover {
  color: #FF5722;
}

.brown-hvr:hover {
  color: #795548;
}

.grey-hvr:hover {
  color: #9E9E9E;
}

.blue-grey-hvr:hover {
  color: #607D8B;
}


/*background*/
/* Colors */
.bg-red-hvr:hover {
  background-color: #f44336;
}

.bg-pink-hvr:hover {
  background-color: #E91E63;
}

.bg-purple-hvr:hover {
  background-color: #9C27B0;
}

.bg-deep-purple-hvr:hover {
  background-color: #673AB7;
}

.bg-indigo-hvr:hover {
  background-color: #3F51B5;
}

.bg-blue-hvr:hover {
  background-color: #2196F3;
}

.bg-loght-blue-hvr:hover {
  background-color: #03A9F4;
}

.bg-cyan-hvr:hover {
  background-color: #00BCD4;
}

.bg-teal-hvr:hover {
  background-color: #009688;
}

.bg-green-hvr:hover {
  background-color: #4CAF50;
}

.bg-light-green-hvr:hover {
  background-color: #8BC34A;
}

.bg-lime-hvr:hover {
  background-color: #CDDC39;
}

.bg-yellow-hvr:hover {
  background-color: #FFEB3B;
}

.bg-amber-hvr:hover {
  background-color: #FFC107;
}

.bg-orange-hvr:hover {
  background-color: #FF9800;
}

.bg-deep-orange-hvr:hover {
  background-color: #FF5722;
}

.bg-brown-hvr:hover {
  background-color: #795548;
}

.bg-grey-hvr:hover {
  background-color: #9E9E9E;
}

.bg-blue-grey-hvr:hover {
  background-color: #607D8B;
}

/*border*/

/* Colors */
.border-red-hvr:hover {
  border-color: #f44336;
}

.border-pink-hvr:hover {
  border-color: #E91E63;
}

.border-purple-hvr:hover {
  border-color: #9C27B0;
}

.border-deep-purple-hvr:hover {
  border-color: #673AB7;
}

.border-indigo-hvr:hover {
  border-color: #3F51B5;
}

.border-blue-hvr:hover {
  border-color: #2196F3;
}

.border-loght-blue-hvr:hover {
  border-color: #03A9F4;
}

.border-cyan-hvr:hover {
  border-color: #00BCD4;
}

.border-tealH {
  border-color: #009688;
}

.border-green-hvr:hover {
  border-color: #4CAF50;
}

.border-light-green-hvr:hover {
  border-color: #8BC34A;
}

.border-lime-hvr:hover {
  border-color: #CDDC39;
}

.border-yellow-hvr:hover {
  border-color: #FFEB3B;
}

.border-amber-hvr:hover {
  border-color: #FFC107;
}

.border-orange-hvr:hover {
  border-color: #FF9800;
}

.border-deep-orange-hvr:hover {
  border-color: #FF5722;
}

.border-brown-hvr:hover {
  border-color: #795548;
}

.border-grey-hvr:hover {
  border-color: #9E9E9E;
}

.border-blue-grey-hvr:hover {
  border-color: #607D8B;
}

/*Fill*/

.fill-pink-hvr:hover {
  fill: #E91E63;
}

.fill-purple-hvr:hover {
  fill: #9C27B0;
}

.fill-deep-purple-hvr:hover {
  fill: #673AB7;
}

.fill-indigo-hvr:hover {
  fill: #3F51B5;
}

.fill-blue-hvr:hover {
  fill: #2196F3;
}

.fill-loght-blue-hvr:hover {
  fill: #03A9F4;
}

.fill-cyan-hvr:hover {
  fill: #00BCD4;
}

.fill-teal-hvr:hover {
  fill: #009688;
}

.fill-green-hvr:hover {
  fill: #4CAF50;
}

.fill-light-green-hvr:hover {
  fill: #8BC34A;
}

.fill-lime-hvr:hover {
  fill: #CDDC39;
}

.fill-yellow-hvr:hover {
  fill: #FFEB3B;
}

.fill-amber-hvr:hover {
  fill: #FFC107;
}

.fill-orange-hvr:hover {
  fill: #FF9800;
}

.fill-deep-orange-hvr:hover {
  fill: #FF5722;
}

.fill-brown-hvr:hover {
  fill: #795548;
}

.fill-grey-hvr:hover {
  fill: #9E9E9E;
}

.fill-blue-grey-hvr:hover {
  fill: #607D8B;
}


Comments