Color Converter

This tool takes a six-digit hexadecimal color (HEX, such as #2F5D50), converts it to the two other common notations, RGB and HSL, and offers five suggested related colors. You can type the HEX value or choose a color with the system picker beside the field. Its boundaries are worth stating up front: HEX is the only accepted input, so you cannot enter RGB or HSL numbers and get HEX back; transparency (eight-digit HEX or rgba) is not supported; and three-digit shorthand such as #fff is rejected. It is a small converter, not a full palette builder or contrast checker.

How to use it

1. Type a color into 'HEX Color Value'. The starting value is #2F5D50. The leading # is optional, but you must give exactly six hexadecimal characters (0-9 and a-f, any case).
2. Alternatively, click the color swatch at the left of the field to open your browser's own color picker. The HEX field updates when you choose a color.
3. Once the input is valid, three rows appear: HEX, RGB (written rgb(r, g, b)) and HSL (written hsl(h, s%, l%)). Each row has a copy button on the right that copies just that value.
4. Under 'Color Suggestions (click to switch)' there are five swatches: Complementary, Analogous 1, Analogous 2, Lighter and Darker. Hover to see the HEX value as a tooltip, and click a swatch to make it the current color; the conversion rows recalculate.
5. If the input is invalid (wrong length or illegal characters), the result area turns into a red message: 'Please enter a valid HEX color, e.g. #2F5D50'.

A worked example

Using the default #2F5D50, a deep teal-green, the tool actually computes rgb(47, 93, 80) and hsl(163, 33%, 27%). The five suggestions come out as: Complementary #5C2E3B (hue plus 180 degrees), Analogous 1 #2E525C (hue plus 30), Analogous 2 #2E5C38 (hue minus 30), Lighter #509F89 (lightness plus 20 points) and Darker #11221D (lightness minus 20 points, with a floor of 10%). The complementary and analogous colors keep the original saturation and lightness and only rotate the hue, while Lighter and Darker keep hue and saturation and change only the lightness. All of these values were produced by running the same conversion formulas the tool uses.

Supported features and known limits

• Only six-digit HEX is accepted. A three-digit shorthand like #fff is treated as invalid and shows the error message, so write it out as #ffffff.
• Eight-digit HEX with alpha is not supported, nor are color names (red), rgb() or hsl() as input.
• The input is not trimmed, so a leading or trailing space from pasting makes the value invalid.
• The HEX result row shows your input in uppercase. If you left out the #, the row will not add one, so check before copying. Also, the picker swatch falls back to black when the value has no #; that affects only the swatch, not the conversion below it.
• The three HSL numbers are rounded to whole numbers, so converting HSL back to HEX loses a little precision. That is how the suggestions are produced, so their HEX values may differ by a step or two from a color you tune by hand.
• The suggestions are simple hue or lightness shifts, not a professional palette. Complementary means 180 degrees apart on the HSL hue wheel, not the RGB inverse. Lighter and Darker are clamped to lightness 10% through 90%, so for already very dark or very light colors the change is smaller than 20 points.
• Grays (equal R, G and B) have no hue, so the tool records hue and saturation as 0 and their analogous and complementary suggestions are still grays.
• There is no readability or accessibility contrast check, and no CMYK, HSV or Lab output.

When should I use HEX, RGB or HSL?

HEX is the usual notation in web pages and design files: compact and easy to copy. RGB uses three numbers from 0 to 255 for red, green and blue, matching how screens emit light, and is the input for many imaging libraries. HSL describes hue, saturation and lightness, which is closer to how people think about color: to make something lighter you raise l, whereas that is awkward to do directly in HEX. All three can be used directly in CSS.

Why does my three-digit HEX say invalid?

The parser requires exactly six characters, two per channel. Three-digit shorthand simply doubles each digit, so #3a9 is the same as #33aa99. Expand it by hand and enter that.

What are the ranges for hue, saturation and lightness?

Hue h is an angle from 0 to 360, where 0 is red, about 120 is green and about 240 is blue. Saturation s and lightness l each run from 0% to 100%. Lightness 0% is black and 100% is white; saturation 0% is gray. In the example, 163 degrees lies between green and cyan, which is why the color reads as teal-green.

Can I paste the copied values straight into CSS?

Yes. The RGB row is written as rgb(47, 93, 80) and the HSL row as hsl(163, 33%, 27%), both valid CSS. The HEX row includes # only if you typed one, so check that first.

Privacy and processing

Every conversion is calculated in your browser by the code on this page. The colors you type or pick are not sent to a server and nothing is stored. The color picker is a control supplied by your browser or operating system and its look varies by platform, but it does not send your selection to this site.