# HEX / RGB / HSL Converter

> Free color converter: convert between HEX, RGB and HSL formats with validation. Type any one format and get the other two instantly.

Type a color in any format, HEX, RGB or HSL, and get the other two instantly. Every input is validated, so typos get a clear error instead of a wrong color.

*Interactive tool: enter your values at https://toollantern.win/hex-rgb-hsl-converter/ and results update instantly in your browser.*

## What this tool does

The converter accepts a color in any of the three common formats and shows all three. Change the HEX field and the RGB and HSL fields update; change the RGB channels and the rest follow. A live preview swatch shows the resulting color.

## The conversion formulas

**HEX to RGB:** each pair of hex digits is one channel, so #3B82F6 means red 0x3B = 59, green 0x82 = 130, blue 0xF6 = 246.

**RGB to HSL:** with R, G, B scaled to 0-1, lightness L = (max + min) / 2. Saturation measures how far the channels spread from gray: S = d / (1 - |2L - 1|) where d = max - min. Hue is the angle around the color wheel: 0 deg is red, 120 deg is green, 240 deg is blue, computed from which channel is largest.

**HSL to RGB:** the reverse path. A helper maps the hue angle back onto the three channels using the chroma (colorfulness) derived from saturation and lightness.

## Worked example

**#E74C3C** converts to **rgb(231, 76, 60)** and **hsl(6, 78%, 57%)**: a red-orange with high saturation and medium lightness.

## Validation

HEX must be 3 or 6 hex digits; RGB channels must be whole numbers from 0 to 255; hue must be 0-360 and saturation/lightness 0-100. Anything else shows an error message and leaves the last good color in place.

## Limitations

Conversions round to whole numbers, so converting back and forth can shift a channel by 1. That difference is invisible to the eye.

## Frequently asked questions
### How do I convert HEX to RGB?

Type the hex code into the HEX field. The RGB channels appear instantly: each pair of hex digits becomes one channel from 0 to 255.

### How do I convert RGB to HSL?

Type the three RGB channel values. The tool computes hue, saturation and lightness with the standard formulas and shows them right away.

### What does an invalid color error mean?

The input did not match the format: for example a hex code with wrong characters, an RGB channel above 255, or a hue above 360. Fix the value and the conversion resumes.

### Why did my color shift by 1 after converting twice?

Each format stores whole numbers, so fractional values round. A channel can move by 1 when you convert back and forth. The visual difference is imperceptible.

### Does it support 3-digit hex codes?

Yes. A code like #F00 is expanded to #FF0000 automatically, the same way browsers do.

---
Interactive version: https://toollantern.win/hex-rgb-hsl-converter/