Getting Started

Saturon is a JavaScript color engine that's flexible, precise, and fully compatible with the CSS Color Module Levels 4 & 5. It helps developers build dynamic themes, design systems, and accessible interfaces — all with complete control over color logic and representation.

What makes Saturon truly stand out is its grammar-aware color parser. It understands the entire CSS <color> syntax — including modern and experimental formats like color-mix() and relative colors (e.g. hsl(from rebeccapurple h calc(s / 2) l)).

Color.from(
    `color-mix(
        in oklch longer hue,
        color(from hsl(240deg none calc(-infinity) / 0.5) display-p3 r calc(g + b) 100 / alpha),
        rebeccapurple 20%
    )`
).to("hwb");

Why Saturon

• Strings are parsed using a grammar-aware engine rather than standard pattern matching, allowing complex color functions to nest freely.
• Its parsing and conversion performance outperforms Color.js even while enforcing strict, full grammar validation (see Benchmarks).
• All ported Web Platform Tests cases run automatically in CI to ensure high spec conformance (see Conformance).
• Custom color models and relative color syntax can be registered easily, enabling color-mix() and other utilities to work with them seamlessly (see Recipes).
• The package is fully tree-shakable, letting you import the primary Color class or only individual functions as needed (see Tree Shakability).

Installation

You can install Saturon via npm or use it directly in browsers through a CDN.

Option 1 — Using npm

Ideal for Node.js, React, Vue, Svelte, or any modern JavaScript framework.

npm install saturon

Then import the Color class in your JavaScript or TypeScript file:

import { Color } from "saturon";

const color = Color.from("hsl(50 100% 30%)").to("rgb");
console.log(color); // rgb(153 128 0)

Option 2 — Using a CDN

You can also load Saturon directly in the browser:

<script src="https://unpkg.com/saturon@latest/dist/index.umd.js"></script>

Usage Example

Once the script is included, you can immediately use the Color API:

<script>
    const { Color } = Saturon;
    const color = Color.from("hsl(50 100% 30%)").to("rgb");
    console.log(color); // rgb(153 128 0)
</script>

What's Next?

Now that you have Saturon installed and running, explore the rest of the documentation to dive deeper into the engine: