Color Picker
Pick colors and convert between HEX, RGB, HSL, and HSB formats.
About Color Picker
This free online color picker lets you choose any color and instantly see it expressed in HEX, RGB, HSL, and HSB. Click the large preview swatch to pick visually, fine-tune with red, green, blue, and alpha sliders, or paste an existing value into any format field and watch every other format update in sync. It doubles as a color converter: turn HEX to RGB, RGB to HSL, or HSL to HSB without doing any math. Everything runs locally in your browser — nothing you enter is sent to a server.
Designers and developers reach for a tool like this dozens of times a day: matching a brand color from a style guide, translating a CSS hsl() value into the hex code a design tool expects, or adding transparency to a background color. The alpha slider automatically switches the output to rgba() and hsla() notation ready to drop into your stylesheet, and every format has a one-click Copy button. Stuck for inspiration? The Random Color button generates a fresh shade each time you press it, which is a quick way to explore the palette.
How to pick and convert a color
- 1Click the large color preview swatch to open the visual picker and choose your color.
- 2Fine-tune the result with the R, G, and B channel sliders, or use the A slider to add transparency.
- 3Alternatively, paste a value into the HEX, RGB, HSL, or HSB field and press Enter — all other formats convert instantly.
- 4Click Random Color if you want the tool to suggest a new shade.
- 5Press Copy next to any format to copy that value to your clipboard.
Frequently asked questions
Which color formats does this tool support?
HEX, RGB, HSL, and HSB, all shown side by side and kept in sync. When you lower the alpha slider below 100%, the RGB and HSL outputs automatically switch to rgba() and hsla() notation with the correct opacity value.
What is the difference between HSL and HSB?
Both describe a color by hue and saturation, but they measure the third component differently. HSL uses lightness, where 100% is always white, and is the notation CSS supports natively. HSB (also called HSV) uses brightness, where 100% is the most vivid version of the hue — the model used in tools like Photoshop and Figma.
Can I convert a HEX code to RGB or HSL?
Yes — paste the hex code into the HEX field and press Enter. The RGB, HSL, and HSB values update immediately, and you can copy whichever format you need with one click. The same works in reverse from any of the other fields.
Does the color picker support transparency?
Yes. Drag the A slider to set opacity from 0 to 100%. The preview swatch shows the transparency over a checkerboard, and the RGB and HSL outputs include the alpha value so they are ready to paste into CSS.
Is any of my data sent to a server?
No. All color conversions happen locally in your browser using plain JavaScript — nothing you type or pick ever leaves your device.
Is this color picker free to use?
Yes — completely free, with no sign-up, no ads on your clipboard, and no usage limits.
Enjoying this tool?
Toolism is free and always will be. If it saved you time, consider buying me a coffee!
Buy me a coffee