Color Converter

How to use the Color Converter

Type or paste a color into the HEX field as a hex code, rgb(), rgba(), hsl(), hsv(), cmyk() or a CSS name such as tomato.

Or choose a color with Pick colour, the eyedropper (in browsers that offer it) or Random.

Read the HEX, RGB, RGBA, HSL, HSV and CMYK versions of the color, each in its own field.

Use the copy button next to the format your stylesheet, design app or print brief needs.

Color converter for every common format

This color converter takes a color in any common notation and shows it in six formats at once: HEX, RGB, RGBA, HSL, HSV and CMYK. Paste a hex code from a brand guide, an rgb() value from your browser's developer tools, an hsl() from a stylesheet or a plain CSS color name, then copy whichever version your next tool needs.

Example

Input:  tomato

HEX   #FF6347
RGB   rgb(255, 99, 71)
RGBA  rgba(255, 99, 71, 1)
HSL   hsl(9, 100%, 63.9%)
HSV   hsv(9, 72.2%, 100%)
CMYK  cmyk(0%, 61.2%, 72.2%, 0%)

The six fields stay in sync: edit any of them and the other five update. If what you type isn't a color the converter recognizes, the field is marked and you get an error that quotes it, so a typo never turns silently into the wrong color.

Input formats it recognizes

HEX: #0F766E, 0F766E, the shorthand #ABC (expanded to #AABBCC), and the alpha forms #RRGGBBAA and #RGBA.
RGB and RGBA: rgb(15, 118, 110), rgba(15, 118, 110, 0.5) or the modern rgb(15 118 110 / 50%). Bare numbers such as 15, 118, 110 are read as RGB too.
HSL and HSLA: hsl(160, 84%, 39%), with an optional alpha.
HSV or HSB: hsv(48, 91.6%, 98%) or hsb(…).
CMYK: cmyk(0%, 61%, 72%, 0%).
CSS color names: all 148 named colors from the CSS specification, from aliceblue to yellowgreen, including rebeccapurple and both spellings of gray and grey. Case and spaces are ignored, so Steel Blue works. The keyword transparent is not a named color and is not accepted.

When to use each format

Format	Typical use
HEX	CSS and HTML, brand guidelines, design tokens; short and easy to copy.
RGB	Screens and code: canvas and image processing, game engines, APIs that take 0–255 channels.
RGBA	Transparency in CSS: overlays, shadows, focus rings, glass effects.
HSL	Design tweaks and theming: change lightness for hover states and tints, rotate hue for accents.
HSV / HSB	Color pickers in design and image apps, and color selection in image-processing code.
CMYK	Print estimates for flyers, packaging and signage.

HEX and RGB describe exactly the same thing in different notation, so choose by what the destination expects. HSL and HSV both start from the same hue but define saturation and brightness differently, which is why their numbers never match; HSL is the one CSS understands. CMYK is the odd one out because it describes ink rather than light.

How the conversions work

Every input is first turned into red, green and blue values. Names and hex codes map directly, while HSL, HSV and CMYK inputs go through their standard formulas. The RGB channels are then rounded to whole numbers, and all six outputs are calculated from them:

HEX writes each channel as two uppercase hexadecimal digits (15 → 0F).
HSL and HSV use the largest and smallest channel to find hue, saturation and lightness or value. Hue is rounded to a whole degree, percentages to one decimal place.
CMYK uses K = 1 − max(R, G, B) on 0–1 values, then C = (1 − R − K) / (1 − K), and likewise for M and Y.

Because everything passes through whole-number RGB, a hand-typed HSL value may come back slightly adjusted: hsl(160, 84%, 39%) becomes #10B77F, which reads back as hsl(160, 83.9%, 39%). That is the nearest color a hex code can represent.

How transparency is handled

HEX gains two extra digits when alpha is below 1: alpha × 255, rounded, so 0.5 becomes 80.
RGBA always shows alpha as a decimal with up to three places; 1 means opaque.
HSL switches to hsla() when alpha is below 1.
RGB, HSV and CMYK have no alpha, so it is left out. The color is not blended with a background; flatten it yourself if you need the visible result, as shown on the RGBA to RGB page.

A note on CMYK

The CMYK value uses the simple textbook formula, not an ICC color-managed conversion. Real print separations depend on the press, ink and paper profile, and many vivid screen colors can't be printed exactly. Use the values as a starting point and confirm them with your printer and a proof; the RGB to CMYK page walks through a full example.

Building a palette from the result? The HEX colortone generator produces tints and shades of a color, and the random color generator helps when you need a starting point. All conversions run in your browser, and the colors you enter are not uploaded.

Frequently asked questions

Which color formats can I convert?

Input can be HEX (3, 4, 6 or 8 digits), rgb(), rgba(), hsl(), hsla(), hsv(), hsb(), cmyk() or a CSS color name. Every color is output as HEX, RGB, RGBA, HSL, HSV and CMYK.

Does it support CSS color names like steelblue?

Yes, all 148 CSS named colors are supported, and both gray and grey spellings work. Case and spaces are ignored, so SteelBlue and steel blue give the same result.

How are bare numbers like "255, 99, 71" read?

In the HEX field, three or four numbers separated by commas or spaces are read as RGB, so 255, 99, 71 gives #FF6347. For HSL, HSV or CMYK numbers, type them into that format's own field or add the function name, such as hsl(9, 100%, 64%).

Is the CMYK output ready for professional printing?

It is a formula-based estimate, not a conversion with your printer's ICC profile. Use it as a starting point and confirm colors that matter with a proof.

What happens to transparency when converting?

HEX, RGBA and HSL keep the alpha (as an extra hex byte, a decimal or hsla()). RGB, HSV and CMYK have no alpha, so it is dropped without blending the color.