This project is part of the @thi.ng/umbrella monorepo.
Color space conversions (any direction) between:
- CSS (string, hex3/hex4/hex6/hex8,
rgba(),hsla(), named colors) - INT32 (uint32,
0xaarrggbb) - RGBA (float4)
- HCYA (float4)
- HSIA (float4)
- HSLA (float4)
- HSVA (float4)
- XYZA (float4, CIE 1931)
- YCBCR (float4)
Apart from CSS and Int32 colors, all others can be stored as plain,
typed or custom array-like types of normalized values ([0,1]
interval). Where applicable, the hue too is stored in that range, NOT in
degrees.
The package provides lightweight class wrappers for each color mode /
space. These wrappers act similarly to the Vec2/3/4 wrappers in
@thi.ng/vectors,
support striding (for mapped memory views), named channel accessor
aliases (in addition to array indexing) and are fully compatible with
all other functions. Wrapper factory functions are provided for
convenience.
RGBA color matrix transformations, including parametric preset transforms:
- brightness
- contrast
- exposure
- saturation (luminance aware)
- hue rotation
- color temperature (warm / cold)
- sepia (w/ fade amount)
- tint (green / purple)
- grayscale (luminance aware)
- invert (also available as non-matrix op)
- luminance to alpha
Matrix transforms can be combined using matrix multiplication /
concatenation (mulMatrix() / concatMatrices).
The package provides all 12 basic Porter-Duff compositing / blending operators, both for colors with pre-multiplied alpha and without.
The following presets are bundled (in cosine-gradients.ts):
| rainbow1 | rainbow2 |
| rainbow3 | rainbow4 |
| yellow-magenta-cyan preset | orange-blue |
| green-magenta | green-red |
| green-cyan | blue-cyan |
| yellow-red | red-blue |
| yellow-green-blue | blue-white-red |
| cyan-magenta | yellow-purple-magenta |
| green-blue-orange | orange-magenta-blue |
| blue-magenta-orange | magenta-green |
yarn add @thi.ng/color- @thi.ng/api
- @thi.ng/compose
- @thi.ng/defmulti
- @thi.ng/errors
- @thi.ng/strings
- @thi.ng/transducers
- @thi.ng/vectors3
import * as col from "@thi.ng/color";
// route #1: asXXX() converters: CSS -> ARGB (int) -> RGBA
const a = col.asRGBA(col.css("#3cf"));
// [0.2, 0.8, 1, 1]
// route #2: parseCSS(): CSS -> HSLA -> RGBA
const b = col.parseCss("hsla(30,100%,50%,0.75)", col.ColorMode.RGBA);
// [ 1, 0.5, 0, 0.75 ]
// route #3: convert() multi-method: HSVA -> RGBA
const c = col.convert([0.5, 1, 1, 1], col.ColorMode.RGBA, col.ColorMode.HSVA);
// [ 0, 1, 1, 1 ]
col.luminanceRGB(a)
// 0.6434
// apply color matrix (RGBA only)
col.applyMatrix([], col.saturation(1.25), a)
// [ 0.07835000000000002, 0.82835, 1, 1 ]- Karsten Schmidt
© 2018 Karsten Schmidt // Apache Software License 2.0