Every color on a screen or a printed page has a code, and every design tool speaks a different dialect: web pages use HEX, photo editors use RGB, and designers often think in HSL. This free color picker and converter lets you pick any color, see it instantly, and convert it between HEX, RGB, and HSL in your browser, so you always have the exact code your tool needs.
Nothing you pick or type is uploaded or stored. The conversion runs entirely on your own device, so you can work on private brand colors, client palettes, and unpublished designs without sending them to a server.
What Is a Color Picker and Converter?
A color picker is a tool that lets you choose a color visually and read off its code. A converter turns one code format into the others. This tool does both: it has a visual picker, a HEX field, an RGB field, and an HSL field, and every conversion updates all three formats at once, plus a swatch showing the color itself.
The three formats describe the same color in different ways. HEX is a six-digit code starting with #, such as #B76E79. RGB gives the amounts of red, green, and blue light, each from 0 to 255. HSL gives the hue as an angle on the color wheel, plus saturation and lightness as percentages. A rose gold color like #B76E79 is RGB 183, 110, 121 and HSL 351 degrees, 33.6% saturation, 57.5% lightness, and this converter moves between all three without you doing any arithmetic.
How to Use the Color Picker and Converter
- Pick a color with the color picker, or type a code into one of the three fields below. The starting color is #B76E79, a rose gold.
- Choose which format you are entering: HEX, RGB, or HSL. The converter reads the field for the format you choose.
- Press Convert Color. The picker, all three fields, and the swatch update to the same color.
- Copy the code you need. Use HEX in web code and CSS, RGB in photo and video tools, and HSL when you are adjusting how vivid or light a color looks.
Worked Example
Start with the rose gold HEX code #B76E79. With HEX selected, press Convert Color. The converter reads the six digits, works out that the red channel is 183, the green channel is 110, and the blue channel is 121, and that the hue sits at 351 degrees, almost all the way around the color wheel, with 33.6% saturation and 57.5% lightness. The RGB field shows 183, 110, 121, the HSL field shows 351, 33.6%, 57.5%, and the swatch shows the rose gold itself.
Now go the other way. Choose RGB, type 183, 110, 121 into the RGB field, and press Convert Color. The HEX field returns to #B76E79 and the HSL field to 351, 33.6%, 57.5%. Choose HSL instead, type 351, 33.6%, 57.5% into the HSL field, and press Convert Color: the HEX field again shows #B76E79. The same color, entered three different ways, always comes back as the same three codes.
Understanding the Three Formats
HEX. A compact code for web pages and CSS. Six hexadecimal digits after a # sign, two per channel: red, green, then blue. #B76E79 means red B7 (183), green 6E (110), blue 79 (121). A three-digit shorthand such as #F80 expands to #FF8800. HEX is the code you paste into a stylesheet, a website builder, or a design token.
RGB. Three numbers from 0 to 255, one for each light channel. RGB 183, 110, 121 means a fairly strong red, a moderate green, and a moderate blue, which the eye reads as a dusty rose. RGB is the native format of screens, photo editors, and video tools, and it is what you type when a tool asks for red, green, and blue sliders.
HSL. Hue, saturation, and lightness. Hue is an angle from 0 to 360 degrees: 0 is red, 120 is green, 240 is blue, and 351 is just short of red again, in the pink-red range. Saturation is how vivid the color is, from gray to full color. Lightness is how far the color sits between black and white. HSL is the easiest format for designing: nudge the hue to shift the color family, drop the saturation to mute it, and raise the lightness to make a pastel.
Common Color Conversion Mistakes
The most common mistake is typing a HEX code without the # sign or with the wrong number of digits. A HEX code needs either 3 or 6 hexadecimal digits, using only the characters 0 to 9 and A to F. Codes with letters past F, or with 4 or 5 digits, are not valid colors, and the converter will say so rather than guess.
Another common mistake is mixing up the RGB order. RGB is always red, green, blue, in that order, and swapping two channels gives a completely different color. And in HSL, the hue is an angle, so 351 degrees and -9 degrees are the same direction on the wheel; if your tool shows a hue outside 0 to 360, wrap it around instead of treating it as an error.
Finally, remember that the same code can look different on different screens. Brightness, color profiles, and room lighting all shift how a color appears, so check a brand color on the device your audience will use, and use the code, not your memory of the shade, when you share it with a developer or a printer.
Who Uses a Color Picker and Converter?
Web developers use converters to turn a designer’s HEX codes into the RGB or HSL values a stylesheet or a canvas needs. Designers use them to build palettes, match a brand color across tools, and describe a color to a colleague in the format that colleague’s tool accepts. Marketers use them to keep social media graphics, slide decks, and email templates on brand. And anyone choosing paint, fabric, or a website theme uses them to carry one exact color from a swatch to a screen.
Frequently Asked Questions
Does this color picker store the colors I pick?
No. The conversion runs entirely in your browser. Nothing you pick or type is uploaded, saved, or shared, and closing the page removes it.
What is the difference between HEX, RGB, and HSL?
They are three ways of writing the same color. HEX is a six-digit code used in web pages, RGB is three numbers for the red, green, and blue light channels, and HSL is hue, saturation, and lightness. This converter translates between all three, so you can use whichever format your tool needs.
Can I enter a 3-digit HEX code?
Yes. A 3-digit code such as #F80 is expanded to its 6-digit form, #FF8800, by doubling each digit. A 6-digit code is used as it is. Codes with any other length, or with characters outside 0 to 9 and A to F, are not valid.
How do I write an RGB value?
Type three whole numbers from 0 to 255, separated by commas, in red, green, blue order, such as 183, 110, 121. Each number is one light channel, and the order matters: swapping two channels gives a different color.
How do I write an HSL value?
Type the hue in degrees, then the saturation and lightness as percentages, separated by commas, such as 351, 33.6%, 57.5%. The hue runs from 0 to 360, and the saturation and lightness run from 0% to 100%.
Why does the same color look different on another screen?
Screens differ in brightness, color profile, and calibration, and room lighting changes how a color appears. The code is exact; the display is not. Check a brand color on the device your audience will use before you approve it.
Which format should I use for a website?
Use HEX in CSS and in most website builders, because it is short and every web tool accepts it. Use RGB when a tool asks for separate red, green, and blue values, and HSL when you want to adjust a color by shifting its hue or muting its saturation, since those edits are easier in HSL.