@thi.ng/color/strategies.js

Array-based color types, CSS parsing, conversions, transformations, declarative theme generation, gradients, presets

import { clamp, clamp01 } from "@thi.ng/math/interval";
import { lch } from "./lch/lch.js";
import { rotate } from "./rotate.js";
const $ = (src, l = 0, c = 0) => {
  src.l = clamp01(src.l + l);
  src.c = clamp(src.c + c, 0, 1.312);
  return src;
};
const complementaryStrategy = (src, deltaL, deltaC) => [src, $(rotate(lch(), src, 0.5), deltaL, deltaC)];
const analogStrategy = (src, theta = 1 / 12, deltaL, deltaC) => [
  src,
  $(rotate(lch(), src, -theta), deltaL, deltaC),
  $(rotate(lch(), src, theta), deltaL, deltaC)
];
const splitAnalogStrategy = (src, theta = 1 / 12, deltaL, deltaC) => [
  ...splitComplementaryStrategy(src, theta, deltaL, deltaC),
  $(rotate(lch(), src, theta), deltaL, deltaC)
];
const splitComplementaryStrategy = (src, theta = 1 / 12, deltaL, deltaC) => [
  src,
  $(rotate(lch(), src, 0.5 - theta), deltaL, deltaC),
  $(rotate(lch(), src, 0.5 + theta), deltaL, deltaC)
];
const monochromeStrategy = (src, deltaC = 0) => {
  let [_, c, h, a] = src;
  c = clamp(c + deltaC, 0, 1.312);
  return [
    lch(0, c, h, a),
    lch(0.25, c, h, a),
    lch(0.5, c, h, a),
    lch(0.75, c, h, a),
    lch(1, c, h, a)
  ];
};
const triadicStrategy = (src, deltaL, deltaC) => splitComplementaryStrategy(src, 1 / 6, deltaL, deltaC);
const tetradicStrategy = (src, theta = 1 / 12, deltaL, deltaC) => [
  src,
  $(rotate(lch(), src, theta), deltaL, deltaC),
  $(rotate(lch(), src, 0.5), deltaL, deltaC),
  $(rotate(lch(), src, 0.5 + theta), deltaL, deltaC)
];
const squareStrategy = (src, deltaL, deltaC) => tetradicStrategy(src, 0.25, deltaL, deltaC);
export {
  analogStrategy,
  complementaryStrategy,
  monochromeStrategy,
  splitAnalogStrategy,
  splitComplementaryStrategy,
  squareStrategy,
  tetradicStrategy,
  triadicStrategy
};