@thi.ng/color
Advanced tools
This project is part of the @thi.ng/umbrella monorepo.
Raw, array-based, color operations, conversions and optional type wrappers. The functions provided by this package are largely using the same calling convention as those in the @thi.ng/vectors package.
Fast color space conversions (any direction) between:
0xaarrggbb)Apart from CSS and Int32 colors, all others can be stored as plain
arrays, typed array or custom array-like types of (mostly) normalized
values ([0,1] interval). Where applicable, the hue too is stored in
that range, NOT in degrees.
Apart from conversions, most other operations provided by this package are currently only supporting RGBA colors. These can also be converted to / from sRGB (i.e. linear vs gamma corrected). Additionally, RGBA colors can be pre-multiplied (and post-multiplied) with their alpha channel (see Porter-Duff section below).
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 functions (and act as syntax sugar for generic conversion
functions). Wrapper factory functions are provided for convenience.
RGBA color matrix transformations, including parametric preset transforms:
Transformation matrices can be combined using matrix multiplication /
concatenation (concat()) for more efficient application.
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 |
The multiCosineGradient() function returns an iterator of raw RGBA
colors based on given gradient stops. This iterator computes a cosine
gradient between each color stop and yields a sequence of RGBA values.
col.multiCosineGradient(
// num colors to produce
10,
// gradient stops (normalized positions, only RGBA colors supported)
[0.1, col.RED], [0.5, col.GREEN], [0.9, col.BLUE]
)
// convert to CSS
.map(col.rgbaCss)
// [
// "#ff0000",
// "#ff0000",
// "#da2500",
// "#807f00",
// "#25da00",
// "#00ff00",
// "#00da25",
// "#00807f",
// "#0025da",
// "#0000ff",
// "#0000ff",
// ]
ALPHA - work in progress
yarn add @thi.ng/color
import * as col from "@thi.ng/color";
// route #1: asXXX() converters: string -> CSS -> ARGB (int) -> RGBA
const a = col.asRGBA(col.css("#3cf"));
// [0.2, 0.8, 1, 1]
// route #2: parseCSS(): string -> 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: CSS -> RGBA -> HSVA
// (see convert.ts)
const c = col.convert("rgb(0,255,255)", col.ColorMode.HSVA, col.ColorMode.CSS);
// [ 0.4999999722222268, 0.9999990000010001, 1, 1 ]
// route #4: direct conversion RGBA -> HSLA -> CSS
// first arg is output color (same calling convention as @thi.ng/vectors)
// (use `null` to mutate the input color)
col.hslaCss(col.rgbaHsla([], [1, 0.5, 0.5, 1]))
// "hsl(0.00,100.00%,75.00%)"
col.luminance(col.css("white"))
col.luminance(0xffffff, col.ColorMode.INT32)
// 1
// apply color matrix (RGBA only)
col.transform([], col.saturation(1.25), a)
// [ 0.07835000000000002, 0.82835, 1, 1 ]
// combine matrix transformations
filter = col.concatMatrices(
col.saturation(0.5), // 50% saturation
col.brightness(0.1), // +10% brightness
);
col.transform([], filter, col.RED);
// [ 0.7065, 0.2065, 0.2065, 1 ]
© 2018 Karsten Schmidt // Apache Software License 2.0
FAQs
Array-based color types, CSS parsing, conversions, transformations, declarative theme generation, gradients, presets
The npm package @thi.ng/color receives a total of 1,093 weekly downloads. As such, @thi.ng/color popularity was classified as popular.
We found that @thi.ng/color demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.