Color Converter

How to convert a color

1. Pick a color with the color picker, or paste a code such as #1657D8, rgb(22, 87, 216) or hsl(220, 82%, 47%) into the text box. A message appears if the code cannot be read.
2. The HEX, RGB and HSL values update instantly, with a live preview swatch.
3. Click Copy next to the format you need and paste it into your CSS, design tool or document.

HEX, RGB and HSL explained

HEX (like #1657D8) is the compact six-digit form used everywhere in CSS and design tools: two hexadecimal digits each for red, green and blue. RGB (like rgb(22, 87, 216)) lists the same three channels in decimal, from 0 to 255. HSL (like hsl(220, 82%, 47%)) describes a color by hue (0–360° around the color wheel), saturation (how vivid it is) and lightness (how bright it is). HEX and RGB are two spellings of the same numbers, while HSL is a different way of describing the same sRGB color.

Worked examples

• Short HEX: #16D expands by doubling each digit to #1166DD, which is rgb(17, 102, 221).
• Pure red: #FF0000 is rgb(255, 0, 0) and hsl(0, 100%, 50%).
• Grays have no real hue: #808080 converts to hsl(0, 0%, 50%). With zero saturation the hue number is meaningless, so the tool reports 0.
• A darker hover shade: start from hsl(220, 82%, 47%), drop lightness to 37%, and you get rgb(17, 69, 172), which is #1145AC. Same hue, same saturation, just deeper.

Which format should I use?

Use HEX when a tool or brand guide asks for a single short code. Use RGB when you need the raw channel numbers, for example in image editors or when adding transparency with rgba(). Use HSL when you want to adjust a color logically: keep the hue and nudge lightness for hover states, or lower saturation for muted variants. A full theme can often be generated from one hue by changing only the other two numbers.

Rounding: why a round trip can shift a value

HSL is shown as whole numbers, but the underlying math produces fractions. Converting #1657D8 to hsl(220, 82%, 47%) and then back gives #1657DA, because the blue channel moves from 216 to 218 after rounding. Likewise #FF5733 becomes hsl(11, 100%, 60%) and returns as #FF5833. The difference is invisible to the eye, but it matters if you need an exact brand value. Treat the original HEX or RGB as the source of truth and use HSL only for exploring variations.

What this converter accepts and ignores

• HEX with or without the leading #, in 3-digit or 6-digit form. Eight-digit HEX with an alpha pair is not supported.
• rgb() and hsl() with commas or spaces. If you paste rgba() or hsla(), the alpha value is read but discarded, so the output is always fully opaque.
• Hue values outside 0–360, including negatives, wrap around the wheel. Saturation or lightness above 100%, or an RGB channel above 255, is rejected.
• Named colors such as tomato, CMYK, OKLCH and wide-gamut Display P3 are not handled. Everything is standard sRGB, the color space browsers use by default.

Common mistakes

• Mixing up HSL and HSB/HSV. Photoshop and Figma pickers often show HSB, where 100% brightness is a pure color. In HSL, 100% lightness is always white. The numbers are not interchangeable.
• Using print colors from a screen value. These formats are for screens. Converting to CMYK for print needs a profile-aware tool, and the result will look different.
• Copying a value with the wrong format into a field. Some systems want a HEX code without #, others require it. Check before pasting.

Is it private and safe?

Yes. Toolyard converts colors inside your browser on your own device. Nothing you type or pick is ever uploaded anywhere, so it stays completely private.

Related guides

Keep reading: RGB vs HEX vs HSL, how to convert HEX to HSL, how to get the HEX code from an image, or try the image color picker.