How to use the color picker
Our free online color picker is designed for both casual creators and professional web developers. Use the interactive color plane to visually select the perfect shade, or manually enter values in your preferred format.
Supporting Multiple Formats
We support modern CSS color spaces including HEX, RGB, HSL, and the perceptually uniform OKLCH. Simply use the dropdown to switch between formats and instantly get the code you need for your CSS or design tool.
Built-in Eyedropper
Need to extract a color from an image or a webpage? If your browser supports it, click the eyedropper icon next to the color preview to sample any pixel explicitly from your screen.
Frequently Asked Questions
OKLCH is a modern perceptual color space that makes lightness and chroma more consistent across different hues. Unlike HSL, adjusting the lightness in OKLCH feels identical whether you are working with yellow or blue. It's natively supported in modern CSS!
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.
Yes! Using the Eyedropper tool (the icon next to the selected color circle), you can click anywhere on your screen to extract the exact color pixel. Note: This feature requires a compatible browser (like Chrome or Edge).