Why use OKLCH instead of HSL?

OKLCH is designed to make lightness and chroma adjustments more perceptually consistent than HSL. It does not guarantee accessible contrast; check the foreground and background colors you plan to use.

Can I convert RGB to HEX?

Yes. Enter or select a color and use the format menu to view its HEX, RGB, HSL, or OKLCH representation.

Free Online Color Picker (HEX, RGB, HSL, OKLCH)

How to use the color picker

Use the color plane to explore a shade, or enter values in your preferred format.

Supporting Multiple Formats

Switch between HEX, RGB, HSL, and OKLCH to use the notation your stylesheet or design tool expects.

Built-in Eyedropper

If your browser supports the EyeDropper API, use the eyedropper control to sample a point on your screen. The browser may ask you to grant permission.

Frequently Asked Questions

What is OKLCH?

OKLCH represents a color with lightness, chroma, and hue. Its lightness is designed to track perceived lightness more consistently than HSL, though it does not make color contrast or accessibility automatic. Check browser support and keep a fallback when your project needs one.

How do I get the HEX code?

Set the format dropdown to "HEX". As you select a color on the visual plane, the 6-character HEX code will appear in the input field. You can also paste an existing HEX code to see what it looks like.

Can I extract colors from an image?

Yes! Using the Eyedropper tool (the icon next to the selected color circle), you can click choose a point on your screen to sample a color. Availability depends on browser support and permission.