Saturon LogoSaturon

🚧 This documentation covers a pre-1.0 release. Expect breaking changes.

RecipesRegister Color Spaces

JzCzHz

A recipe to register the JzCzHz color function in Saturon.

import { registerColorFunction } from "saturon/utils";

/**
 * @see {@link https://www.w3.org/TR/css-color-hdr-1/|CSS Color HDR Module Level 1}
 */
registerColorFunction("jzczhz", {
    components: {
        jz: { index: 0, value: [0, 1], precision: 5 },
        cz: { index: 1, value: [-1, 1], precision: 5 },
        hz: { index: 2, value: "angle", precision: 5 },
    },
    bridge: "jzazbz",
    toBridge: ([Jz, cz, hz]: number[]): number[] => {
        const hz_rad = (hz * Math.PI) / 180;
        const az = cz * Math.cos(hz_rad);
        const bz = cz * Math.sin(hz_rad);
        return [Jz, az, bz];
    },
    fromBridge: ([Jz, az, bz]: number[]): number[] => {
        const hz_radians = Math.atan2(bz, az);
        const hz = (hz_radians * 180) / Math.PI;
        const cz = Math.sqrt(az * az + bz * bz);
        return [Jz, cz, hz < 0 ? hz + 360 : hz];
    },
});

Note

The JzCzHz color function relies on the "jzazbz" color function as a bridge. Make sure to register that color function first if it's not already available in your Saturon setup.