This online Color Picker lets you choose a colour visually and copy it in the format you need. Drag inside the saturation/brightness area to set the shade, use the hue slider to change the base colour and the alpha slider for transparency, and read the live HEX, RGB, and HSL values — each one click-to-copy.
You can also paste a hex code, use the native colour swatch, or — in supported browsers — the eyedropper to grab a colour from anywhere on your screen. A built-in preview shows how black and white text look on your colour with their WCAG contrast ratios. Everything runs in your browser.
How to use the color picker
- Drag in the large area to set saturation (left–right) and brightness (up–down).
- Use the hue slider to change the base colour, and the alpha slider for transparency.
- Or type a hex code, use the native swatch, or click the eyedropper to sample a screen colour.
- Click any of the HEX, RGB, or HSL values to copy it.
The picking area, hue, and alpha
The large square is a saturation/brightness (HSV) area: moving right increases saturation and moving up increases brightness, for the hue currently set by the slider below it. This is the standard picker layout used in design tools, and it makes it easy to find a specific shade of a colour. The alpha slider adds transparency, which is reflected in the RGBA and HSLA output and an 8-digit hex.
HEX, RGB, and HSL
The picker shows the same colour in three formats at once. HEX is compact and the most common in CSS and design handoffs; RGB maps directly to screen channels and is handy in code; HSL (hue, saturation, lightness) is intuitive for making a colour lighter, darker, or less saturated. When an alpha below 100% is set, the values switch to RGBA, HSLA, and 8-digit hex so the transparency is preserved.
The eyedropper and contrast preview
In Chromium-based browsers (Chrome and Edge), the eyedropper button uses the browser’s EyeDropper API to sample any pixel on your screen — useful for matching a colour from an image or another app. Where it is not available the button is simply hidden. The text-on-colour preview shows black and white text over your colour with their contrast ratios, so you can immediately tell which foreground will be readable.
Frequently Asked Questions
How do I get the HEX, RGB, or HSL value of a colour?
Pick a colour with the area and sliders (or the eyedropper), and the picker shows all three formats. Click any value to copy it to your clipboard.
Can I pick a colour from my screen?
Yes, in Chromium browsers (Chrome and Edge): click the eyedropper button and select any pixel on screen. In browsers without the EyeDropper API the button is hidden, but you can still paste a hex or use the native colour swatch.
How do I set transparency?
Use the alpha slider. When alpha is below 100%, the outputs switch to RGBA, HSLA, and an 8-digit hex (RRGGBBAA) so the transparency is included.
What is the difference between this and the Color Converter?
This tool is for visually picking a colour and reading its values. The Color Converter is for converting a value you already have between HEX, RGB, HSL, and HSV, and it also shows harmonies and WCAG contrast.
How do I know if text will be readable on my colour?
The preview shows black and white text on your colour along with their contrast ratios. A ratio of at least 4.5:1 passes WCAG AA for normal-size text (marked with a check).