Numarly

Color Converter

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

RGB

HSL

HEX

#3b82f6

RGB

rgb(59, 130, 246)

HSL

hsl(217, 91%, 60%)

What is it?

This tool converts a color between its three most common web formats — HEX, RGB, and HSL — and shows a live preview, keeping all three representations in sync as you edit any of them.

Formula Explanation

HEX and RGB both describe a color as red, green, and blue intensities from 0-255 — HEX just writes each value in base-16. HSL instead describes hue (position on a 360° color wheel), saturation (color intensity), and lightness (how close to black or white), which is converted to and from RGB using standard color space formulas.

Example Calculation

The color #3B82F6 is the same as rgb(59, 130, 246) and hsl(217, 91%, 60%) — a medium blue.

How to Use

  1. Edit the HEX field, RGB sliders, HSL fields, or the color picker swatch.
  2. All formats update automatically to stay in sync.
  3. Click Copy next to HEX, RGB, or HSL to copy that value to your clipboard.

Benefits

  • Keeps HEX, RGB, and HSL in sync automatically, so you never have to convert by hand.
  • Shows a live color preview so you can see the result before copying it into your design.
  • Supports both 6-digit and 3-digit shorthand HEX codes.

Use Cases

  • Converting a design tool's HEX color into RGB or HSL for CSS.
  • Fine-tuning a color's lightness or saturation using HSL sliders rather than guessing RGB values.
  • Matching a brand color across different software that expects different formats.

What Your Result Means

In HSL, adjusting lightness moves a color toward black (0%) or white (100%) while keeping its hue, which is often more intuitive than adjusting RGB values individually to lighten or darken a color.

Tips

  • Use HSL when you want to create lighter or darker variants of the same color for hover states or shades.
  • 3-digit HEX shorthand (like #3BF) expands to a 6-digit code by doubling each digit.
  • RGB and HEX represent identical color precision — neither is more accurate than the other.

Common Mistakes

  • Assuming HSL lightness of 50% always means a 'medium' looking color — very saturated hues can still look bright at 50% lightness.
  • Manually converting HEX to RGB by hand and rounding incorrectly.
  • Typing an invalid HEX code (wrong length or non-hex characters) and expecting it to still parse.

FAQs

Does this tool store or send my colors anywhere?

No, all color conversion happens locally in your browser and nothing is sent to a server.

Is HSL more accurate than RGB or HEX?

No, all three represent the same color space — HSL is just a different, often more intuitive way to describe the same color for adjusting lightness or saturation.

Can I enter a 3-character HEX code?

Yes, shorthand codes like #3BF are automatically expanded to their full 6-digit equivalent.

Why do my RGB and HSL values sometimes round slightly differently after conversion?

HSL to RGB conversion involves rounding fractional values to whole numbers, so converting back and forth repeatedly can shift a color by a tiny, usually imperceptible amount.

Colors are converted locally in your browser and are never sent to or stored on a server.

Last updated: July 27, 2026