Color Picker & Converter
Pick any color and get its HEX, RGB and HSL values with one-tap copy.
HEX
#6D5BFF
RGB
rgb(109, 91, 255)
HSL
hsl(247, 100%, 68%)
About this tool
Every color on the web has at least three names. Designers hand off HEX codes, CSS often wants RGB for alpha transparency, and HSL is the format you actually want when adjusting a color — nudge the lightness for a hover state, shift the hue for a variant, without recalculating everything. This tool keeps all three in sync: pick a color or type a HEX code, and the HEX, RGB and HSL values update together, each with its own copy button.
The visual picker uses your browser's native color input, which on modern desktop browsers includes an eyedropper — click it and sample any color directly from your screen, whether it's in a design mockup, a competitor's site, or a photo. Shorthand HEX codes like #f80 are expanded automatically, and invalid input is simply ignored rather than breaking the preview.
Like every tool on Complete Toolkit, conversion happens entirely on your device with standard color-space math — no uploads, no tracking, and it keeps working offline once the page has loaded. Bookmark it next to your editor; it's the fastest route from “that color” to “that color, in the format I need.”
How to use the Color Picker & Converter
- 1Click Pick color to open the visual picker — on desktop browsers, use the eyedropper to sample any color on your screen.
- 2Or type a HEX code directly into the text box (with or without the #).
- 3Read the HEX, RGB and HSL values — they stay in sync automatically.
- 4Click Copy next to the format you need.
Frequently asked questions
What's the difference between HEX, RGB and HSL?
They describe the same color differently. HEX (#6D5BFF) is compact and universal in design handoffs. RGB (rgb(109, 91, 255)) exposes the red, green and blue channels and supports alpha for transparency. HSL (hsl(252, 100%, 68%)) separates hue, saturation and lightness, which makes it the easiest format for creating lighter, darker or shifted variants of a color.
How do I convert HEX to RGB manually?
Split the HEX code into three pairs and convert each pair from hexadecimal to decimal. For #6D5BFF: 6D = 109, 5B = 91, FF = 255, giving rgb(109, 91, 255). This tool does the conversion instantly in both directions.
Can I pick a color from an image or my screen?
On modern desktop browsers (Chrome and Edge), yes — open the picker and click the eyedropper icon, then click anywhere on your screen. Support on mobile browsers varies.
Are 3-digit HEX codes like #f80 valid?
Yes — they're shorthand where each digit is doubled, so #f80 means #ff8800. The tool expands shorthand automatically when you type it.