What Is the OKLCH Color Picker and Converter?
This OKLCH color picker and converter allows you to convert colors between OKLCH, HEX, RGB, HSL, and LCH formats. You can use the interactive color picker to adjust lightness, chroma, and hue values, or paste existing colors in the "Convert to OKLCH" section to convert them to OKLCH format.
Additionally, the tool supports bulk conversion other than the single color conversion.
What is OKLCH?
OKLCH is a perceptual color space designed to align with human vision. It is ideal for creating accessible color palettes and smooth gradients.
- L (Lightness): How light or dark the color is (0-1)
- C (Chroma): How colorful or saturated the color is (0-0.4)
- H (Hue): The color angle in degrees (0-360°)
How to Use the OKLCH Color Picker and Converter
There are three main functions that this OKLCH tool offers.
Pick an OKLCH color
Simply adjust the Lightness, Chroma, Hue, and Alpha sliders to pick a color visually. After adjusting these values, you will also be able to see OKLCH, LCH, HEX, RGB, HSL, and CSS variables in the color converter.
Convert to OKLCH
Input a color value in HEX, RGB, and HSL formats to convert to OKLCH. Additionally, you will see LCH, HEX, RGB, HSL, and CSS variables in the converter.
Convert from OKLCH
Under OKLCH Color Converter, either select the Single Color mode or the Bulk Convert mode.
If you select the Single Color mode, enter an OKLCH value to update all formats. You can click any copy button to copy that specific format to your clipboard.
For the Bulk Convert mode, paste multiple colors (one per line) in any format: HEX, RGB, HSL, or OKLCH. Then click "Convert All" to see all colors converted to OKLCH, HEX, RGB, and HSL. You can then export all colors as CSS custom properties, Tailwind CSS v4 config, or plain text. When you click any Export button, you can copy or download them.
Why Use OKLCH?
OKLCH is natively supported in modern browsers (Chrome 111+, Edge 111+, Safari 15.4+, Firefox 113+) and offers significant advantages over traditional color spaces. Since Tailwind CSS 4 has adopted OKLCH as its default color space (replacing RGB), OKLCH is now widely used in Tailwind-based designs. It provides predictable lightness and is a perceptually uniform color space.
However, if you need to support older browsers, you will need to use the HEX or RGB output values.