HEX, RGB and HSL with live preview.
Color formats can be confusing when working across design tools, CSS, and image editors. HEX codes are compact and widely used in web design. RGB values are intuitive for those thinking about light mixing. HSL (Hue, Saturation, Lightness) is often the most human-readable format, making it easier to adjust colors systematically.
This color converter translates instantly between all three formats with a live preview swatch. Use the native color picker for visual selection or type values directly into any field.
HEX: a 6-character string like #ff6b35, representing red, green and blue as hexadecimal pairs. RGB: three values from 0–255, e.g. rgb(255, 107, 53). HSL: hue (0–360°), saturation (0–100%) and lightness (0–100%), e.g. hsl(18, 100%, 60%). All three describe the same color — they are just different representations of the same information.