pex-color
Version:
Color utilities (css, p3, hex, hsl, hsv, hwb, lab, lch, xyz, okhsl, okhsv, oklab, oklch, hpluv, hsluv, lchuv, bytes) for PEX.
210 lines (194 loc) • 6.79 kB
JavaScript
/**
* @typedef {string} css CSS string representation.
*
* @see {@link https://www.w3.org/TR/css-color-4/}
*/
import { set } from "./color.js";
import { toLinear } from "./linear.js";
import { toP3 } from "./p3.js";
import { toHSL } from "./hsl.js";
import { toHWB } from "./hwb.js";
import { toLab, toLabD65 } from "./lab.js";
import { toLCH } from "./lch.js";
import { toOklch } from "./oklch.js";
import { toOklab } from "./oklab.js";
import { toXYZD65, toXYZD50 } from "./xyz.js";
import { TMP, floorArray } from "./utils.js";
// Get the color without alpha
const getCoords = (color) => color.slice(0, 3);
// Set alpha only when necessary
const setCSSAlpha = (a) => (a !== undefined && a !== 1 ? ` / ${a}` : "");
// Format color space
const toCSSColorSpace = (colorSpace, color, a) =>
`color(${colorSpace} ${color.join(" ")}${setCSSAlpha(a)})`;
// sRGB color spaces:
// TODO: a98-rgb, prophoto-rgb, and rec2020
/**
* Returns a rgb CSS string representation of a given color.
* @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color}
* @alias module:pex-color.toCSSRGB
* @param {import("./color.js").color} color
* @param {number} [precision=5]
* @returns {css}
*/
export function toCSSRGB(color, precision = 5) {
set(TMP, getCoords(color));
if (precision !== undefined) floorArray(TMP, precision);
return toCSSColorSpace("srgb", TMP, color[3]);
}
/**
* Returns a linear rgb CSS string representation of a given color.
* @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color}
* @alias module:pex-color.toCSSRGBLinear
* @param {import("./color.js").color} color
* @param {number} [precision=5]
* @returns {css}
*/
export function toCSSRGBLinear(color, precision = 5) {
toLinear(getCoords(color), TMP);
if (precision !== undefined) floorArray(TMP, precision);
return toCSSColorSpace("srgb-linear", TMP, color[3]);
}
/**
* Returns a P3 rgb CSS string representation of a given color.
* @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color}
* @alias module:pex-color.toCSSRGBLinear
* @param {import("./color.js").color} color
* @param {number} [precision=5]
* @returns {css}
*/
export function toCSSP3(color, precision = 5) {
toP3(getCoords(color), TMP);
if (precision !== undefined) floorArray(TMP, precision);
return toCSSColorSpace("display-p3", TMP, color[3]);
}
/**
* Returns a hsl CSS string representation of a given color.
* @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl}
* @alias module:pex-color.toCSSHSL
* @param {import("./color.js").color} color
* @param {number} [precision=5]
* @returns {css}
*/
export function toCSSHSL(color, precision = 5) {
toHSL(getCoords(color), TMP);
TMP[0] *= 360;
TMP[1] *= 100;
TMP[2] *= 100;
if (precision !== undefined) floorArray(TMP, precision);
return `hsl(${TMP[0]} ${TMP[1]}% ${TMP[2]}%${setCSSAlpha(color[3])})`;
}
/**
* Returns a hwb CSS string representation of a given color.
* @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hwb}
* @alias module:pex-color.toCSSHWB
* @param {import("./color.js").color} color
* @param {number} [precision=5]
* @returns {css}
*/
export function toCSSHWB(color, precision = 5) {
toHWB(getCoords(color), TMP);
TMP[0] *= 360;
if (precision !== undefined) floorArray(TMP, precision);
return `hwb(${TMP[0]} ${TMP[1]}% ${TMP[2]}%${setCSSAlpha(color[3])})`;
}
// CIELAB color spaces:
/**
* Returns a lab CSS string representation of a given color.
* @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/lab}
* @alias module:pex-color.toCSSLab
* @param {import("./color.js").color} color
* @param {number} [precision=5]
* @returns {css}
*/
export function toCSSLab(color, precision = 5) {
toLab(getCoords(color), TMP);
TMP[0] *= 100;
TMP[1] *= 100;
TMP[2] *= 100;
if (precision !== undefined) floorArray(TMP, precision);
return `lab(${TMP[0]}% ${TMP[1]} ${TMP[2]}${setCSSAlpha(color[3])})`;
}
/**
* Returns a lab CSS string representation of a given color.
* @alias module:pex-color.toCSSLab
* @param {import("./color.js").color} color
* @param {number} [precision=5]
* @returns {css}
*/
export function toCSSLabD65(color, precision = 5) {
toLabD65(getCoords(color), TMP);
TMP[0] *= 100;
TMP[1] *= 100;
TMP[2] *= 100;
if (precision !== undefined) floorArray(TMP, precision);
return `lab-d65(${TMP[0]}% ${TMP[1]} ${TMP[2]}${setCSSAlpha(color[3])})`;
}
/**
* Returns a lch CSS string representation of a given color.
* @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/lch}
* @alias module:pex-color.toCSSLCH
* @param {import("./color.js").color} color
* @param {number} [precision=5]
* @returns {css}
*/
export function toCSSLCH(color, precision = 5) {
toLCH(getCoords(color), TMP);
TMP[0] *= 100;
TMP[1] *= 150;
TMP[2] *= 360;
if (precision !== undefined) floorArray(TMP, precision);
return `lch(${TMP[0]}% ${TMP[1]} ${TMP[2]}${setCSSAlpha(color[3])})`;
}
/**
* Returns a lab CSS string representation of a given color.
* @alias module:pex-color.toCSSOkLab
* @param {import("./color.js").color} color
* @param {number} [precision=5]
* @returns {css}
*/
export function toCSSOkLab(color, precision = 5) {
toOklab(getCoords(color), TMP);
TMP[0] *= 100;
if (precision !== undefined) floorArray(TMP, precision);
return `oklab(${TMP[0]}% ${TMP[1]} ${TMP[2]}${setCSSAlpha(color[3])})`;
}
/**
* Returns a lch CSS string representation of a given color.
* @alias module:pex-color.toCSSOklch
* @param {import("./color.js").color} color
* @param {number} [precision=5]
* @returns {css}
*/
export function toCSSOklch(color, precision = 5) {
toOklch(getCoords(color), TMP);
TMP[0] *= 100;
TMP[2] *= 360;
if (precision !== undefined) floorArray(TMP, precision);
return `oklch(${TMP[0]}% ${TMP[1]} ${TMP[2]}${setCSSAlpha(color[3])})`;
}
// XYZ colors spaces:
/**
* Returns a xyz-d50 CSS string representation of a given color.
* @alias module:pex-color.toCSSXYZD50
* @param {import("./color.js").color} color
* @param {number} [precision=5]
* @returns {css}
*/
export function toCSSXYZD50(color, precision = 5) {
toXYZD50(getCoords(color), TMP);
if (precision !== undefined) floorArray(TMP, precision);
return toCSSColorSpace("xyz-d50", TMP, color[3]);
}
/**
* Returns a xyz (xyz-d65) CSS string representation of a given color.
* @alias module:pex-color.toCSSXYZ
* @param {import("./color.js").color} color
* @param {number} [precision=5]
* @returns {css}
*/
export function toCSSXYZ(color, precision = 5) {
toXYZD65(getCoords(color), TMP);
if (precision !== undefined) floorArray(TMP, precision);
return toCSSColorSpace("xyz", TMP, color[3]);
}