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 such as:

• color-mix()
• oklab / oklch
• relative colors (e.g. hsl(from rebeccapurple h calc(s / 2) l))
• modern color spaces P3 and Rec. 2020

Installation

You can install Saturon via npm (recommended) 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?

• Explore the core API to learn about the Color class
• Discover the guides and tutorials to get the most out of Saturon
• Check out recipes for practical examples and use cases