🎨 Utilities

Color Picker

Pick a color and get its HEX, RGB and HSL values with one click to copy.

HEX #3b82f6

RGB rgb(59, 130, 246)

HSL hsl(217, 91%, 60%)

How to use?

Open the color picker and pick the tone you want. The moment you select it, the HEX, RGB and HSL values show up already updated. To grab any of them, just hit Copy in the format you need.

Pick a colour and copy the code

Building a layout, tweaking CSS or settling on a brand palette, you need the colour's exact code, and its name rarely cuts it. This picker opens a visual palette where you choose the shade you want and get the values ready to use.

The same colour shows up in HEX, RGB and HSL at once, each with a copy button, because every context asks for its own format. HEX suits CSS, RGB an image, and HSL helps when you want to adjust hue and saturation without a headache. Enough to keep colours consistent between design and code without slips.

Selection happens in the browser, no install, and the code goes straight to your clipboard. Good for anyone working with web, design or just hunting down that specific shade.

Frequently asked questions

Can the picker give me a colour with transparency, such as RGBA or 8-digit HEX?

No. The field uses the browser's native colour input, which handles opaque sRGB in six hex digits and nothing else. The three values on screen all describe the same solid colour, with no alpha channel. If you need transparency, copy the RGB values and add the alpha yourself, writing rgba with a fourth number between 0 and 1.

Why do the HSL numbers look rounded when the HEX does not?

HSL is reported in whole numbers: hue in degrees from 0 to 360, saturation and lightness as integer percentages. That rounding means pasting the HSL into another converter can hand back a HEX sitting a point or two off the original. When a value has to survive the round trip untouched, carry the HEX or the RGB instead.

Can I paste a HEX code I already have to see its RGB and HSL?

There is no text field on the page for that, but the native picker almost always has one: click the colour swatch and look for the hex box inside the panel your operating system opens. Confirm the choice and all three formats update together, so the page doubles as a HEX to RGB and HSL converter.

Related Tools

🖼️

Image Color Picker

Load an image and discover the color of any pixel in real time. Hover to see HEX, RGB and HSL with a magnifier. Automatically extracts the dominant color palette.

🎨

Color Adjuster

Lighten, darken, invert, desaturate or adjust the saturation of a HEX, RGB or HSL color. See the result in real time.

🎨

Color Shades Generator

Generate shades and tints of any color. Click to copy the HEX, RGB or HSL code. Perfect for design systems and UI development.

🎨

Color Mixer

Mix two colors and get the resulting color. Control the percentage weight of each color. Result in HEX, RGB and HSL.

🎨

Screen Color Eyedropper

Explains how to use the browser EyeDropper API to pick a color from any point on the screen.

🎨

Color Palette Generator

Generate harmonious color palettes from a base color. Schemes: monochromatic, analogous, complementary, triadic, tetradic and split-complementary.