#2B35A0

Without JavaScript the boxes below are disabled, and nothing is converted.

Type in any box and the others follow. HEX takes three or six digits; RGB takes 0–255; HSL takes a hue in degrees and two percentages.

Color Converter

Three ways of writing the same color, kept in step. Type in whichever one you have, and read off the others.

Arithmetic onlyNothing is stored

What the three notations are

HEX is the one you see in stylesheets: two hexadecimal digits each for red, green and blue. RGB is the same three numbers in plain decimal, 0 to 255. Both describe how much of each primary the screen mixes, which is how a display actually works — so converting between them is just a change of base, and nothing is lost.

HSL is the same color described the way people talk: which hue it is, how saturated, and how light. It is the notation to reach for when you want a slightly darker version of a color, or the one on the opposite side of the wheel, because those are single numbers to change rather than three to juggle.

Where the rounding shows

HSL is shown as whole degrees and whole percentages, because that is what people type. That rounding means a color converted to HSL and back can land one step away from where it started — a difference of one value in a channel, invisible on screen but real in the numbers. If an exact value matters, keep the HEX.

The swatch label uses whichever of the site's near-black or white gives at least 4.5:1 against the color behind it, which is the same rule the rest of the site follows. It is a quick way to see whether text will sit legibly on a color — and the Contrast Checker gives the actual ratio.

What it does not do

It converts between three notations for the same sRGB color. It does not convert between color spaces — no CMYK for print, no Lab, no Display P3 — because those need a profile and, for print, a physical target this page cannot know about. It also has no opinion on whether a color is right for anything.

For the closest standard name to a value, use the Color Name Finder; to see a color at full-screen size, the Color Picker.

Note

Everything is calculated in your browser. Nothing you type is sent anywhere or kept, and the page starts fresh every time you open it.