Home / Free tools / Hex color picker
Hex color picker
Use this hex color picker to find any color and get its hex code, RGB and HSL values. Drag the square, slide the hue or type a code. Copy the value you need with one click.
Loading the hex color picker.
How to use the hex color picker
- Pick a hue. Slide the rainbow bar to the color family you want: red, green, blue or anything between.
- Drag the dot in the square. Move right for a stronger color and left for a grayer one. Move up for brighter and down for darker.
- Or type a code. Enter a hex code with 3 or 6 digits, with or without the #. You can also type red, green and blue numbers from 0 to 255, so it works as an RGB color picker too.
- Copy the value. Press Copy next to the hex, RGB or HSL value and paste it into your CSS, HTML or design app.
The picker also works from the keyboard. Tab to the dot or the hue bar and use the arrow keys. Hold Shift to move the dot in bigger steps. Click any of the ten shades to jump to a lighter or darker version of your color.
How hex color codes work
A hex code is three numbers written side by side: red, green and blue. Each number runs from 0 to 255 and is written with two digits in base 16. Base 16 uses 0 to 9 and then A to F for the values 10 to 15.
Value = first digit × 16 + second digit
Worked example: #4F5BFF to RGB
Split the code into three pairs: 4F, 5B and FF.
- Red: 4F = 4 × 16 + 15 = 79
- Green: 5B = 5 × 16 + 11 = 91
- Blue: FF = 15 × 16 + 15 = 255
So #4F5BFF is rgb(79, 91, 255). Blue is at full strength and red and green are low, which gives a bright blue with a slight violet tint.
A 3 digit code is a short form. Each digit is doubled, so #36C means #3366CC. Hex codes are not case sensitive: #4f5bff and #4F5BFF are the same color.
Hex, RGB and HSL
All three are CSS color codes for the same thing, and every browser accepts each of them. Hex is the shortest to write. RGB shows the three channels as plain numbers. HSL describes the color the way people do: hue as an angle from 0 to 360 on the color wheel, then saturation and lightness as percentages. HSL is handy when you want the same color a little lighter or darker, because you only change one number.
Common HTML color codes
| Color | Hex | RGB | HSL |
|---|---|---|---|
| White | #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| Black | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| Red | #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| Lime | #00FF00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| Blue | #0000FF | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| Yellow | #FFFF00 | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| Orange | #FFA500 | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| Gray | #808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) |
| Teal | #008080 | rgb(0, 128, 128) | hsl(180, 100%, 25%) |
| Navy | #000080 | rgb(0, 0, 128) | hsl(240, 100%, 25%) |
Contrast and other practical notes
- Check the contrast before you use a color for text. The WCAG accessibility guidelines ask for a contrast ratio of at least 4.5:1 between normal text and its background. The picker shows the ratio against white and against black. #4F5BFF scores 4.91:1 on white, which passes, and 4.27:1 on black, which fails.
- Use the shades for hover and pressed states. One step darker works well for a button hover. The lightest shades make good backgrounds for the same color family.
- Screens differ. The same hex code can look a little different on a phone, a laptop and a printed page. Check important brand colors on more than one screen.
Printing labels in your brand color? Barcodes need dark bars on a light background, so check the contrast here before you use the free barcode generator. Working on a sale banner? The discount calculator gives you the sale price to put on it. You can find every tool on the free online tools page.
How this color picker was checked
Built by Rasel Hakkani, WordPress developer at Swift Web Dev. The hex, RGB and HSL conversions and the contrast ratios were compared with separate calculations for dozens of colors, including the pass and fail boundary at 4.5:1.
Sources
Last checked: October 2026. Found a wrong answer? Tell us and we will fix it.
Hex color picker questions
What is a hex color code?
A hex color code is a # followed by six digits, such as #4F5BFF. The first two digits set the amount of red, the middle two set green and the last two set blue. Each pair is a number from 0 to 255 written in base 16.
How do I convert a hex code to RGB?
Split the code into three pairs. For each pair, multiply the first digit by 16 and add the second digit, counting A to F as 10 to 15. #4F5BFF becomes 79, 91 and 255, so the RGB value is rgb(79, 91, 255). The picker does this for you as you type.
Are 3 digit hex codes valid?
Yes. A 3 digit code is a short form where each digit is doubled. #36C is the same color as #3366CC. Type either form into the picker and it shows the full 6 digit code.
What is the difference between RGB and HSL?
RGB describes a color by how much red, green and blue light it has. HSL describes the same color by its hue on the color wheel, its saturation and its lightness. Both work in CSS. HSL is easier to adjust by hand because lightness is a single number.
What contrast ratio does text need?
WCAG level AA asks for at least 4.5:1 for normal text and 3:1 for large text. The picker shows the ratio of your color against white and against black and tells you whether it passes for normal text.
Is the hex color picker free?
Yes. It runs in your browser, needs no account and does not send your colors anywhere.
More free tools
Need a calculator like this on your website?
Swift Web Dev builds custom calculators and tools for WordPress sites: quote forms, pricing estimators, booking logic and more.