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)).

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: