Color converter. One color, every format.

How to use the Color Converter

This converter takes one color and shows it as HEX, RGB, HSL, HSV and CMYK at the same time. It reads whatever you paste, works out the red, green and blue values, and recalculates every other format from them as you type. It is for designers and developers who need the same color in the notation a different app or stylesheet expects.

Step by step

1. 1
   Enter a color

   Type or paste into the text box next to the Color picker. It accepts HEX with 3, 4, 6 or 8 digits (with or without #), rgb(), rgba(), hsl() and hsla(). You can also click the Color picker square and choose a color visually. The page starts on #3F6B54.

2. 2
   Read every format

   The All formats panel lists HEX, RGB, HSL, HSV and CMYK. They update the moment the input holds a color the tool can read. If a value does not change while you type, the text is not a complete color yet.

3. 3
   Edit a format directly

   The HEX, RGB and HSL rows are editable. Type a new value in one of them and every other row follows. The RGB row only accepts rgb() or rgba() text and the HSL row only accepts hsl() or hsla() text. HSV and CMYK are read only.

4. 4
   Set transparency

   Drag the Alpha slider from 0 to 100 percent. Below 100 the HEX becomes 8 digits, RGB becomes rgba() and HSL becomes hsla(), and the swatch shows the color over a checkerboard. Pasting an 8 digit HEX or an rgba() value moves the slider for you.

5. 5
   Copy what you need

   Press Copy beside any row to copy that format. Clicking the large swatch copies the HEX. A short message at the bottom of the screen confirms what was copied.

6. 6
   Pick a lighter or darker variant

   The Tints & shades strip shows 11 chips that keep your hue and saturation and change only the lightness. Click a chip to copy its HEX.

Reading the result

• The default #3F6B54 reads as rgb(63, 107, 84), hsl(149, 26%, 33%), hsv(149, 41%, 42%) and cmyk(41%, 0%, 21%, 58%).
• HSL and HSV share the same hue but measure differently. HSL lightness runs from black through the pure color to white, while HSV value runs from black to the pure color only, so the two percentages rarely match.
• The small number on each Tints & shades chip is its HSL lightness. The chips run from 92 down to 8, and the sixth chip always uses your current lightness, so for the default color it reads 33 and sits between 52 and 38.
• With Alpha at 50 the default reads #3F6B5480 and rgba(63, 107, 84, 0.5). The last two HEX digits are the alpha on a 00 to FF scale.

Tips and common mistakes

• CMYK here is the plain math conversion with no printer profile, so treat it as a starting point and do the final print conversion in your design software.
• HSV and CMYK carry no alpha. If you need transparency, copy the HEX, RGB or HSL row.
• The Color picker square has no alpha control. Choosing a color with it keeps whatever Alpha is already set on the slider.
• When you paste a value that includes alpha, check the Alpha slider afterwards. A HEX or rgb() without alpha leaves the slider where it was rather than resetting it to 100.

Privacy and limits

All conversion happens in your browser. Nothing you type is sent anywhere and nothing is saved, so the page opens on #3F6B54 again after a reload. Once the page has loaded it keeps working without a connection.

Back to the tool

Everything a converter should do.

Frequently asked questions.

More color & design tools.

Browse the full free-tool library →