About the HEX / RGB / HSL Converter
Every color on a screen can be described in several equivalent formats — HEX for CSS shorthand, RGB for raw red/green/blue channel values, and HSL for hue, saturation, and lightness, which maps much more closely to how humans actually think about color. Designers and developers constantly need to hop between these formats, and doing the math by hand is slow and error-prone. This converter updates all three formats simultaneously the instant you change any one of them.
How it works
Type or paste a value into any of the three input fields — HEX, RGB, or HSL — and the other two update immediately using standard color-space conversion formulas. Behind the scenes, RGB values are treated as the common intermediate format: HEX is parsed into RGB channels, and HSL is calculated from those same RGB channels using the standard hue/saturation/lightness formulas, so all three representations always describe exactly the same color, just written differently.
Common use cases
- Converting a designer-supplied HEX code into RGB for a canvas or SVG project
- Turning an RGB value from a design tool into HSL to tweak lightness without shifting hue
- Quickly checking what a CSS hsl() color actually looks like as a HEX swatch
- Cleaning up inconsistent color formats across an old stylesheet
- Learning how the three color models relate to each other by watching values update live
Tips for best results
HSL is the easiest format to hand-tune: keep hue and saturation fixed and only move lightness to get a lighter or darker version of the same color, which is much harder to do reliably by eye in HEX or RGB. If a pasted HEX code doesn't update the other fields, check that it includes the # symbol and is either 3 or 6 characters long — shorthand 3-character HEX codes are supported and expanded automatically.
Frequently asked questions
HEX and RGB both describe a color as red, green, and blue channel intensities — HEX just writes them as a base-16 string like #4F46E5 instead of three separate numbers. HSL instead describes color as hue (position on a color wheel), saturation (intensity), and lightness (how close to black or white), which many people find more intuitive to adjust.
Yes — you can enter an 8-digit HEX code (with a trailing alpha channel), an rgba() value, or an hsla() value, and the alpha percentage will be preserved and converted across formats.
Shorthand 3-character HEX codes like #4F6 are a valid CSS shorthand where each character is duplicated, so #4F6 expands to #44FF66. The converter automatically expands shorthand codes before converting.
This converter focuses on HEX, RGB, and HSL numeric formats. If you want to identify or look up the nearest named color for a value, use the dedicated Color Name Identifier tool instead.
All three are valid CSS and render identically in browsers. HEX is the most compact for static colors, while HSL is often preferable in a design system because you can programmatically lighten or darken a color by changing just the lightness value.