Color Converter

How it works

Type a colour in any common form — a HEX code like #2A6F97, an rgb() or hsl() value, or even a CSS colour name like teal — or use the colour picker, and the tool instantly shows the equivalent HEX, RGB and HSL values along with a live swatch. It works by asking your browser's own rendering engine to interpret the colour, so anything your browser understands is accepted, and the conversions are always accurate. Everything runs locally; nothing is sent anywhere.

HEX, RGB and HSL explained

HEX is the six-digit code used throughout web design (#RRGGBB), compact and easy to paste into CSS or design tools. RGB expresses the same colour as red, green and blue values from 0 to 255, which is handy when a tool asks for channels separately. HSL describes a colour by hue (its position on the colour wheel), saturation and lightness, which makes it intuitive to tweak — nudge the lightness to get a tint or shade of the same hue. Being able to move between all three lets you match a colour across design software, code and content tools.

How to convert a colour

Converting a value takes a few seconds. Click into the text field and type or paste the colour you have — a code like #2A6F97 or rgb(42, 111, 151), or simply the word teal. The three outputs and the swatch update as you type, so there is no button to press. If you prefer to choose visually, open the colour picker on the left and drag across the palette; the text field fills itself with the matching HEX code. Then press the copy button next to the format you need to drop the exact value onto your clipboard.

A concrete example

Say your brand colour is coded #2A6F97 and a document template asks for the same colour as RGB or HSL. Paste the HEX code into the tool and you immediately get rgb(42, 111, 151) and hsl(202, 56%, 38%), plus a preview swatch that confirms you are working with the right shade. Copy the RGB line for the template and the HSL line for a CSS accent, and the two will always match because they describe the exact same colour. The same flow works in reverse: a shade you pick in a design tool can be pasted back into the converter to get a clean HEX code for your stylesheet.

What to expect

The widget always shows three values at once: the colour as a six-digit uppercase HEX code, an rgb(r, g, b) line with channels from 0 to 255, and an hsl(h, s%, l%) line with the hue in degrees. A large swatch sits above the results and repaints instantly with every change, and each row has its own copy button. Input is parsed by the browser's own CSS engine, which is why HEX codes of 3 or 6 digits, rgb(), hsl() and standard colour names all convert without surprises. Values are also normalised: a short code like #abc comes back as #AABBCC, and the conversion uses the solid RGB channels, so alpha transparency is not preserved in the output.

Common problems and fixes

I typed a colour and got "✗ Not a valid colour". The input has to be a colour your browser actually understands — check for a typo, a missing hash sign or stray spaces, or just pick the shade with the colour picker instead. The copy button did nothing. The clipboard API needs a secure context (HTTPS or localhost); if that is not available, you can select and copy the code manually. My colour has transparency. Alpha is not shown in the outputs, so an rgba() value is converted using its RGB channels only and the transparency is dropped. The colour looks different from my design tool. The swatch shows the browser's exact interpretation of the value you entered, but monitor calibration and colour profiles can still make the same code render slightly differently elsewhere.

Frequently asked questions