colorizr - npm Package Compare versions

Comparing version 3.0.0 to 3.0.1

dist/index.d.ts

@@ -21,3 +21,2 @@ type ColorType = 'hex' | 'hsl' | 'oklab' | 'oklch' | 'rgb';
 type HEX = `#${string}`;
-type CSS = `('#' | 'hsl' | 'oklab' | 'oklch' | 'rgb')${string}`;
 interface HSL {
@@ -269,2 +268,11 @@ h: number;
 
+/**
+ * Get the maximum chroma for a given lightness and hue in the OkLCH color space
+ */
+declare function getOkLCHMaxChroma(input: string | LCH, precision?: number): number;
+/**
+ * Get a OkLCH color in the P3 color space.
+ */
+declare function getP3Color(input: string | LCH): string;
+
 type ParseCSSReturn<T extends ColorType> = T extends 'hex' ? HEX : T extends 'hsl' ? HSL : T extends 'oklab' ? LAB : T extends 'oklch' ? LCH : T extends 'rgb' ? RGB : never;
@@ -452,2 +460,2 @@ /**
 
-export { type Alpha, type Amount, type Analysis, type CSS, type ColorKeysTuple, type ColorModel, type ColorModelKey, type ColorModelKeys, type ColorTuple, type ColorType, type Colors, type ConverterParameters, type Degrees, type HEX, type HSL, type LAB, type LCH, type PlainObject, type RGB, addAlphaToHex, brightnessDifference, chroma, colorDifference, compare, contrast, convert, convertAlphaToHex, darken, Colorizr as default, desaturate, extractAlphaFromHex, extractColorParts, formatCSS, formatHex, hex2hsl, hex2oklab, hex2oklch, hex2rgb, hexadecimalToNumber, hsl2hex, hsl2oklab, hsl2oklch, hsl2rgb, isHSL, isHex, isLAB, isLCH, isRGB, isValidColor, lighten, luminance, name, oklab2hex, oklab2hsl, oklab2oklch, oklab2rgb, oklch2hex, oklch2hsl, oklch2oklab, oklch2rgb, opacify, opacity, palette, parseCSS, random, removeAlphaFromHex, rgb2hex, rgb2hsl, rgb2oklab, rgb2oklch, rotate, saturate, scheme, swatch, textColor, transparentize };
+export { type Alpha, type Amount, type Analysis, type ColorKeysTuple, type ColorModel, type ColorModelKey, type ColorModelKeys, type ColorTuple, type ColorType, type Colors, type ConverterParameters, type Degrees, type HEX, type HSL, type LAB, type LCH, type PlainObject, type RGB, addAlphaToHex, brightnessDifference, chroma, colorDifference, compare, contrast, convert, convertAlphaToHex, darken, Colorizr as default, desaturate, extractAlphaFromHex, extractColorParts, formatCSS, formatHex, getOkLCHMaxChroma, getP3Color, hex2hsl, hex2oklab, hex2oklch, hex2rgb, hexadecimalToNumber, hsl2hex, hsl2oklab, hsl2oklch, hsl2rgb, isHSL, isHex, isLAB, isLCH, isRGB, isValidColor, lighten, luminance, name, oklab2hex, oklab2hsl, oklab2oklch, oklab2rgb, oklch2hex, oklch2hsl, oklch2oklab, oklch2rgb, opacify, opacity, palette, parseCSS, random, removeAlphaFromHex, rgb2hex, rgb2hsl, rgb2oklab, rgb2oklch, rotate, saturate, scheme, swatch, textColor, transparentize };

dist/index.js

@@ -40,2 +40,4 @@ "use strict";
   formatHex: () => formatHex,
+  getOkLCHMaxChroma: () => getOkLCHMaxChroma,
+  getP3Color: () => getP3Color,
   hex2hsl: () => hex2hsl,
@@ -132,2 +134,7 @@ hex2oklab: () => hex2oklab,
 };
+var SRGB_TO_P3 = [
+  [0.8224270476, 0.1775729524, 0],
+  [0.0331008087, 0.9668991913, 0],
+  [0.0170720188, 0.0723477973, 0.9105801839]
+];
 var PRECISION = 5;
@@ -137,4 +144,3 @@ var RAD2DEG = 180 / Math.PI;
   alpha: "amount must be a number between 0 and 1",
-  left: "left is required and must be a string",
-  right: "right is required and must be a string",
+  hueRange: "hue must be a number between 0 and 360",
   input: "input is required",
@@ -146,3 +152,6 @@ inputHex: "input is required and must be a hex",
   invalidCSS: "invalid CSS string",
+  left: "left is required and must be a string",
+  lightnessRange: "lightness must be a number between 0 and 1",
   options: "invalid options",
+  right: "right is required and must be a string",
   threshold: "threshold must be a number between 0 and 255"
@@ -1465,2 +1474,52 @@ };
 
+// src/p3.ts
+function multiplyMatrix(matrix, vector) {
+  return [
+    matrix[0][0] * vector[0] + matrix[0][1] * vector[1] + matrix[0][2] * vector[2],
+    matrix[1][0] * vector[0] + matrix[1][1] * vector[1] + matrix[1][2] * vector[2],
+    matrix[2][0] * vector[0] + matrix[2][1] * vector[1] + matrix[2][2] * vector[2]
+  ];
+}
+function isInP3Gamut(color) {
+  const epsilon = 1e-6;
+  return color.every((component) => component >= 0 - epsilon && component <= 1 + epsilon);
+}
+function oklabToLinearSRGB(L, a, b) {
+  const l = (L + LAB_TO_LMS.l[0] * a + LAB_TO_LMS.l[1] * b) ** 3;
+  const m = (L + LAB_TO_LMS.m[0] * a + LAB_TO_LMS.m[1] * b) ** 3;
+  const s = (L + LAB_TO_LMS.s[0] * a + LAB_TO_LMS.s[1] * b) ** 3;
+  return [
+    LSM_TO_RGB.r[0] * l + LSM_TO_RGB.r[1] * m + LSM_TO_RGB.r[2] * s,
+    LSM_TO_RGB.g[0] * l + LSM_TO_RGB.g[1] * m + LSM_TO_RGB.g[2] * s,
+    LSM_TO_RGB.b[0] * l + LSM_TO_RGB.b[1] * m + LSM_TO_RGB.b[2] * s
+  ];
+}
+function oklabToLinearP3(L, a, b) {
+  const srgb = oklabToLinearSRGB(L, a, b);
+  return multiplyMatrix(SRGB_TO_P3, srgb);
+}
+function getOkLCHMaxChroma(input, precision = PRECISION) {
+  const { l, h } = isString(input) ? parseCSS(input, "oklch") : input;
+  invariant(isNumber(l) && l >= 0 && l <= 1, MESSAGES.lightnessRange);
+  invariant(isNumber(h) && h >= 0 && h <= 360, MESSAGES.hueRange);
+  const epsilon = 1e-6;
+  let low = 0;
+  let high = 0.5;
+  while (high - low > epsilon) {
+    const mid = (low + high) / 2;
+    const { l: L, a, b } = oklch2oklab({ l, c: mid, h }, 16);
+    const p3Color = oklabToLinearP3(L, a, b);
+    if (isInP3Gamut(p3Color)) {
+      low = mid;
+    } else {
+      high = mid;
+    }
+  }
+  return round(low, precision);
+}
+function getP3Color(input) {
+  const lch = isString(input) ? parseCSS(input, "oklch") : input;
+  return `oklch(${lch.l} ${getOkLCHMaxChroma(lch)} ${lch.h})`;
+}
+
 // src/random.ts
@@ -1589,2 +1648,4 @@ function random(type = "hex") {
   formatHex,
+  getOkLCHMaxChroma,
+  getP3Color,
   hex2hsl,
@@ -1591,0 +1652,0 @@ hex2oklab,

package.json

 {
   "name": "colorizr",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "Manipulate colors like a boss",
@@ -96,3 +96,3 @@ "author": "Gil Barbara <[e-mail]>",
       "path": "./dist/index.js",
-      "limit": "7.5 kB"
+      "limit": "8 kB"
     },
@@ -102,5 +102,5 @@ {
       "path": "./dist/index.mjs",
-      "limit": "7 kB"
+      "limit": "8 kB"
     }
   ]
 }

README.md

@@ -11,3 +11,3 @@ # Colorizr
 - ♿️ **Accessibility:** WCAG analysis and comparison.
-- 🛠 **Small:** Less than 7k (gzipped) and tree-shakable.
+- 🛠 **Small:** 7kB (gzipped) and tree-shakable.
 - 🟦 **Modern:** Written in Typescript.
@@ -548,2 +548,23 @@
 ```
+
+**getOkLCHMaxChroma(input: string | LCH, precision?: number): number**  
+Get the maximum chroma for a given lightness and hue in the OkLCH color space.
+
+```typescript
+import { getOkLCHMaxChroma } from 'colorizr';
+
+getOkLCHMaxChroma({ l: 0.63269, c: 0.25404, h: 19.90218 }); // 0.28643
+getOkLCHMaxChroma('#00ff44'); // 0.30921 
+```
+
+**getP3Color(input: string | LCH): string**  
+Get a OkLCH color in the P3 color space.
+
+```typescript
+import { getP3Color } from 'colorizr';
+
+getP3Color({ l: 0.63269, c: 0.25404, h: 19.90218 }); // oklch(0.63269 0.28643 19.90218)
+getP3Color('#00ff44'); // oklch(0.86876 0.30921 144.65534) 
+```
+
 **parseCSS(input: string, format?: ColorType): string | HSL | RGB**  
@@ -550,0 +571,0 @@ Parse a css string to hex, HSL, OKLAB, OKLCH, or RGB.

src/index.ts

@@ -21,2 +21,3 @@ import Colorizr from '~/colorizr';
 export { default as opacity } from '~/opacity';
+export { getOkLCHMaxChroma, getP3Color } from '~/p3';
 export { default as parseCSS } from '~/parse-css';
@@ -23,0 +24,0 @@ export { default as random } from '~/random';

src/modules/constants.ts

@@ -31,2 +31,7 @@ import { ColorKeysTuple, ColorModelKey } from '~/types';
 };
+export const SRGB_TO_P3 = [
+  [0.8224270476, 0.1775729524, 0],
+  [0.0331008087, 0.9668991913, 0],
+  [0.0170720188, 0.0723477973, 0.9105801839],
+];
 export const PRECISION = 5;
@@ -37,4 +42,3 @@ export const RAD2DEG = 180 / Math.PI;
   alpha: 'amount must be a number between 0 and 1',
-  left: 'left is required and must be a string',
-  right: 'right is required and must be a string',
+  hueRange: 'hue must be a number between 0 and 360',
   input: 'input is required',
@@ -46,4 +50,7 @@ inputHex: 'input is required and must be a hex',
   invalidCSS: 'invalid CSS string',
+  left: 'left is required and must be a string',
+  lightnessRange: 'lightness must be a number between 0 and 1',
   options: 'invalid options',
+  right: 'right is required and must be a string',
   threshold: 'threshold must be a number between 0 and 255',
 } as const;

src/types/index.ts

@@ -43,4 +43,2 @@ /* eslint-disable @typescript-eslint/member-ordering */
 
-export type CSS = `('#' | 'hsl' | 'oklab' | 'oklch' | 'rgb')${string}`;
-
 export interface HSL {
@@ -47,0 +45,0 @@ h: number;

No alert changes

Improved metrics

Total package byte prevSize

435862

increased by4.39%

Number of package files

70

increased by1.45%

Lines of code

5765

increased by3.48%

Number of lines in readme file

757

increased by2.85%

No dependency changes