Omgovich Colord Versions Save

• New minify plugin adding color string minification utilities.

import { colord, extend } from "colord";
import minifyPlugin from "colord/plugins/minify";

extend([minifyPlugin]);

colord("black").minify(); // "#000"
colord("#112233").minify(); // "#123"
colord("darkgray").minify(); // "#a9a9a9"
colord("rgba(170,170,170,0.4)").minify(); // "hsla(0,0%,67%,.4)"
colord("rgba(170,170,170,0.4)").minify({ alphaHex: true }); // "#aaa6"

• @EricRovell added delta method to calculate the perceived color difference (CIE Delta E 2000) between two colors. The return value is 0 if the colors are equal, 1 if they are entirely different.

colord("#faf0c8").delta("#ffffff"); // 0.148
colord("#3296fa").delta("#197dc8"); // 0.099
colord("#afafaf").delta("#b4b4b4"); // 0.014
colord("#000000").delta("#ffffff"); // 1

• @EricRovell added new tints, tones and shades methods to mix plugin.

const color = colord("#ff0000");
color.tints(3).map((c) => c.toHex());  // ["#ff0000", "#ff9f80", "#ffffff"];
color.shades(3).map((c) => c.toHex()); // ["#ff0000", "#7a1b0b", "#000000"];
color.tones(3).map((c) => c.toHex());  // ["#ff0000", "#c86147", "#808080"];

• @EricRovell added a new plugin to perform harmony colors generation.

import { colord, extends } from "colord";
import harmoniesPlugin from "colord/plugins/harmonies";

extend([harmoniesPlugin]);

const color = colord("#ff0000");
color.harmonies("analogous").map((c) => c.toHex()); // ["#ff0080", "#ff0000", "#ff8000"]
color.harmonies("complementary").map((c) => c.toHex()); // ["#ff0000", "#00ffff"]
color.harmonies("rectangle").map((c) => c.toHex()); // ["#ff0000", "#ffff00", "#00ffff", "#0000ff"]
color.harmonies("split-complementary").map((c) => c.toHex()); // ["#ff0000", "#00ff80", "#0080ff"]
color.harmonies("tetradic").map((c) => c.toHex()); // ["#ff0000", "#80ff00", "#00ffff", "#8000ff"]
color.harmonies("triadic").map((c) => c.toHex()); // ["#ff0000", "#00ff00", "#0000ff"]

• @EricRovell added a new plugin to perform CMYK conversions

import { colord, extend } from "colord";
import cmykPlugin from "colord/plugins/cmyk";

extend([cmykPlugin]);

colord("#ffffff").toCmyk(); // { c: 0, m: 0, y: 0, k: 0, a: 1 }
colord("#999966").toCmykString(); // "device-cmyk(0% 0% 33% 40%)"
colord({ c: 0, m: 0, y: 0, k: 100, a: 1 }).toHex(); // "#000000"
colord("device-cmyk(0% 61% 72% 0% / 50%)").toHex(); // "#ff634780"

• CSS Color Level Specifications are now strictly followed by library parsers.

// missing hex prefix
colord("aabbcc").isValid() // false

// mixing numbers and percentages is not allowed in CSS
colord("rgb(50%, 50, 50%)").isValid() // false

// missing comma
colord("rgb(50%, 50 50%)").isValid() // false

// missing bracket
colord("rgb(10 10 10").isValid() // false

// mixing comma and slash syntaxes is not allowed
colord("rgba(10, 50, 30 / .5)").isValid() // false

// missing percent sign for saturation and lightness
colord("hsl(10deg, 50, 30)").isValid() // false

• New getFormat utility
• Support HWB color strings (CSS functional notation)
• Clamp CIE LAB values as defined in CSS Color Level 4 specs

• Improvement: You can now use every angle unit supported by CSS (deg, rad, grad, turn).

• New random function that returns a new Colord instance with a random color value inside

• Added a new mix plugin which brings a modern color mixing functionality
• XYZ, LAB and LCH conversions were calibrated to the D50 white point (according to the latest CSS specs)