npmpackage.info

Gathering detailed insights and metrics for material-design-colors

Other packages similar to material-design-colors

material-colors

1.2.6

Colors of Google's Material Design made available to coders

@material/material-color-utilities

0.3.0

Algorithms and utilities that power the Material Design 3 (M3) color system, including choosing theme colors from images and creating tones of colors; all in a new color space.

sass-material-colors

0.0.5

Google's Material Design colors for Sass/Scss

material-dynamic-colors

1.1.2

This project is based on https://material-foundation.github.io/material-theme-builder and uses official color utilities from Material Design.

Gathering detailed insights and metrics for material-design-colors

material-design-colors - 1.0.2 | npmpackage.info

material-design-colors

The Google Material Design color palette for Sass and Less

1.0.2

MIT

CSS

1.7

Installations

npm install material-design-colors

Developer Guide

BETA

Typescript

No

Module System

N/A

Node Version

6.9.2

NPM Version

3.10.9 Score

74.4

Supply Chain

90.2

Quality

75.2

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

0

Total

0

Closed

0

Issues

Open

0

Total

1

Closed

1

Releases

v1.0.2

1.0.2

Updated on Dec 11, 2016

v1.0.1

1.0.1

Updated on Dec 08, 2015

v1.0.0

1.0.0

Updated on Dec 08, 2015

View All 3 releases

Languages

CSS

JavaScript

CSS (97.83%)

JavaScript (2.17%)

Developer

ValentinGot

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

2 Stars

41 Commits

1 Watchers

1 Branches

1 Contributors

Updated on Dec 13, 2017

Maintainers

View All 1 Contributors

Package Meta Information

Latest Version

1.0.2

Package Id

material-design-colors@1.0.2

Size

33.36 kB

NPM Version

3.10.9

Node Version

6.9.2

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dev Dependencies

del gulp gulp-minify-css gulp-rename gulp-ruby-sass gulp-sourcemaps

Google Material Design color palette

The Google Material Design color palette for Sass and Less

Provides quick color palettes for Sass and Less projects.

Install

You may install this module via bower or npm.

$ bower install material-design-colors
$ npm install material-design-colors

Quick use

Sass

To use the Sass variables, you can import the colors file like this:

1@import 'material-design-colors/colors'
2
3.btn {
4    color: $white-color;
5    background-color: $red-500-color;
6}

Less

To use the Less variables, you can import the colors file like this:

1@import 'material-design-colors/colors'
2
3.btn {
4    color: @white-color;
5    background-color: @red-500-color;
6}

Classes

To use the CSS classes variables, you can import the dist/material-design.min.css CSS in your html.

There is two different set of CSS classes :

The ones made to change the color attribute (.{color}-{accent}-cl)
The ones made to change the background-color attribute (.{color}-{accent}-bg)

1<html>
2    <head>
3        <link rel="stylesheet" href="material-design-colors/dist/material-design.min.css" />
4    </head>
5    
6    <body>
7        <button class="white-cl red-500-bg">Material design colors</button>
8    </body>
9</html>

License

This module is released under the MIT license.

https://github.com/ValentinGot/material-design-colors/blob/master/LICENSE

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

SAST

Determines if the project uses static code analysis.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

1.7

/10

Last Scanned on 2025-07-14

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More