The complete Material Design color palette for JavaScript & TypeScript. 19 color families, powerful utilities, and CSS generation.
npm install mat-design-colors
Complete Material Design palette with all shades from 50 to 900 plus accent colors
Lighten, darken, mix colors, calculate contrast, and more with powerful utility functions
Full TypeScript support with comprehensive type definitions and JSDoc documentation
Generate CSS custom properties and utility classes automatically
Click any color to copy its hex code to your clipboard
Powerful functions for color manipulation and analysis
Generate ready-to-use CSS for your projects
/* Click "Generate" to create CSS */
import { MaterialColor, ColorShade } from 'mat-design-colors';
// Access any color
const red500 = MaterialColor.RED[ColorShade.S500];
// "#F44336"
// Accent shades
const pinkA200 = MaterialColor.PINK[ColorShade.SA200];
// "#FF4081"import { lighten, darken, alpha, mix } from 'mat-design-colors';
// Lighten a color
const lighter = lighten('#F44336', 20);
// Add transparency
const transparent = alpha('#F44336', 0.5);
// "rgba(244, 67, 54, 0.5)"
// Mix two colors
const mixed = mix('#FF0000', '#0000FF');import {
getColor,
getContrastColor,
generateCSSVariables
} from 'mat-design-colors';
// Get color by name
const blue = getColor('BLUE', 'S500');
// Auto contrast text color
const textColor = getContrastColor('#F44336');
// "#FFFFFF"
// Generate CSS variables
const css = generateCSSVariables();