HEX, RGB, and HSL are three different ways of encoding the exact same colour, and this tool keeps them all in sync: HEX uses two hexadecimal digits per channel, RGB uses 0–255 per channel, and HSL describes hue (0–360°), saturation, and lightness (both 0–100%).
Edit any one of the three formats and the other two recalculate immediately from that value, using the standard conversion formulas between RGB and HSL colour space — there's no separate 'convert' button because every field is always live.
The colour swatch simply paints the current RGB values on screen, so what you see is a direct visual check that all three formats genuinely represent the same colour, not an approximation.
It depends on where you're using it. HEX is the standard for CSS and web design. RGB is common in image editing software. HSL is often easier for humans to reason about, since adjusting lightness or saturation is more intuitive than adjusting three separate RGB channels.
Using the standard max/min channel conversion formula: hue comes from which channel is highest and the gap between the highest and lowest channel values, saturation and lightness come from that same max/min range relative to the total brightness.
Yes — enter a HEX value and the RGB and HSL fields update immediately to match.
They're not actually different — RGB and HSL are just two different numbering systems describing the identical colour, which is exactly why the swatch (painted from the RGB values) looks consistent regardless of which format you're reading.
