DEV Community

JanselLopez
JanselLopez

Posted on

Using Material's colors in javascript

#material #javascript #npm

Install 

npm i material-colors-utils
Enter fullscreen mode Exit fullscreen mode

Usage

Get palette 

import { blue } from "material-colors-utils";
console.log({blue})
//{
//    blue:{
//      50: "#E3F2FD",
//      100: "#BBDEFB",
//      200: "#90CAF9",
//      300: "#64B5F6",
//      400: "#42A5F5",
//      500: "#2196F3",
//      600: "#1E88E5",
//      700: "#1976D2",
//      800: "#1565C0",
//      900: "#0D47A1",
//      A100: "#82B1FF",
//      A200: "#448AFF",
//      A400: "#2979FF",
//      A700: "#2962FF"
//    }
//}
Enter fullscreen mode Exit fullscreen mode

Get color

Example 

import { blue } from "material-colors-utils";
console.log(blue[500])//#2196F3
Enter fullscreen mode Exit fullscreen mode

Doc

material-colors-utils

Top comments (0)

Read next

reversecher profile image

Building a Free Online Music Creator: Free Incredibox Sprunki

reverse Ch -

salehmubashar profile image

Create a Dynamic Code Playground with SandPack + React!

Saleh Mubashar -

muhammadawaisshaikh profile image

Streamlining API Calls in Angular v18 with TanStack Angular Query

Muhammad Awais -

jeet_dhandha profile image

Simplifying Excel Table Parsing in Node.js with @libs-jd/xlsx-parse-table

Jeet Dhandha -