Convert HEX, RGB and HSL colors
Converts colors between HEX (#3B82F6), RGB (rgb(59, 130, 246)), and HSL (hsl(217, 91%, 60%)) with a live swatch preview. Enter any one format and instantly get the other two, ready to paste into CSS, design tools, or code.
Color values for design and CSS
Convert a HEX value from a design specification to RGB for CSS, or convert an RGB value from a color picker to HEX for a style guide. To adjust a palette's lightness, use the L value in HSL. This tool returns HEX, RGB and HSL without transparency: RGBA and HSLA inputs are accepted when valid, but their alpha channel is not preserved.
Color notation and conversion limits
In HEX, #F80 is shorthand for #FF8800 (each digit doubles). In HSL, H is the hue angle (0 red, 120 green, 240 blue), S is saturation and L is lightness. RGB channels and HSL output values are rounded to integers, so converting a rounded result back can change the original value. The tool does not support every CSS color space.
Try a HEX to RGB and HSL example
Paste #FF0000 into Color value and run the tool. The output is HEX: #FF0000, RGB: rgb(255, 0, 0), and HSL: hsl(0, 100%, 50%). You can also paste rgb(255, 0, 0) or hsl(0, 100%, 50%) to get the same red swatch and output values.