Convert between HEX, RGB, and HSL color formats instantly with a live preview. Everything runs in your browser.
Working with colors across different formats is a common need for developers and designers. CSS supports HEX, RGB, and HSL notations, and you often need to convert between them when working with design tools, style sheets, or brand guidelines. This converter gives you instant cross-format conversion with a live color preview.
Enter a color in any of the three input fields and the other two update automatically. HEX accepts 3-digit or 6-digit codes with or without the # prefix. RGB accepts values like "rgb(108, 99, 255)" or just "108, 99, 255". HSL accepts values like "hsl(243, 100%, 69%)" or "243, 100, 69".
A HEX color code is a 6-digit hexadecimal number preceded by #. It represents red, green, and blue values from 00 to FF. For example, #FF0000 is pure red.
RGB defines colors by red, green, and blue channel intensity (0-255). HSL defines colors by hue (0-360 degrees on the color wheel), saturation (0-100%), and lightness (0-100%). HSL is often more intuitive for making color adjustments.
HEX is compact and widely used in CSS and design tools. RGB is the standard for screen displays. HSL is best when you want to adjust brightness or saturation while keeping the same hue — for example, creating lighter or darker variants of a brand color.