Color Picker
Pick a color or type its hex code to get the same color as HEX, RGB and HSL, ready to copy into CSS or a design app. It also shows the red, green and blue values and the hue, saturation and lightness.
Pick a color
3 or 6 digit hex, with or without #
Preview
Preset colors
Color values
Color information
Usage tips
- Click on the color picker or type a hex value like #3b82f6, 3b82f6 or #fff
- Use preset colors for quick selection
- Copy color values in different formats (HEX, RGB, HSL)
- Perfect for web development and design work
- All color values are automatically calculated
How to pick a colour and get its code
- Click the colour square to open your browser's colour picker, or type a hex code such as #3b82f6, 3b82f6 or the short form #fff.
- Or start from one of the 18 preset swatches. The preview bar shows the colour large.
- Read the values on the right: HEX, RGB and HSL, then each red, green and blue channel and the hue, saturation and lightness.
- Copy the format you need with the button beside it and paste it into your CSS, slides or design tool. To make a QR code in your own colours, use QR Code Generator.
Frequently asked questions
How do I convert hex to RGB?
Split the six digits into three pairs and read each pair as a base-16 number from 0 to 255. For #3b82f6, 3b is 59, 82 is 130 and f6 is 246, so the colour is rgb(59, 130, 246). Type the hex code into this tool and the RGB value appears at once.
Sources: W3C, CSS Color Module Level 4
What does a 3-digit hex code mean?
It is a short form where each digit is doubled. #fff is #ffffff (white) and #09c is #0099cc. The tool accepts both, with or without the #, and always shows the 6-digit form.
Sources: W3C, CSS Color Module Level 4
What is HSL and when is it useful?
HSL describes a colour by hue, an angle on the colour wheel from 0 to 360 degrees, saturation from 0% grey to 100% full colour, and lightness from 0% black through 50% pure colour to 100% white. It makes lighter and darker shades of one colour easy: change only the lightness.
Sources: W3C, CSS Color Module Level 4
Why does turning the HSL back into hex give a slightly different colour?
The HSL values here are rounded to whole numbers, so converting them back can be off by one or two in a channel. Copy the HEX or RGB value when you need the exact colour.
Can I pick a colour from my screen or an image?
Not with a separate tool here. In some desktop browsers, Chrome among them, the colour dialog that opens from the colour square has an eyedropper that works on anything on screen.
Will my text colour be readable?
This tool does not measure contrast. WCAG 2.1 asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text, so test your text and background pair with a contrast checker before you use it.
Sources: W3C, WCAG 2.1, success criterion 1.4.3
Does it support transparency or CMYK?
No. It handles solid colours in HEX, RGB and HSL, the formats screens and CSS use. For print, convert to CMYK in your design software with the printer's colour profile.