JavaScript utility functions for the calculation of colors for chayns
npm install @chayns/colorsnpm install @chayns/colors.$3
#### RGB (Red - Green - Blue)
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 and HSV
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
$3
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
1. Clone git repository
2. Install npm packages
3. Link with npm start
4. Run tests with npm test
$3
Increase version with npm version patch or npm version minor and push the commit and version tag. The npm package will be published via GitHub Actions.$3
If you get the error SyntaxError: Unexpected token {`, you have to update your node version to at least Node 10.