Library
Two published palettes, every step copyable as OKLCH or hex. Open a scale in the generator to start from its base color.
Click a color to copy it as
Radix Colors
v3.0.0 · MIT · source · 31 scales of 12
- LightDark
- mauveOpen in generatorLightDark
- slateOpen in generatorLightDark
- LightDark
- oliveOpen in generatorLightDark
- LightDark
- tomatoOpen in generatorLightDark
- LightDark
- LightDark
- crimsonOpen in generatorLightDark
- LightDark
- LightDark
- purpleOpen in generatorLightDark
- violetOpen in generatorLightDark
- LightDark
- indigoOpen in generatorLightDark
- LightDark
- LightDark
- LightDark
- LightDark
- greenOpen in generatorLightDark
- grassOpen in generatorLightDark
- brownOpen in generatorLightDark
- bronzeOpen in generatorLightDark
- LightDark
- LightDark
- LightDark
- LightDark
- yellowOpen in generatorLightDark
- amberOpen in generatorLightDark
- orangeOpen in generatorLightDark
Tailwind CSS
v4.3.2 · MIT · source · 26 scales of 11
- orangeOpen in generator
- amberOpen in generator
- yellowOpen in generator
- greenOpen in generator
- emeraldOpen in generator
- indigoOpen in generator
- violetOpen in generator
- purpleOpen in generator
- fuchsiaOpen in generator
- slateOpen in generator
- neutralOpen in generator
- stoneOpen in generator
- mauveOpen in generator
- oliveOpen in generator
- taupeOpen in generator
References
- CSS Color 4: OKLab and OKLCH — the specification, gamut mapping included
- A perceptual color space for image processing — Björn Ottosson's introduction of OKLab
- OKLCH in CSS: why we moved from RGB and HSL — Evil Martians
- oklch.com — a picker and converter
- oklch.fyi — palettes, conversion and a gamut visualizer
- Radix Colors — the scales and how their twelve steps are meant to be used
- Tailwind CSS colors — the default palette, authored in OKLCH since v4