Color Converter
Convert colors between HEX, RGB and HSL — with a picker and a big live preview swatch.
| HEX | |
| RGB | |
| HSL |
What is this tool?
Designers and developers constantly translate colors between formats: a brand guide lists a HEX code, CSS work may need RGB for transparency, and HSL is far easier to adjust by eye when you need a lighter or darker shade. This color converter accepts any HEX value (or a click on the visual picker) and instantly shows the RGB and HSL equivalents with a large preview swatch.
HSL is especially handy for building a palette: keep the hue the same and step the lightness up or down to create matching shades for hover states, borders and backgrounds. All values follow the standards used by CSS and design tools like Figma and Photoshop, so you can copy them straight into a stylesheet or style guide.
How to use it
- Type a HEX code (such as #2F7BFF) or click the color box to pick visually.
- Read the RGB and HSL values below the swatch.
- Copy the format your design tool or stylesheet needs.
Formula & method
Worked example
The blue #2F7BFF converts to rgb(47, 123, 255) and hsl(218, 100%, 59%). Raising the lightness to 75 percent while keeping hue 218 and saturation 100 percent gives a matching light blue for backgrounds.
Frequently asked questions
What do HEX, RGB and HSL mean?
HEX is a compact six-digit code used in web design. RGB mixes red, green and blue light from 0 to 255. HSL describes color by hue (the angle on the color wheel), saturation (intensity) and lightness — the most intuitive of the three for humans.
How do I add transparency to a color?
In CSS, use the RGB format with an alpha value, such as rgba(47, 123, 255, 0.5) for 50 percent opacity, or an eight-digit HEX code where the last two digits set the alpha.
Why does the same color look different on my phone and monitor?
Screens differ in brightness, calibration and color gamut. The numeric values are exact — the displays are not. Professional designers calibrate monitors when color accuracy matters for print.