CSS UniPalette

Create perceptually uniform color palettes using oklch and css relative color syntax | GitHub
0
50
|

This tool demonstrates CSS-only perceptually uniform color palette generation using the new css relative color syntax with oklch() color space.

How It Works

Each color variation is calculated from source colors using CSS custom properties and relative color functions:

  • Lightness Scale: Controls the brightness levels (50, 100, 200... 950)
  • Hue Torsion: Shifts colors around the color wheel
  • Chroma Reduction: Adjusts color saturation across different shades

Interactive Features

  • Color Inputs: Click color swatches in the first column to change source colors
  • Lightness Inputs: Edit numeric values in header cells to adjust brightness levels
  • Global Controls: Use sliders to apply hue shifts and chroma adjustments
  • Export: Generate copy-ready CSS for your projects

CSS Relative Colors

This technique uses the new CSS relative color syntax:

oklch(from var(--source-color) var(--lightness) calc(chroma-adjustment) calc(hue-adjustment))

This allows for pure CSS color manipulation without JavaScript preprocessing, enabling dynamic theming and real-time color system updates.

Browser Support

Relative color syntax is supported in modern browsers. For production use, check current browser support.

Settings

Export