@texel/color 1.0.5 → 1.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -3
- package/package.json +1 -1
- package/src/util.js +4 -1
- package/test/test.js +2 -2
package/README.md
CHANGED
|
@@ -85,7 +85,7 @@ The return value is the new coordinates in the destination space; such as `[r,g,
|
|
|
85
85
|
|
|
86
86
|
#### `output = gamutMapOKLCH(oklch, gamut = sRGBGamut, targetSpace = gamut.space, out = [0, 0, 0], mapping = MapToCuspL, [cusp])`
|
|
87
87
|
|
|
88
|
-
Performs fast gamut mapping in OKLCH as [described by Björn Ottoson](https://bottosson.github.io/posts/gamutclipping/) (2021). This takes an input `[l,c,h]` coords in OKLCH space, and ensures the final result will lie within the specified color `gamut` (default `sRGBGamut`). You can further specify a different target space (which default's
|
|
88
|
+
Performs fast gamut mapping in OKLCH as [described by Björn Ottoson](https://bottosson.github.io/posts/gamutclipping/) (2021). This takes an input `[l,c,h]` coords in OKLCH space, and ensures the final result will lie within the specified color `gamut` (default `sRGBGamut`). You can further specify a different target space (which default's to the gamut's space), for example to get a linear-light sRGB and avoid the transfer function, or to keep the result in OKLCH:
|
|
89
89
|
|
|
90
90
|
```js
|
|
91
91
|
import { gamutMapOKLCH, sRGBGamut, sRGBLinear, OKLCH } from "@texel/color";
|
|
@@ -142,6 +142,7 @@ const cuspLC = findCuspOKLCH(a, b, gamut);
|
|
|
142
142
|
|
|
143
143
|
// ... somewhere else in your program ...
|
|
144
144
|
// pass 'cusp' parameter for faster evaluation
|
|
145
|
+
// expected that your OKLCH coord has the same hue as the cusp (H)
|
|
145
146
|
gamutMapOKLCH(oklch, gamut, gamut.space, out, MapToCuspL, cuspLC);
|
|
146
147
|
```
|
|
147
148
|
|
|
@@ -162,7 +163,7 @@ serialize([1, 0, 0], OKLCH, sRGB); // "rgb(255, 255, 255)"
|
|
|
162
163
|
serialize([1, 0, 0], OKLCH); // "oklch(1 0 0)"
|
|
163
164
|
```
|
|
164
165
|
|
|
165
|
-
#### `
|
|
166
|
+
#### `info = deserialize(colorString)`
|
|
166
167
|
|
|
167
168
|
The inverse of `serialize`, this will take a string and determine the color space `id` it is referencing, and the 3 or 4 (for alpha) `coords`. This is intentionally limited in functionality, only supporting hex RGB, `rgb()` and `rgba()` bytes, and `oklch()`, `oklab()`, and plain `color()` functions with no modifiers.
|
|
168
169
|
|
|
@@ -331,7 +332,7 @@ OKHSLToOKLab([h, s, l], DisplayP3Gamut, optionalOutVec);
|
|
|
331
332
|
|
|
332
333
|
[Colorjs](https://colorjs.io/) is fantastic and perhaps the current leading standard in JavaScript, but it's not very practical for creative coding and real-time web applications, where the requirements are often (1) leaner codebases, (2) highly optimized, and (3) minimal GC thrashing.
|
|
333
334
|
|
|
334
|
-
Colorjs, and simialrly, [Culori](https://culorijs.org/)
|
|
335
|
+
Colorjs, and simialrly, [Culori](https://culorijs.org/), are focused on matching CSS spec, which means it will very likely continue to grow in complexity over time, and performance will often be marred (for example, `@texel/color` cusp intersection gamut mapping is ~125 times faster than Colorjs and ~60 times faster than culori).
|
|
335
336
|
|
|
336
337
|
There are many other options such as [color-space](https://www.npmjs.com/package/color-space) or [color-convert](https://www.npmjs.com/package/color-convert), however, these do not support modern spacse such as OKLab and OKHSL, and/or have dubious levels of accuracy (many libraries, for example, do not distinguish between D50 and D65 whitepoints in XYZ).
|
|
337
338
|
|
package/package.json
CHANGED
package/src/util.js
CHANGED
|
@@ -26,9 +26,12 @@ export const hexToRGB = (str, out = vec3()) => {
|
|
|
26
26
|
return out;
|
|
27
27
|
};
|
|
28
28
|
|
|
29
|
-
export const
|
|
29
|
+
export const RGBToHex = (rgb) =>
|
|
30
30
|
`#${rgb.map((n) => floatToByte(n).toString(16).padStart(2, "0")).join("")}`;
|
|
31
31
|
|
|
32
|
+
/** @deprecated use RGBToHex */
|
|
33
|
+
export const RGBtoHex = (rgb) => RGBToHex;
|
|
34
|
+
|
|
32
35
|
export const isRGBInGamut = (lrgb, ep = GAMUT_EPSILON) => {
|
|
33
36
|
const r = lrgb[0];
|
|
34
37
|
const g = lrgb[1];
|
package/test/test.js
CHANGED
|
@@ -5,7 +5,7 @@ import {
|
|
|
5
5
|
floatToByte,
|
|
6
6
|
hexToRGB,
|
|
7
7
|
isRGBInGamut,
|
|
8
|
-
|
|
8
|
+
RGBToHex,
|
|
9
9
|
linear_sRGB_to_LMS_M,
|
|
10
10
|
LMS_to_linear_sRGB_M,
|
|
11
11
|
LMS_to_XYZ_M,
|
|
@@ -320,7 +320,7 @@ test("should deserialize color string information", async (t) => {
|
|
|
320
320
|
});
|
|
321
321
|
|
|
322
322
|
test("utils", async (t) => {
|
|
323
|
-
t.deepEqual(
|
|
323
|
+
t.deepEqual(RGBToHex([0, 0.5, 1]), "#0080ff");
|
|
324
324
|
t.deepEqual(hexToRGB("#0080ff"), [0, 0.5019607843137255, 1]);
|
|
325
325
|
const tmp = [0, 0, 0];
|
|
326
326
|
hexToRGB("#0080ff", tmp);
|