Color Converter

Convert between HEX, RGB, HSL, and CSS custom properties

Runs in your browserUtility08 — Image & Color

What is Color Converter?

A colour converter that translates between HEX, RGB, and HSL in real time and gives you CSS-ready declarations plus the relative luminance of the colour. Pick a colour with the swatch control or type any format by hand; all conversion runs in the browser.

How to use Color Converter

1Pick a colour with the eyedropper control, or type a HEX, RGB, or HSL value directly.
2The remaining formats update instantly to match.
3Copy whichever notation you need into your stylesheet.
4To check whether text stays readable on the colour, pair this with the contrast checker.

How do I do this in code?

Use the tool above for one-off work; for anything you repeat, move it into a script or your project.

CSS

JavaScript

:root {
  --brand: #1d6f5c;
  --brand-rgb: 29 111 92;      /* pairs with rgb(var(--brand-rgb) / 0.12) */
  --brand-hsl: 165 59% 27%;
}

Frequently asked questions

Why use HSL instead of HEX?+

HSL splits a colour into hue, saturation, and lightness, three dimensions you can adjust independently. Building lighter and darker variants of the same hue is just a change to the lightness value, which is far more intuitive than doing hex arithmetic by hand. Design token systems commonly generate whole colour ramps from HSL for this reason.

Is a 3-digit HEX shorthand the same as the 6-digit form?+

Yes, it expands by repeating each channel character, so #1a2 is exactly #11aa22. The shorthand can only express 4096 colours though, so it cannot represent an arbitrary RGB value, which is why exact colours exported from design tools are almost always six digits.

Related tools

All tools

Image Compressor

Compress images in your browser — no uploads

Image Format Converter

Convert between PNG, JPEG, WebP, and AVIF

Image Resizer

Resize images to exact dimensions, with optional aspect lock

Image to Base64

Turn images into data URIs with ready-to-use snippets

Favicon Generator

Generate multi-size icons and a favicon.ico

SVG Optimizer

Strip SVG cruft without touching path data