Skip to content
tecuy
Design & Utility

Color Converter

Convert colors between HEX, RGB, and HSL with a live preview.

HEX
RGB
HSL

How HEX, RGB and HSL relate

  • HEX writes red, green and blue as two hexadecimal digits each (00–FF). #1A73E8 means red 1A, green 73, blue E8.
  • RGB gives the same three channels as numbers from 0 to 255: #1A73E8 is rgb(26, 115, 232).
  • HSL describes the colour as hue (0–360° around the colour wheel), saturation and lightness (0–100%). #1A73E8 is hsl(214°, 82%, 51%).

HSL values are rounded to whole numbers, so converting HSL back to HEX can land one step away from the original code. HSL is not the same as HSV/HSB, which some design apps use: the hue matches, but saturation and the third value are calculated differently.

How to use the Color Converter

  1. Paste a full 3- or 6-digit code into the HEX field, with or without the leading #.
  2. Or type values into the three RGB boxes (0 to 255 each) or the three HSL boxes (hue 0 to 360, saturation and lightness 0 to 100).
  3. Check the preview swatch at the top, which updates as soon as any field changes.
  4. Use the Copy button next to HEX, RGB, or HSL to copy that format as ready-to-use CSS text.

Example: Converting a short hex code

Enter #f60 in the HEX field. The tool expands it to #ff6600, the RGB boxes show 255, 102, 0, and the HSL boxes show 24, 100, 50. Copying gives rgb(255, 102, 0) and hsl(24, 100%, 50%).

Questions about the Color Converter

Why does my hex code change slightly after I edit the HSL values?
HSL values are rounded to whole numbers, so converting back to RGB can land one step away from the original. For example, the default #2563eb reads as hsl(221, 83%, 53%), and setting those exact HSL values produces #2463eb.
Does it accept 8-digit hex codes or alpha transparency?
No. Only 3- and 6-digit hex codes are accepted, and there is no alpha channel in any of the three formats. An 8-digit code such as #ff6600aa is ignored and the previous color stays.
Why doesn't the HEX field change while I type a new code letter by letter?
The field only accepts a complete, valid hex code, so partial input is discarded. Paste the whole code, or edit one digit of the existing code at a time.
What happens if I type a number outside the allowed range?
Values are clamped: RGB channels to 0 to 255, hue to 0 to 360, and saturation and lightness to 0 to 100. Non-numeric input is treated as 0.
How do I convert HEX to RGB?
Split the six-digit code into three pairs and convert each from hexadecimal to a number from 0 to 255. #1A73E8 becomes 1A = 26, 73 = 115 and E8 = 232, so rgb(26, 115, 232).
Is HSL the same as HSB or HSV?
No. The hue is the same, but saturation and lightness (HSL) are calculated differently from saturation and brightness (HSB/HSV), so the numbers don't transfer directly. This tool converts HSL.