Color Format Converter

Color Format Converter

Every color on the web can be written in several different ways - as a HEX code, an RGB triplet, an HSL value, or a CMYK percentage for print. Designers, developers, and printers each tend to prefer a different one. The Color Format Converter takes a single color and instantly shows you all of these equivalent representations, along with practical extras like its complementary color and the text color that will be most readable on top of it.

What is Color Format Conversion?

A color is just a point in a color space. HEX and RGB describe that point using red, green, and blue light intensities - the way screens actually produce color. HSL describes the same point using hue (the position on a color wheel), saturation (how vivid it is), and lightness (how close to black or white it is) - the way people intuitively think about color. CMYK describes how much cyan, magenta, yellow, and black ink a printer needs to reproduce the color on paper. All four are just different coordinate systems for the same underlying color.

The Formulas

HEX to RGB splits the 6-digit hex code into three 2-digit pairs and reads each as a base-16 number from 0-255:

$$R = \text{hex}_{1:2}, \quad G = \text{hex}_{3:4}, \quad B = \text{hex}_{5:6}$$

RGB to HSL first normalizes red, green, and blue to the 0-1 range, then derives lightness from the midpoint of the highest and lowest channel, and saturation from how far apart they are:

$$L = \frac{max(R,G,B) + min(R,G,B)}{2}$$ $$S = \frac{max(R,G,B) - min(R,G,B)}{1 - |2L - 1|}$$

RGB to CMYK first finds black (K) from whichever channel is brightest, then derives cyan, magenta, and yellow relative to the remaining brightness:

$$K = 1 - max(R,G,B)$$ $$C = \frac{1 - R - K}{1 - K}, \quad M = \frac{1 - G - K}{1 - K}, \quad Y = \frac{1 - B - K}{1 - K}$$

Relative luminance (used to pick a readable text color and to find the complementary color's brightness) weights each channel by how sensitive the human eye is to it, after linearizing the gamma-corrected sRGB values:

$$L_{rel} = 0.2126 R_{lin} + 0.7152 G_{lin} + 0.0722 B_{lin}$$

The calculator compares the contrast ratio of black text and white text against your color's luminance and recommends whichever passes the WCAG AA threshold of 4.5:1 by the larger margin.

Complementary color rotates the hue by exactly 180 degrees around the color wheel while keeping saturation and lightness the same, then converts back to HEX.

How to Use This Calculator

1. Click the color swatch and pick any color, or type a HEX code directly.
2. Instantly see the same color expressed as HEX, RGB, HSL, and CMYK.
3. Check the complementary color - useful for accent colors or two-tone designs.
4. Check whether black or white text reads better on top of your color, and whether it's a "web-safe" color (one of the 216 colors that render identically on old 256-color displays).

Worked Example

Take the blue #3B82F6:

• RGB: R=59, G=130, B=246 → rgb(59, 130, 246)
• HSL: hue ≈ 217°, saturation ≈ 91%, lightness ≈ 60% → hsl(217, 91%, 60%)
• CMYK: K = 1 - 246/255 ≈ 4%; C ≈ 76%, M ≈ 47%, Y ≈ 0% → cmyk(76%, 47%, 0%, 4%)
• Complementary color: hue 217° + 180° = 37° → a warm orange, #F6AF3C
• Relative luminance ≈ 0.235, which is below the 0.5 midpoint, so this blue counts as a "dark" color. Contrast against black text (≈ 5.71:1) beats contrast against white text (≈ 3.68:1), so black text is the recommended overlay color.