colorizr 3.0.0 → 3.0.2

package/README.md

@@ -8,7 +8,7 @@ Color conversion, generation, manipulation, comparison, and analysis.
 
 - 🏖 **Easy to use**: Works with Hex, HSL, OkLab, OkLCH, and RGB.
 - ♿️ **Accessibility:** WCAG analysis and comparison.
-- 🛠 **Small:** Less than 7k (gzipped) and tree-shakable.
+- 🛠 **Small:** 7kB (gzipped) and tree-shakable.
 - 🟦 **Modern:** Written in Typescript.
 
 ## Setup
@@ -544,6 +544,27 @@ import { formatHex } from 'colorizr';
 formatHex('#07e'); // '#0077ee'
 formatHex('#f058'); // '#ff005588'
 ```
+
+**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**  
 Parse a css string to hex, HSL, OKLAB, OKLCH, or RGB.  
 If the format isn't set, it will return the same format as the input.

package/dist/index.d.mts

@@ -18,7 +18,6 @@ type Alpha = number;
 type Amount = number;
 type Degrees = number;
 type HEX = `#${string}`;
-type CSS = `('#' | 'hsl' | 'oklab' | 'oklch' | 'rgb')${string}`;
 interface HSL {
     h: number;
     s: number;
@@ -265,6 +264,15 @@ declare function opacify(input: string, alpha: Alpha, format?: ColorType): strin
 
 declare function opacity(input: string): 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;
 /**
  * Parse CSS color
@@ -447,4 +455,4 @@ declare function isLCH(input: unknown): input is LCH;
  */
 declare function isRGB(input: unknown): input is RGB;
 
-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 };

package/dist/index.d.ts

@@ -18,7 +18,6 @@ type Alpha = number;
 type Amount = number;
 type Degrees = number;
 type HEX = `#${string}`;
-type CSS = `('#' | 'hsl' | 'oklab' | 'oklch' | 'rgb')${string}`;
 interface HSL {
     h: number;
     s: number;
@@ -265,6 +264,15 @@ declare function opacify(input: string, alpha: Alpha, format?: ColorType): strin
 
 declare function opacity(input: string): 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;
 /**
  * Parse CSS color
@@ -447,4 +455,4 @@ declare function isLCH(input: unknown): input is LCH;
  */
 declare function isRGB(input: unknown): input is RGB;
 
-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 };

package/dist/index.js

@@ -37,6 +37,8 @@ __export(src_exports, {
   extractColorParts: () => extractColorParts,
   formatCSS: () => formatCSS,
   formatHex: () => formatHex,
+  getOkLCHMaxChroma: () => getOkLCHMaxChroma,
+  getP3Color: () => getP3Color,
   hex2hsl: () => hex2hsl,
   hex2oklab: () => hex2oklab,
   hex2oklch: () => hex2oklch,
@@ -128,19 +130,26 @@ var LSM_TO_RGB = {
   g: [-1.2684379732850315, 2.609757349287688, -0.341319376002657],
   b: [-0.0041960761386756, -0.7034186179359362, 1.7076146940746117]
 };
+var SRGB_TO_P3 = [
+  [0.8224270476, 0.1775729524, 0],
+  [0.0331008087, 0.9668991913, 0],
+  [0.0170720188, 0.0723477973, 0.9105801839]
+];
 var PRECISION = 5;
 var RAD2DEG = 180 / Math.PI;
 var MESSAGES = {
   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",
   inputHex: "input is required and must be a hex",
   inputNumber: "input is required and must be a number",
   inputString: "input is required and must be a string",
   invalid: "invalid input",
   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"
 };
 
@@ -1458,6 +1467,56 @@ function palette(input, options = {}) {
   return output.map((color) => convert(color, format ?? colorFormat));
 }
 
+// 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
 function random(type = "hex") {
   const hsl = {
@@ -1519,7 +1578,7 @@ function shadeColorDynamic(input, lightnessTuningFactor, chromaTuningFactor = 0)
 }
 function shadeColor(input, lightness, chromaTuningFactor = 0) {
   const { c, h } = input;
-  return oklch2hex({ l: lightness / 100, c: c + chromaTuningFactor, h });
+  return oklch2hex({ l: lightness / 100, c: clamp(c + chromaTuningFactor, 0, 0.4), h });
 }
 function swatch(input, options = {}) {
   invariant(isString(input), MESSAGES.inputString);
@@ -1581,6 +1640,8 @@ var src_default = Colorizr;
   extractColorParts,
   formatCSS,
   formatHex,
+  getOkLCHMaxChroma,
+  getP3Color,
   hex2hsl,
   hex2oklab,
   hex2oklch,