Pick any colour and get its codes instantly. Choose a colour below to see its HEX, RGB and HSL values, with one-click copy buttons for each.
1. Click the colour box to open your device's colour picker and choose a colour. 2. Or type a HEX code directly. 3. Read the HEX, RGB and HSL values and click Copy to use them in your design.
Every colour on a screen has a code, and designers need those codes to use the same colour in a website, a logo, a poster or a video. This free colour picker gives you the code for any colour in three formats: HEX, RGB and HSL. Click the colour box, choose any colour you like, and the tool shows all three codes at once, with a copy button for each one. You can also type a HEX code to see what colour it is and get its RGB and HSL values.
The three formats describe the same colour in different ways. HEX is a six-digit code used in websites and apps, for example #3367D6 is a blue. RGB describes the colour by its red, green and blue amounts, each from 0 to 255: the same blue is rgb(51, 103, 214). HSL describes it by hue (the colour on the wheel, 0 to 360), saturation (how strong it is) and lightness (how bright it is). Designers use HEX for websites, RGB for graphics, and HSL when they want to make a colour lighter or darker.
Take the blue #3367D6, which is the main colour of this website. In RGB it is rgb(51, 103, 214): 51 red, 103 green and 214 blue. The high blue number is why it looks blue. In HSL it is hsl(221, 67%, 52%): a hue of 221 degrees, which sits in the blue part of the colour wheel, a saturation of 67 percent, which is fairly strong, and a lightness of 52 percent, which is a medium blue. Try it in the picker above: click the colour box and choose a blue, or type #3367D6, and check that your result matches.
Now try a bright red: #FF0000. In RGB it is rgb(255, 0, 0): full red, no green and no blue. In HSL it is hsl(0, 100%, 50%): a hue of 0 degrees, which is red on the colour wheel, full saturation and medium lightness. If you make the red lighter, for example #FF6666, the RGB becomes rgb(255, 102, 102) and the HSL becomes hsl(0, 100%, 70%) — the hue and saturation stay the same, but the lightness rises from 50 to 70 percent. That is why HSL is so useful: to make a colour lighter or darker, you only change the lightness number. Type #FF0000 in the HEX box and check your result.
HEX codes use six digits in pairs: the first two are red, the middle two are green and the last two are blue, each from 00 to FF in hexadecimal (0 to 255). For example, #FFFFFF is white (all colours at full), #000000 is black (all at zero) and #3367D6 is a blue with red 51, green 103 and blue 214. RGB writes the same three numbers in decimal: rgb(51, 103, 214). HSL uses a different idea: hue is the angle on the colour wheel (0 is red, 120 is green, 240 is blue), saturation is the strength from 0 to 100 percent, and lightness is the brightness from 0 percent (black) to 100 percent (white).
Copy the HEX for websites. HEX codes work in HTML, CSS, Canva, Figma and most design tools. Use HSL to make shades. To get a lighter or darker version of a colour, keep the hue and change only the lightness. Check contrast. Light text needs a dark background and dark text needs a light background, or people cannot read it. Pick a palette, not random colours. Choose one main colour, one accent colour and one neutral colour, and use them everywhere. Test on a real screen. Colours look different on different screens, so check your design on a phone as well as a computer.
Using too many colours. A design with six bright colours looks messy; two or three colours are usually enough. Forgetting contrast. Yellow text on a white background is almost unreadable, so always check light against dark. Copying the wrong code. HEX, RGB and HSL look different, so make sure you paste the right format for your tool. Trusting one screen. The same colour can look different on a phone, a laptop and a printed page, so test it. Using colour alone to mean something. Do not use colour alone for important information, because colour-blind users may miss it — add text or an icon too.
Pro Tip: This website's blue is #3367D6. Use the picker to find a lighter shade for backgrounds (try lightness 90 percent) and a darker shade for headings (try lightness 30 percent).
Note: HEX codes are not case-sensitive: #3367d6 and #3367D6 are the same colour. The short form #36D is not used here; this tool always shows the full six-digit code.
What is a HEX colour code? A HEX code is a six-digit code that describes a colour for websites and apps, for example #3367D6 is blue. The first two digits are red, the middle two are green and the last two are blue.
What is RGB? RGB describes a colour by its red, green and blue amounts, each from 0 to 255. For example, rgb(255, 0, 0) is bright red and rgb(0, 0, 0) is black.
What is HSL? HSL describes a colour by hue (0-360 degrees on the colour wheel), saturation (0-100 percent) and lightness (0-100 percent). It is the easiest format for making a colour lighter or darker.
How do I use a HEX code on my website? In CSS, write the code directly, for example color: #3367D6; for text or background-color: #3367D6; for a background. Most design tools also accept HEX codes in their colour boxes.
What is the difference between HEX and RGB? They describe the same colour in different ways: HEX uses hexadecimal numbers (#3367D6) and RGB uses decimal numbers (rgb(51, 103, 214)). You can convert between them with this tool.
How do I make a colour lighter? In HSL, keep the hue and saturation the same and raise the lightness. For example, hsl(220, 62%, 52%) becomes lighter at hsl(220, 62%, 75%).
What colours go well together? Colours opposite each other on the colour wheel, such as blue and orange, give strong contrast. Colours next to each other, such as blue and teal, look calm and matching. Try both in the picker.
Can I use the colour codes commercially? Yes. Colour codes are free facts, not owned by anyone, so you can use them in any design, website or product.