@kreattix/colors
v1.1.6
Published
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.
Downloads
14
Maintainers
Readme
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.
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
License
MIT