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 install @kreattix/colors$ yarn add @kreattix/colorsimport { Colors } from '@kreattix/colors'
...
...
const color = {
main: Colors.red[500],
hover: Colors.red[400],
active: Colors.red[600],
}
...
...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
...
...| Colors |
|---|
| red |
| pink |
| purple |
| violet |
| indigo |
| blue |
| lightBlue |
| cyan |
| teal |
| green |
| lightGreen |
| lime |
| yellow |
| amber |
| orange |
| deepOrange |
| brown |
| gray |
| blueGray |
| white |
| black |
MIT