Color Converter

Every color on a screen or a printed page can be written in several formats, and each format suits a different job. The table below shows the five formats this color converter handles, with the same worked color in each row. That color is tomato, and you will see it carried through every section of this page.

HEX is the compact way to write RGB for the web, HSL describes the same color by hue and lightness for easier tweaking, HSV is what most design pickers show, and CMYK describes ink on paper for print. The converter above turns any one of these into all the others in one step.

Every conversion below runs on the same worked color, tomato, so you can follow one color end to end. Each conversion is computed, not estimated, and the formulas are the standard ones used across the web and print industries.

HEX to RGB

Split the HEX code into three pairs and read each pair as a base 16 number, where each digit is worth its face value times 16 plus the second digit. For #FF6347, FF is 15 x 16 + 15 = 255, 63 is 6 x 16 + 3 = 99, and 47 is 4 x 16 + 7 = 71. That gives rgb(255, 99, 71). Readers who work with raw hex digits can also use our hex converter for general base-16 conversion.

RGB to HEX

RGB to HEX is the same arithmetic in reverse. Divide each 0 to 255 channel into two hex digits. For tomato, 255 becomes FF, 99 becomes 63, and 71 becomes 47, which reassembles as #FF6347.

RGB to HSL

First normalize each channel by 255. For tomato that is r = 1.000, g = 0.388, b = 0.278. Take the largest value, 1.000, and the smallest, 0.278. Lightness is their average, L = (1.000 + 0.278) / 2 = 0.639, which is 64%. Saturation is the spread divided by (2 - max - min) when lightness is above 50%, so S = 0.722 / 0.722 = 1.000, which is 100%. Because the largest channel is red, hue is H = 60 x ((0.388 - 0.278) / 0.722) = 60 x 0.152 = 9.1 degrees, rounded to 9. The result is hsl(9, 100%, 64%).

HSL to RGB

The chroma method walks the math back. With H = 9, S = 1.00, L = 0.64, chroma C = (1 - |2 x 0.64 - 1|) x 1.00 = 0.72. Then X = 0.72 x (1 - |(9 / 60) mod 2 - 1|) = 0.108, and m = 0.64 - 0.36 = 0.28. A hue of 9 degrees falls in the 0 to 60 sector, so the channels are (C, X, 0). Adding m and multiplying by 255 gives R = 255, G = 99, and B = 71. The round trip lands exactly back on rgb(255, 99, 71).

RGB to CMYK

Find the black channel first. K = 1 - the largest normalized channel = 1 - 1.000 = 0. Then each ink is (1 - channel - K) / (1 - K). For tomato, C = 0%, M = (1 - 0.388) = 0.612, which is 61%, and Y = (1 - 0.278) = 0.722, which is 72%. The result is cmyk(0%, 61%, 72%, 0%).

CMYK to RGB

Each channel is 255 x (1 - ink) x (1 - K), with the inks as fractions. For tomato, R = 255 x 1 x 1 = 255, G = 255 x (1 - 0.61) = 99.45, which rounds to 99, and B = 255 x (1 - 0.72) = 71.4, which rounds to 71.

RGB to HSV

HSV shares the hue with HSL but replaces lightness with value, which is simply the largest channel. The spread is 1.000 - 0.278 = 0.722, so saturation is 0.722 / 1.000 = 72% and value is 100%. Hue uses the same 9.1 degrees as the HSL math, giving hsv(9, 72%, 100%).

Pick the format that matches the tool in front of you, not the one that looks shortest. The right choice saves you a conversion every time you edit the color.

Every format above can carry transparency, but each one writes it differently. In HEX, transparency is two extra digits at the end, from 00 for fully transparent to FF for fully opaque. Tomato at half opacity is #FF634780, because 80 in hex is 128 out of 255, which is 50%. In CSS, the rgb() and hsl() functions take a fourth value from 0 to 1 instead, so half-transparent tomato is rgba(255, 99, 71, 0.5).

Shorthand HEX follows one simple rule. Three digits double into six, so #F57 becomes #FF5577, and four digits double into eight, so #F57A becomes #FF5577AA. The shorthand is only valid when both digits of each pair match, which is why #FF6347 has no shorthand form. This color converter accepts 3, 4, 6, and 8 digit HEX and reports the alpha separately.

The CMYK numbers on this page come from the plain mathematical conversion, and that is an approximation, not a print-ready result. Real print conversion depends on the paper, the press, and an ICC color profile that describes how that specific combination behaves. The same CMYK values can look noticeably different on coated and uncoated paper.

Screens and printers also cover different ranges of color. Screens mix red, green, and blue light and can show vivid oranges and greens that CMYK inks cannot reproduce exactly, so some colors shift when they move from screen to print. If color accuracy matters for your job, do the final conversion in Illustrator or InDesign with the print shop's profile. UXPICKLE's color converter guide gives the same advice and explains how design tokens fit into the workflow.

Sixteen everyday colors with every format verified by the conversion formulas. Use this table as a quick reference when you need a known color in the format your tool expects.

A converted color is only half the job. Text on top of it has to stay readable, and the WCAG standard measures that with a contrast ratio. Normal text needs at least 4.5 to 1 to pass AA, and 7 to 1 to pass AAA.

On tomato, white text scores 2.95 to 1, which fails AA, so white buttons on a tomato background are hard to read. Black text on the same color scores 7.13 to 1, which passes AA and AAA. When you pick a brand color with this converter, convert it, then test your text color against it the same way before the design ships.