🎨 Color Picker

About the Color Picker

This color picker runs entirely in your browser. Choose a color using the native palette picker, drag the RGB or HSL sliders, type a HEX value, or use the eyedropper (where supported) to sample any pixel on your screen. Every format updates in real time, and you can copy any value with one click.

Color formats explained

• HEX — A 6-digit hex code (e.g. #0EA5E9) prefixed with #. The most compact and common format on the web.
• RGB — Red, Green, Blue channels from 0–255. Example: rgb(14, 165, 233). Intuitive for screen colors.
• HSL — Hue (0–360°), Saturation (0–100%), Lightness (0–100%). Example: hsl(199, 85%, 48%). Easiest for creating color variations.
• HSV — Hue, Saturation, Value. Similar to HSL but Value represents brightness. Common in graphics software.

How to use the picker

1. Click Pick from palette to open the native color picker, or drag the RGB/HSL sliders.
2. Type a HEX value directly into the HEX field to convert it to all other formats.
3. Click Eyedropper (in supported browsers) to sample any color visible on your screen.
4. Use Random for inspiration, then click any Copy button to grab the value.

Frequently asked questions

Why is the eyedropper button disabled? The EyeDropper API is currently supported in Chromium-based browsers (Chrome, Edge). In Firefox or Safari, use the native palette picker or sliders instead.

Is the eyedropper safe to use? Yes. The browser shows a confirmation before sharing the picked pixel with the page, and nothing is uploaded anywhere.

What's the difference between HSL and HSV? Both are cylindrical color models. HSL's Lightness of 100% is pure white, while HSV's Value of 100% is the pure color. They produce different shades when adjusting the third channel.

Does my color history persist? History is kept in your browser's memory for the current session only. Refreshing the page clears it.