1.0.1 â€ĸ Published 4 years ago

matercolor v1.0.1

Weekly downloads
-
License
MIT
Repository
github
Last release
4 years ago

A tiny, zero-dependency libary for building harmonious material palettes for any color.

Created with ❤ī¸ by Arvind Srinivasan.

🎉 Installation

Use the package manager npm to install @arvindcheenu/matercolor from commandline.

npm i @arvindcheenu/matercolor@1.0.0

Alternatively, you can update your package.json as:

"@arvindcheenu/matercolor": "1.0.0"

🚸 Usage

🎨 Palette Constructor

After installing, import and use the library like any ES6 default imports. For example like this:

import Matercolor from 'matercolor'
let PurplePalette = new Matercolor('#6200EE')

Logging PurplePalette gives the output of the constructor with the following organisation.

Matercolor {
  color: '#6200EE',
  options: { threshold: 128, light: 200, main: 500, dark: 700 },
  palette: [Function] }

🔧 Options

As you can see from the constructor, currently Matercolor offers 4 options for configuration.

OptionsTypeDefaultWhat it does
lightNumber200Assigns light to the palette object with given key
mainNumber500Assigns main to the palette object with given key
darkNumber700Assigns dark to the palette object with given key
thresholdNumber128Sets the Contrast threshold for the foreground text

🎛ī¸ Palette Methods

The following methods are available as of version 1.0.0. | Method | Type | What it returns | |-|-|-| | .palette() | Getter | A Material Palette Object with Text Contrast Values for the given color | | .shades() | Getter | Light, Main and Dark shades for the given color | | .accents() | Getter | Accent Color Palette for the given color |

🏗ī¸ Palette Object Structure

Logging the palette output for the PurplePalette color by

PurplePalette.palette()

we get an output that follows the following structure.

{
  primary : { // type of palette
    50 : { // lightest color in palette
        hex  : String, // Valid Hex Color Code
        rgb  : {r: Number, g: Number, b: Number, string: String}
        hsl  : {h: Number, s: Number, l: Number, string: String},
        cymk : {c: Number, y: Number, m: Number, k: Number, string: String},
        contrastText: 'white'|'black' },
    100 : [Object],
    200 : [Object],
    ...
    900 : [Object], // darkest color in palette
    // Accents 
    A100 : [Object],
    A200 : [Object],
    A400 : [Object],
    A700 : [Object],
  } // ...More coming soon
}

All the other functions are simply helpers to access specific parts of the complete palette.

If we do not change the defaults, getting the shades of the above color is as simple as

PurplePalette.shades("primary") // where primary is a palette type

which returns the light, main and dark variants of the color (see below). The choice of these palettes can be configured through tweaking the options.

{ light:
   { hex: '#626262',
     rgb: { r: 98, g: 98, b: 98, string: 'rgb(98,98,98)' },
     hsl: { h: 0, s: 0, l: 38.4, string: 'hsl(0,0%,38.4%)' },
     cymk:
      { c: 0, y: 0, m: 0, k: 61.5686, string: 'cymk(0%,0%,0%,61.5686%)' },
     contrastText: 'white' },
  main:
   { hex: '#6200ee',
     rgb: { r: 98, g: 0, b: 238, string: 'rgb(98,0,238)' },
     hsl: { h: 265, s: 100, l: 46.7, string: 'hsl(265,100%,46.7%)' },
     cymk:
      { c: 58.8235,
        y: 0,
        m: 100,
        k: 6.6667,
        string: 'cymk(58.8235%,0%,100%,6.6667%)' },
     contrastText: 'white' },
  dark:
   { hex: '#620062',
     rgb: { r: 98, g: 0, b: 98, string: 'rgb(98,0,98)' },
     hsl: { h: 300, s: 100, l: 19.2, string: 'hsl(300,100%,19.2%)' },
     cymk:
      { c: 0,
        y: 0,
        m: 100,
        k: 61.5686,
        string: 'cymk(0%,0%,100%,61.5686%)' },
     contrastText: 'white' } }

Similarly, for extracting the accents from the palette object, we can use:

PurplePalette.accents("primary") // where primary is a palette type

which, for the given color, generates the output:

{ A100:
   { hex: '#626262',
     rgb: { r: 98, g: 98, b: 98, string: 'rgb(98,98,98)' },
     hsl: { h: 0, s: 0, l: 38.4, string: 'hsl(0,0%,38.4%)' },
     cymk:
      { c: 0, y: 0, m: 0, k: 61.5686, string: 'cymk(0%,0%,0%,61.5686%)' },
     contrastText: 'white' },
  A200:
   { hex: '#626262',
     rgb: { r: 98, g: 98, b: 98, string: 'rgb(98,98,98)' },
     hsl: { h: 0, s: 0, l: 38.4, string: 'hsl(0,0%,38.4%)' },
     cymk:
      { c: 0, y: 0, m: 0, k: 61.5686, string: 'cymk(0%,0%,0%,61.5686%)' },
     contrastText: 'white' },
  A400:
   { hex: '#626262',
     rgb: { r: 98, g: 98, b: 98, string: 'rgb(98,98,98)' },
     hsl: { h: 0, s: 0, l: 38.4, string: 'hsl(0,0%,38.4%)' },
     cymk:
      { c: 0, y: 0, m: 0, k: 61.5686, string: 'cymk(0%,0%,0%,61.5686%)' },
     contrastText: 'white' },
  A700:
   { hex: '#6200ee',
     rgb: { r: 98, g: 0, b: 238, string: 'rgb(98,0,238)' },
     hsl: { h: 265, s: 100, l: 46.7, string: 'hsl(265,100%,46.7%)' },
     cymk:
      { c: 58.8235,
        y: 0,
        m: 100,
        k: 6.6667,
        string: 'cymk(58.8235%,0%,100%,6.6667%)' },
     contrastText: 'white' } }

These outputs can also be used in conjunction with Material UI's createMuiTheme to configure custom palettes. For a better understanding, you can checkout the demo.

🕹ī¸ Demo Project

🚧🚧🚧   CONSTRUCTION IN PROGRESS   🚧🚧🚧

đŸ›Ŗī¸ Roadmap

Current Stable Release

  • Generate Primary Palette for any given color
  • Generate Accents for Palette
  • Get Contrast Colors for Foreground Text

Next Possible Stable Release

  • Generate Complementary Palette
  • Generate Analogous Palette
  • Generate Triadic Palette

The Future

  • Coming soon...

👐 Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change. Please make sure to create or update tests as appropriate.

Acknowledgements

📝 License

MIT

1.0.1

4 years ago

1.0.0

4 years ago