🎨 Color Converter

Convert colors between HEX, RGB and HSL.

HEX

Pick a color

RGB:

HSL:

📋 How to Use

1. Enter a color in HEX, RGB or HSL format — or pick one from the color swatch.
2. The other two formats update automatically.
3. Copy whichever format your CSS or design tool needs.

✅ Features

Live conversion between HEX, RGB and HSL as you type or pick a swatch.
Color preview swatch so you can confirm it visually before using it.
Handy for matching brand colors across code, design software and style guides.

Convert colours between HEX, RGB and HSL

Designers and developers often get a colour in one format but need it in another — a HEX code from a brand guide, an RGB value from a design app, or HSL for CSS. This colour converter changes between formats instantly and shows a live preview so you can confirm it is the right shade.

The formats explained

HEX (e.g. #1E88E5) – the most common format on the web.
RGB (e.g. rgb(30, 136, 229)) – red, green and blue values from 0 to 255.
HSL (e.g. hsl(208, 79%, 51%)) – hue, saturation and lightness, the easiest format for making a colour lighter or darker.

Tips for using colours

Keep a small, consistent palette across your site. Use HSL to create lighter and darker versions of your main brand colour for hover states and backgrounds. Always check that text has enough contrast against its background so it stays readable for everyone, including people with low vision.

Frequently Asked Questions

Why do I need three different color formats (HEX, RGB, HSL)?

Different tools and codebases expect different formats — CSS commonly uses HEX or RGB, while HSL is often easier for humans to reason about (adjusting just the lightness or saturation of a color, for example).

Will the converted color look exactly the same on every screen?

The numeric values will match exactly, but actual on-screen appearance can vary slightly between monitors due to differences in color calibration — that's a display characteristic, not a conversion error.