Color Picker & HEX Converter
Pick any color and instantly get its HEX, RGB and HSL values.
Pick any color and instantly get its HEX, RGB and HSL values.
Use the Color Picker to choose any colour visually and get its HEX, RGB and HSL values at once. Designers and web developers use these codes in CSS, graphic tools and brand guidelines. Pick a shade, copy the format you need and paste it straight into your project.
They are three ways to describe the same colour. HEX is a six-digit code, RGB gives red, green and blue levels, and HSL gives hue, saturation and lightness.
All three work in modern CSS. HEX is the most common, while HSL is handy when you want to adjust lightness or saturation.
Pick a colour using the colour box and the tool shows the same colour as a HEX code, an RGB value and an HSL value. You can copy any of them with one click. If you already have a HEX code, type it into the HEX box and press Convert HEX. A full six-digit code is required, with or without the # sign.
HEX is a hexadecimal form of RGB: the six digits are the red, green and blue amounts written in pairs, from 00 to FF. HSL describes the colour by hue (0–360°), saturation (%) and lightness (%), which is often easier for adjusting a shade.
The HEX code #2563EB is rgb(37, 99, 235) and hsl(221, 83%, 53%). It is a medium blue that is popular for buttons and links.
The HEX code #FF0000 is pure red, which is rgb(255, 0, 0).
It is a six-digit hexadecimal number. The first two digits are red, the next two are green and the last two are blue.
RGB mixes red, green and blue light. HSL describes the colour as hue, saturation and lightness, which is more intuitive to adjust.
Enter the full six-digit form. For #F80, write #FF8800.
Yes. All three formats are valid in CSS, for example color: #2563eb or color: rgb(37, 99, 235).