Skip to main content

Saturon Playground

Experiment with color parsing, gamut mapping, and formatting. The code block below updates automatically to show you exactly how to achieve the results using the Saturon API.

Input configuration

Accepts any valid CSS color string.

Choose how the API formats your color data.

Determines how out-of-gamut colors are mapped into visible ranges.

Rounds output channels to a specific decimal place.

String Formatting Options
Device-rendered input
Saturon-converted ()

Live API Usage

import { Color } from "saturon";// 1. Parse a color stringconst color = Color.from("red");// 2. Format and outputconst result = color.to(model, {    units: true});// Note: color.in(model).toString(options) works the same as color.to(model, options)

Model Conversions

Showing the configured output mapped across all supported color models.

Converted color values as strings
Target ModelString Value
rgbrgb(255 0 0)
hslhsl(0deg 100% 50%)
hwbhwb(0deg 0% 0%)
lablab(54.29054% 80.80493 69.89096)
lchlch(54.29054% 106.83718 40.85766deg)
oklaboklab(0.62796 0.22486 0.12585)
oklchoklch(0.62796 0.25768 29.23388deg)
srgbcolor(srgb 1 0 0)
srgb-linearcolor(srgb-linear 1 0 0)
display-p3color(display-p3 0.91749 0.20029 0.13856)
rec2020color(rec2020 0.79198 0.23098 0.07376)
a98-rgbcolor(a98-rgb 0.85859 0 0)
prophoto-rgbcolor(prophoto-rgb 0.70225 0.27572 0.10355)
xyz-d65color(xyz-d65 0.41239 0.21264 0.01933)
xyz-d50color(xyz-d50 0.43607 0.22249 0.01392)
xyzcolor(xyz 0.41239 0.21264 0.01933)