Color Converter

What is color conversion?

Colors can be written in several formats: HEX (#FF5733), RGB (rgb(255 87 51)), HSL (hsl(10.6 100% 60%)), and CMYK for print. This converter reads any CSS color, including named colors such as tomato, colors with transparency, both the comma and the space syntax, and newer formats such as oklch(), and writes it in all four. Every HEX, RGB, and HSL value it shows converts back to exactly the same color, and it all runs in your browser.

How color models differ

The same color can be written several ways. HEX and RGB both describe a color by its red, green, and blue components: HEX as a hexadecimal string like #FF5733, RGB as three 0–255 values. HSL describes the same color by hue (an angle on the color wheel), saturation, and lightness, which makes it far easier to create tints and shades by hand. CMYK describes ink coverage for print in cyan, magenta, yellow, and black.

Converting between them lets you copy a color from a design tool in one format and use it wherever your code or print workflow expects another.

What you can enter

Anything CSS Color 4 accepts as a color, except currentcolor, which depends on the element it's used on: HEX with 3, 4, 6, or 8 digits (the # is optional here), CSS color names, rgb() and hsl() in the comma syntax (rgb(255, 87, 51)) or the space syntax (rgb(255 87 51 / 50%)), hwb(), lab(), lch(), oklab(), oklch(), and color(), with hues in degrees or other angle units. Three plain numbers such as 255, 87, 51 are read as RGB, and cmyk() takes four percentages.

Values outside their range are handled the way browsers handle them: RGB channels above 255 and alpha above 1 are clamped, as CSS Color 4 specifies, and a hue of 400° is the same as 40°. A color outside sRGB, the range HEX, RGB, HSL, and CMYK can describe (such as a vivid oklch() or display-p3 color), is shown as its closest sRGB match, found by reducing its chroma in OKLCH, and the tool says so.

Exact round trips

HEX and RGB store each channel in 8 bits, so they describe exactly the same colors. HSL is a different coordinate system, and rounding it to whole numbers changes the color: #FF5733 has a hue of 10.588°, and hsl(11, 100%, 60%) is #FF5833, not #FF5733. The converter writes HSL with as many decimals as it takes to convert back to the same HEX value (here hsl(10.6 100% 60%)), so copying any of the values never shifts the color.

Transparency

An alpha channel sets opacity from 0 (transparent) to 1 (opaque). HEX adds it as two more digits, #RRGGBBAA, and rgb() and hsl() add it after a slash, as in rgb(255 87 51 / 0.5). HEX alpha has 256 steps, so 50% is written 80, which is 128 ÷ 255 = 0.502. The preview shows a translucent color over a checkerboard.

CMYK and print

CMYK describes how much cyan, magenta, yellow, and black ink to print. The CMYK values here use the simple, uncalibrated conversion CSS Color 5 defines for device-cmyk(), in which red is (1 − C) × (1 − K) and so on. Real print color depends on the press, inks, and paper, so a printer converts with an ICC color profile instead, and bright screen colors may not be printable at all. Use these values as a starting point, not as a print specification.

Color and accessibility

Text needs enough contrast against its background to be readable: WCAG recommends a ratio of at least 4.5:1 for normal text. HSL makes it easy to adjust lightness toward a target ratio while keeping the same hue, so you can create accessible variations of a brand color instead of guessing with raw HEX values.

How to convert a color

1. 1Enter a color. Type or paste a color in any CSS format, a color name, or cmyk(), or click the swatch to pick one.
2. 2Read every format. HEX, RGB, HSL, and CMYK update as you type. If a value was clamped or the color was outside sRGB, a note explains what changed.
3. 3Copy the format you need. Copy one value, the CSS custom property, or Copy output for all four.

Examples

#FF5733

rgb(255 87 51) · hsl(10.6 100% 60%) · device-cmyk(0% 66% 80% 0%)

rebeccapurple

#663399 · rgb(102 51 153) · hsl(270 50% 40%)

rgb(255 87 51 / 50%)

#FF573380 · hsl(10.6 100% 60% / 0.5)

rgba(0, 128, 255, 0.25)

#0080FF40 · rgb(0 128 255 / 0.25) · hsl(210 100% 50% / 0.25)

hsl(11, 100%, 60%)

#FF5833 · rgb(255 88 51)

rgb(300, 0, 0)

#FF0000 · rgb(255 0 0)

oklch(70% 0.4 30)

#FF5843 · rgb(255 88 67)

cmyk(0, 66, 80, 0)

#FF5733 · rgb(255 87 51) · hsl(10.6 100% 60%)

One color in every format

#FF5733 written each way the converter reads; every one converts to exactly #FF5733.

Frequently asked questions