Color Converter

Design Client-side color hex rgb hsl converter design

This tool runs entirely client-side, in your browser: your data is never sent anywhere.

What it does

Enter a color in HEX (#3366ff), RGB (rgb(51, 102, 255)), or HSL (hsl(226, 100%, 60%)) format, and instantly get all three representations plus a live color swatch preview.

Try it

How it works

The input is parsed depending on its format:

HEX (#rgb, #rrggbb) is parsed directly into red/green/blue byte values.
RGB (rgb(r, g, b)) values are read directly.
HSL (hsl(h, s%, l%)) is converted to RGB using the standard HSL→RGB formula.

Once the color is known as RGB, it's converted to HEX and HSL for display, so all three formats are always shown together.
The swatch preview uses the parsed color directly as a CSS background-color.

Everything runs locally in your browser — great for quickly checking what a color looks like or converting between formats used by different tools/frameworks.