Random OKLCH Color Generator

Generate an OKLCH tuple with lightness in [0, 100), chroma in [0, 0.4), and hue in [0, 360) using injected randomness; the tuple is not clipped to a device gamut.

Description

Sample OKLCH lightness in percent, chroma, and hue in degrees independently within fixed ranges.

OKLCH expresses OKLab in polar coordinates: chroma describes distance from the neutral axis, and hue describes direction around it. This makes hue and chroma explicit alongside lightness.^[1]

This generator returns lightness on a 0–100 percentage scale, chroma below 0.4, and hue below 360 degrees. It samples these coordinates directly rather than deriving them from an in-gamut RGB color.

CSS defines oklab() and oklch() representations for these spaces.^[2]

When to use Random OKLCH Color Generator

Use it for color-coordinate fixtures or exploratory color studies where values outside sRGB gamut are acceptable.

How to use Random OKLCH Color Generator and understand its results

Run with no input fields, or supply {} programmatically.
Read lightness as a percentage, chroma as a coordinate, and hue in degrees. Preserve the percentage convention during conversion.
For the example, CSS oklch(25% 0.1 90) uses the correct lightness unit. Convert and check gamut separately before selecting a display color.

lightness = 100 × r1; chroma = 0.4 × r2; hue = 360 × r3

Three finite random draws in [0, 1) independently set the coordinates.

The implementation returns these sampled numbers without RGB conversion, gamut mapping, clipping, alpha, or a formatted CSS string. Uniform coordinate sampling is not a uniform sample over visible or printable colors.

json

{
  "input": {},
  "randomDraw": 0.25,
  "output": {
    "lightness": 25,
    "chroma": 0.1,
    "hue": 90
  }
}

Draw zero allows lightness zero, chroma zero, and hue zero; hue has no color direction to express when chroma is zero. The sampling formulas approach but do not intentionally include lightness 100, chroma 0.4, or hue 360.

Floating-point rounding applies near endpoints. An invalid draw in any coordinate fails rather than being clamped or replaced.

Limitations and assumptions

The default source is Math.random; no seed input or cryptographic entropy guarantee is provided. Repeated runs may select the same result, and the distribution depends on the random source.

The generator does not ensure sRGB or print gamut, contrast, color-vision accessibility, palette harmony, or an equal perceptual distribution.

The lightness field differs from the fractional scale used by this repository’s OKLab generator. Do not pass it between representations without adjusting units.

Alternative or Complementary methods

Use the related coordinate generator when its representation is intended. RGB generation provides directly bounded byte channels; conversion and gamut decisions remain separate.

References

A perceptual color space for image processing — Björn Ottosson
CSS Color Module Level 4: HSL and sRGB color representations — World Wide Web Consortium

Similar or alternative tools

Random OKLab Color Generator
Sample the related coordinate representation while observing its different lightness scale.
Random RGB Color Generator
Sample three bounded 8-bit sRGB channel values.