material-colors

What is material-colors?

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

open-color

Open-color is a color scheme optimized for UI design and hand-picked by designers. While it is not specifically based on Material Design, it offers a similar functionality by providing a curated set of colors that can be easily integrated into web projects. It differs from material-colors by offering a unique color palette not tied to Material Design.

README

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