@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:
- isString(value)
- isNumber(value)
- isNullOrUndefined(value)
- isObject(value)
- isInInterval(value)
- 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.