Color Converter

Enter a value in any one of the formats and the rest update as you type. HEX, RGB, HSV and CMYK can all be edited; LAB is shown as a read-only reading, because it is used for comparison rather than for typing. Nothing is rounded away - every format is calculated from the color you entered, so going back and forth between them does not drift.

The strip beneath the converter shows the color you have built. Its button carries that exact value into the Color Engine as your base color, which is usually the next step, because a single color is rarely enough to build with on its own.

Use HEX for anything a browser or a design file reads: it is the shortest form and the most widely accepted. Use RGB when the code computes rather than styles - canvas drawing, charting libraries, building a gradient by stepping between channels, or writing rgba() for a translucent overlay. Use HSL when you want to adjust a color with intent, lightening it for a hover state or rotating the hue for a second color, because its three values correspond to things a person can name.

Use CMYK only as an approximation for print, for documentation or a rough starting point, and use LAB when you need to compare two colors the way the eye compares them. It helps to think of these as views of one color rather than as different colors: hex and RGB are the same value written two ways, while CMYK and LAB describe something else - ink, and perception - and can only be approximate.

A HEX code is three pairs of base-16 digits in the order red, green and blue, so #5B8DEF is 5B red, 8D green and EF blue. Each pair is one byte, which is why a channel never goes above FF, and why the same color written in RGB never goes above 255: FF in base 16 is 255 in decimal. To read a pair, multiply the first digit by 16 and add the second, where A is 10, B is 11, C is 12, D is 13, E is 14 and F is 15. So 5B becomes 5x16 + 11, which is 91, and the color starts rgb(91, ...).

Going the other way, divide each channel by 16 to get the first digit and keep the remainder as the second: 141 is 8 rows of 16 with 13 left over, so 8 and D, which gives 8D. Three-digit shorthand works the same way with each digit doubled, so #5BE is #55BBEE - useful when you are sketching by hand, but it cannot express every color, only the ones where both digits of each pair match.

A conversion tells you what a value is in another notation; it does not tell you whether the color works. The two things worth checking before a color ships are contrast against the background it sits on and whether it has enough tints and shades to cover hover, active, disabled and border states. The contrast checker measures the first against the WCAG thresholds, and the shade generator builds the second from the single value you have.

If the color has to carry a whole interface rather than one element, take it into the Color Engine: it treats the value as a base color and returns a working palette, a gradient set and semantic tokens that already pass contrast between their roles. Everything it produces stays editable, so the converter's job is simply to get the right starting value into it.

The three screen formats all describe emitted light, so converting between them is exact arithmetic. CMYK describes ink absorbed by paper, and the result depends on the press, the stock and the profile in use. The values shown here use the standard simple conversion that most web tools use. They are useful for filling in a brand sheet; they are not a print specification and should never replace a proof.