@kreattix/colors NPM

Kreattix Design Colors

Basic color library that provides all basic colors with 10 shades each. It also provide a color class that accept any color and allow you to change its lightness and darkeness then get the updated color in any format you want.

npm version

Installation

using npm

$ npm install @kreattix/colors

using yarn

$ yarn add @kreattix/colors

using color shades

import { Colors } from '@kreattix/colors'

...
...

const color = {
    main: Colors.red[500],
    hover: Colors.red[400],
    active: Colors.red[600],
}

...
...

using color class to create your own shade

import { Color, Colors } from '@kreattix/colors'

...
...

const color = Color(Colors.blue[500]) // using color from library
// or
const color = Color('#465657') // using hex value
// or
const color = Color('#465657dd') // using hexa value
// or
const color = Color('rgb(10,30,50)') // using rgb value
// or
const color = Color('rgba(10,30,50,0.8)') // using rgba value
// or
const color = Color('hsl(120,30%,50%)') // using hsl value
// or
const color = Color('hsla(120,30%,50%,0.7)') // using hsla value

...
...

// manipulate color as per your needs

// to lighten the color
const lightColor = color.lighten(10) // it accepts a number as amount of ratio to lighten the color

// to darken the color
const darkColor = color.darken(20) // it accepts a number as amount of ratio to darken the color

// to negate the color
const negatedColor = color.negate()

// to get the luminance of color
const luminance = color.luminance

// to get the contrast color
const contrastColor = color.contrast

// to ser the threshold for contrast color
color.setThreshold(100) // default is 128

// to get the threshold of contrast color
const threshold = color.threshold

...
...

// then you can get the updated color in any format
const lightColorHEX = lightColor.hex
const lightColorRGB = lightColor.rgb
const darkColorHEXA = darkColor.hexa
const darkColorRGBA = darkColor.rgba
const lightColorHSL = lightColor.hsl
const lightColorHSLA = lightColor.hsla

...
...

Available colors

| Colors | ------------ | red | pink | purple | violet | indigo | blue | lightBlue | cyan | teal | green | lightGreen | lime | yellow | amber | orange | deepOrange | brown | gray | blueGray | white | black