The material-colors npm package provides a collection of colors based on Google's Material Design color palette. It allows developers to easily access and use the color palette in their web projects, ensuring a consistent and visually appealing design that adheres to Material Design principles.

What are material-colors's main functionalities?

Accessing a specific color

This feature allows you to access a specific color within the Material Design palette by specifying the color name and its shade. The example demonstrates how to access the red color with a shade of 500.

"const materialColors = require('material-colors');
console.log(materialColors.red['500']); // Outputs the hex value for Material Design's red 500"

Getting a random color

This feature enables you to get a random color from the Material Design palette. The code sample shows how to select a random color by generating a random index and accessing the color at that index.

"const materialColors = require('material-colors');
const allColors = Object.values(materialColors);
const randomColor = allColors[Math.floor(Math.random() * allColors.length)];
console.log(randomColor);"

Other packages similar to material-colors

Readme

Source

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

Keywords

FAQs

What is material-colors?

Is material-colors popular?

Is material-colors well maintained?

Last updated on 03 Jun 2018

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install