❤
npm
Sign UpSign In

material-colors-utils

0.0.2 • Public • Published

material-colors-utils

Material color palettes. Random colors and palettes. Random colors and palettes by name or any string.

Install

npm i material-colors-utils

Colors

🎨 Material Design Colors, Color Palette | Material UI

Usage

Get random color

import { getRandomColor } from "material-colors-utils";
//Param: Color variant
getRandomColor(300)//Ex: #64B5F6
//Default is 500
getRandomColor()//Ex: #2196F3

Get random palette

import { getRandomPalette } from "material-colors-utils";
console.log({palette:getRandomPalette()})
//{
//    palette:{
//      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"
//    }
//}

Get random palette by string

import { getRandomPaletteByString } from "material-colors-utils";
console.log({palette:getRandomPaletteByString("janselALB")});
//{
//    palette:{
//      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"
//    }
//}

Get random color by string

import { getRandomColorByString } from "material-colors-utils";
//Param: Color variant
getRandomColorByString("janselALB",300)//Ex: #64B5F6
//Default is 500
getRandomColorByString("janselALB")//Ex: #2196F3

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"
//    }
//}

Get color

Example

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

Palettes

  • red
  • pink
  • purple
  • deepPurple
  • indigo
  • blue
  • lightBlue
  • cyan
  • teal
  • green
  • lightGreen
  • lime
  • yellow
  • amber
  • orange
  • deepOrange
  • brown
  • grey
  • blueGrey

Variants

  • 50
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
  • A100 (undefined in brown, grey and and blueGrey)
  • A200 (undefined in brown, grey and and blueGrey)
  • A400 (undefined in brown, grey and and blueGrey)
  • A700 (undefined in brown, grey and and blueGrey)

Readme

Keywords

Package Sidebar

Install

npm i material-colors-utils

Weekly Downloads

1

Version

0.0.2

License

MIT

Unpacked Size

11.2 kB

Total Files

4

Last publish

Collaborators

  • janselalb
Try on RunKit
Report malware