Toolbox

Color Converter

Convert between HEX, RGB and HSL, and see the shades, tints and complementary color as you go.

How to convert a color code

  1. Type or paste a color in any of the three formats — #2563eb, rgb(37, 99, 235) or hsl(221, 83%, 53%). Three-digit shorthand such as #29e works too.
  2. Or use the picker, which updates the values as you drag.
  3. Read the HEX, RGB and HSL equivalents, the complementary color, and the ramp of shades and tints.

Everything is recalculated live, so you can nudge a code and watch the whole set follow.

HEX, RGB and HSL — what each one is good for

All three describe the same thing, and all three are valid in CSS. They differ in what they make easy. HEX is a six-digit shorthand for the red, green and blue channels, written in base 16 — #2563eb is red 37, green 99, blue 235. It is compact, universally supported and easy to pass around between design tools, which is why it is the default in most palettes. Its weakness is that it is opaque to read: nothing about #2563eb tells you that it is a vivid blue.

RGB states the same three channel values as plain decimal numbers and adds an optional alpha channel, so rgba(37, 99, 235, 0.5) describes the same blue at half opacity. It is the format to use when a single channel needs adjusting, or when you are working with transparency in a way that has to be calculated rather than eyeballed.

HSL describes the color the way a person would: hue around the color wheel from 0 to 360, saturation from grey to vivid, and lightness from black through the pure color to white. That makes it the only one of the three that is pleasant to adjust by hand. To build a ladder of blues for a design system you keep the hue and saturation fixed and step the lightness — which is exactly the ramp of shades and tints shown above, and the same technique the complementary color comes from, by rotating the hue half a turn around the wheel.

Color converter FAQ

Which format should I use in CSS?

All three work. HEX is the most compact and the easiest to move between tools. RGB is convenient when you need to adjust one channel or add an alpha value. HSL is the one to use when you want a lighter or darker version of the same color, because lightness can be changed on its own.

What is the difference between HSL and HSV?

Both use hue and saturation, but they measure brightness differently. HSL lightness runs from black through the pure color to white, with 50 percent being full strength. HSV value runs from black to the pure color and never reaches white, so tinting needs a separate control.

What makes a shade different from a tint?

A tint moves the color toward white and a shade moves it toward black. This tool produces both on one ramp by stepping lightness while keeping hue and saturation fixed, so the family stays recognisable at every step.

Is anything sent to a server?

No. The conversion is arithmetic done in your browser, so the colors you are working on stay private.

Related tools