1. material-colors
Colors of Google's Material Design made available to coders
material-colors
Package: material-colors
Created by: shuhei
Last modified: Sat, 08 Apr 2023 20:46:30 GMT
Version: 1.2.6
License: ISC
Downloads: 5,257,991
Repository: https://github.com/shuhei/material-colors

Install

npm install material-colors
yarn add material-colors

Bower version
NPM version
NPM downloads
CircleCI

Material Colors

Colors from Google's Material Design made available to coders.

The colors are scraped from the guide. The idea to publish colors in multiple forms is stolen from mrmrs/colors.

Available Forms

  • CSS: Classes for prototyping such as .color-red-100, .bg-red-100, .border-red-100, .fill-red-100 and .stroke-red-100.
  • CSS variables such as --md-red-100.
  • Sass, Scss: Color variables such as $md-red-100.
  • Less: Color variables such as @md-red-100.
  • Stylus: Color variables such as md-red-100.
  • JSON: Raw data of colors. Key names are hypenated. e.g. deep-purple
  • JavaScript: Color set object provided via AMD, CommonJS or global variable materialColor. Key names are camelCase. e.g. deepPurple
  • EcmaScript module: Color variables are exported as camelCase names.

See dist directory or demo for more details.

Usage

Download

Download what you like from dist directory and use it.

Bower

bower install material-colors

and use what you like in bower_components/material-colors/dist.

NPM

npm install material-colors

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin