Hex / RGB Color Converter

Designers think in hex codes, developers meet RGB in stylesheets, and HSL is the format humans find easiest to adjust. Moving between them by hand means mental hexadecimal arithmetic nobody enjoys. Our free colour converter translates instantly between HEX, RGB and HSL: type any format, use the visual colour picker, and copy whichever format your tool demands. A live swatch with sample text also helps you judge whether a colour works for backgrounds and typography before you commit to it.

Quick Answer: Enter a HEX code, RGB values or HSL values, or pick a colour visually, and all three formats update instantly, ready to copy into CSS, design tools or documents.

Free Online Tool

Hex / RGB Color Converter

Convert between HEX, RGB and HSL, and preview the colour live.


Sample heading text


How to Use the Hex / RGB Color Converter

  1. Type a colour in any field: a hex code like #2DD4BF, RGB like 45, 212, 191, or use the colour picker.
  2. All formats convert immediately and the large swatch updates to show the exact colour.
  3. Check the sample text on the swatch to judge readability for headings or body copy.
  4. Use the copy buttons to take the HEX, RGB or HSL value into your stylesheet or design tool.
  5. Adjust lightness in the HSL field to create lighter or darker shades of the same hue for hover states.

Key Features

  • Three-way conversion between HEX, RGB and HSL with zero delay.
  • Visual colour picker synchronised with the numeric fields in both directions.
  • One-click copy for each format, formatted for direct CSS use.
  • Readability preview showing sample text on your chosen colour.
  • Accepts three-digit shorthand hex (#fff) as well as full six-digit codes.

Best Practices and Tips

  • Use HSL when building a palette: keep hue and saturation fixed and vary lightness to produce consistent shades and tints.
  • Record brand colours in all three formats in your style guide; different tools ask for different formats.
  • Check text colours for accessibility: aim for a contrast ratio of at least 4.5 to 1 for body text against its background.
  • When copying from a design tool, confirm whether it gave you RGB for screens; never use CMYK values meant for print directly on the web.

Common Mistakes to Avoid

  • Assuming a colour that looks right on your bright monitor will look the same everywhere; always sanity-check key brand colours on a phone.
  • Forgetting the leading '#' in CSS hex values, which silently invalidates the whole declaration.
  • Converting print CMYK brand values by eye instead of using the official digital brand colour, leading to a visibly different website identity.

Frequently Asked Questions

What is the difference between HEX and RGB?

They describe the same colours: amounts of red, green and blue light. RGB writes them as decimal numbers from 0 to 255, while HEX writes the same three numbers in base 16, packed into one compact code like #2DD4BF after a hash sign.

What is HSL and when is it better?

HSL describes colour by hue (the colour itself, 0 to 360 degrees), saturation (intensity) and lightness. It is better whenever you want to create variations, because lightening a colour means changing one number instead of recalculating three.

How do I darken a colour for a hover effect?

Convert it to HSL here and reduce the lightness by about 8 to 12 points. The result is a shade that clearly belongs to the same colour family, which looks more professional than picking a random darker colour.

Why does the same hex look different on two screens?

Screens vary in brightness, colour gamut and calibration, and some apply night-mode warmth. The hex defines the requested colour precisely; the displayed result depends on the device, which is why critical brand work uses calibrated monitors.

What does a three-digit hex like #fff mean?

It is shorthand: each digit is doubled, so #fff becomes #ffffff (white) and #0a5 becomes #00aa55. This converter expands shorthand automatically when you type it.

Related Tools