HEX to RGB Converter
Two-way color converter for HEX, RGB and HSL. Edit any format and the others update live, with 3- and 6-digit hex support, a color picker, copyable CSS, and WCAG contrast checks.
How to use this tool
Enter a Color
Type a HEX code (3 or 6 digits) or use the color picker to choose any color.
Edit Any Format
Drag the RGB or HSL sliders — all three formats stay perfectly in sync as you adjust them.
Copy & Check
Copy the HEX, RGB, HSL or CSS variable you need, and review the WCAG contrast ratios for accessible text.
Adjust the HSL Lightness slider to build lighter tints or darker shades of the same hue without changing the base color.
--color: #4f46e5; color: rgb(79, 70, 229); background: hsl(243, 75%, 59%);
What This Converter Does
A single color can be written three completely different ways, and design tools, browsers and code each prefer their own. This HEX to RGB converter keeps all three in sync: edit the hex field, drag the RGB channels, or tune Hue, Saturation and Lightness, and the other two formats update the instant you change anything. It supports both 6-digit hex (#4f46e5) and 3-digit shorthand (#abc), includes a native color picker, copies any format with one click, and flags invalid input gracefully instead of breaking.
The Math Behind HEX, RGB and HSL
Hex and RGB are two notations for the same thing. A hex code is just three bytes written in base 16, one per color channel:
HEX → RGB: split the six digits into pairs, read each pair as hexadecimal. RGB → HEX: write each 0-255 channel as a two-digit hex value.
HSL is a different model entirely. It rebuilds the color from a hue angle on the color wheel plus saturation and lightness percentages, which is why it is so handy for making a shade lighter or more muted without shifting its base color.
A Worked Example: Decoding #4F46E5
Take the indigo #4F46E5. Split it into 4F, 46, E5:
4F= (4 × 16) + 15 = 7946= (4 × 16) + 6 = 70E5= (14 × 16) + 5 = 229
So the RGB is rgb(79, 70, 229). To reach HSL, normalize those to 0-1, find the max (0.898 for blue) and min (0.275 for green). The hue lands at about 244°, saturation works out to roughly 76%, and lightness — the average of the max and min — is about 59%, giving hsl(244, 76%, 59%). Type #4F46E5 into the tool and you will see exactly these values appear across all three fields at once.
3-Digit Shorthand, Explained
The shorthand #f0c is not a different color from #ff00cc — it is the same one. Each digit is simply doubled: f → ff, 0 → 00, c → cc. That is why shorthand can only express colors whose channel pairs are identical. The converter expands shorthand automatically, so you can paste either form.
Checking Contrast for Accessibility
Color is not just aesthetics; readable text depends on contrast ratio. The tool computes the relative luminance of your color and compares it against white and black, reporting a ratio from 1:1 to 21:1. WCAG asks for 4.5:1 for body text and 3:1 for large headings. For our indigo, the contrast against white is about 6.3:1 — comfortably passing AA for normal text — while against black it is only around 3.3:1. That tells you white text on this indigo is the readable choice.
Tips for Everyday Use
- Adjust lightness, not hex, to build tints and shades. Nudge the L slider up for a lighter tint or down for a deeper shade while the hue stays locked.
- Use HSL for palettes. Keep the same hue and step saturation or lightness to generate a coherent set of swatches.
- Copy the format your context wants. Hex for most CSS and design tools,
rgb()when you need an alpha channel later,hsl()when you plan to tweak by hand.
Pair this with the data visualizer when you are color-coding a chart, or the JSON formatter when wiring color tokens into a design-system config. Convert once, copy anywhere.