@chayns/colors
JavaScript utility functions for the calculation of colors for chayns
Usage
Installation
This package can be installed from npm using npm install @chayns/colors
.
Color Model Value Ranges
HEX
- Three (four with transparency) components of each two hexadecimal characters, starting with a
#
. - Example: #00ff3d (chayns blue)
RGB255
- r, g, b: 0 - 255
- a (transparency, optional): 0 - 1
RGB1
- r, g, b: 0 - 1
- a (transparency, optional): 0 - 1
HSL (Hue - Saturation - Lightness)
- h: 0 - 360
- s, l: 0 - 1
- a (transparency, optional): 0 - 1
HSV (Hue - Saturation - Value)
- h: 0 - 360
- s, v: 0 - 1
- a (transparency, optional): 0 - 1
Available Functions
This package provides general functions to convert colors from one color model into another as well as chayns-specific functions for generating chayns colors.
All functions allow the usage of colors with a transparency. You just have to add a
to your color (fourth hexadecimal pair for HEX color).
You can import the functions like this: import { isHex } from @chayns/colors;
.
Color model conversion functions:
- rgb1ToRgb255(rgb1)
- rgb1ToHex(rgb1)
- rgb1ToHsl(rgb1)
- rgb1ToHsv(rgb1)
- rgb255ToRgb1(rgb255)
- rgb255ToHex(rgb255)
- rgb255ToHsl(rgb255)
- rgb255ToHsv(rgb255)
- hexToRgb1(hex)
- hexToRgb255(hex)
- hexToHsl(hex)
- hexToHsv(hex)
- hslToRgb1(hsl)
- hslToRgb255(hsl)
- hslToHex(hsl)
- hslToHsv(hsl)
- hsvToRgb1(hsv)
- hsvToRgb255(hsv)
- hsvToHex(hsv)
- hsvToHsl(hsv)
Functions for normalizing and generating color strings:
- normalizeHexString(hex)
- normalizeRgbString(rgbString)
- getRgb255String(rgb255)
Mixing functions:
- mixHsv(color1, color2, weight)
- mixHsl(color1, color2, weight)
- mixRgb(color1, color2, weight)
- mixHex(color1, color2, weight)
Lightening/darkening functions:
- lightenHslColor(color, percent)
- lightenHexColor(color, percent)
- lightenHsvColor(color, percent)
- lightenRgb255Color(color, percent)
- darkenHexColor(color, percent)
- darkenHslColor(color, percent)
- darkenHsvColor(color, percent)
- darkenRgb255Color(color, percent)
Type check functions:
- isHex(value)
- isRgbString(value)
- isRgb255(value)
- isRgb1(value)
- isHsl(value)
- isHsv(value)
Chayns-specific functions
- getColorFromPalette(colorId, options)
- options is an object of color, colorMode and secondaryColor
- getAvailableColorList()
Releases
Releasenotes will be send and published via GitHub. To subscribe them, you just have to watch this repository.
Development
- Clone git repository
- Install npm packages
- Link with
npm start
- Run tests with
npm test
Troubleshooting
If you get the error SyntaxError: Unexpected token {
, you have to update your node version to at least Node 10.