Hex Color Converter

Data Source and Methodology

This calculator uses formulas and color space definitions standardized by the World Wide Web Consortium (W3C). The primary authoritative source for these conversions is the CSS Color Module Level 4 Candidate Recommendation.

• Source: W3C Candidate Recommendation, 21 November 2024
• Reference: https://www.w3.org/TR/css-color-4/

All calculations for RGB, HSL, HWB, LCH, and OKLCH are based rigorously on the formulas and standard sRGB color space defined by this source. CMYK conversions are based on a standard subtractive formula for process printing.

The Formulas Explained

Color models are mathematical ways to represent colors. Here are the core formulas used for conversion from a standard RGB(R, G, B) value, where R, G, and B are integers from 0 to 255.

RGB to Hex

This is a simple base conversion. Each 8-bit R, G, and B value is converted to its 2-digit hexadecimal equivalent. The final string is concatenated with a # prefix.

RGB to HSL (Hue, Saturation, Lightness)

This formula converts RGB to a cylindrical model (HSL), which is often more intuitive for human perception.

1. Normalize R, G, B to the range [0, 1]: $R' = R/255$, $G' = G/255$, $B' = B/255$
2. Find max and min values: $C_{max} = \max(R', G', B')$, $C_{min} = \min(R', G', B')$
3. Calculate the difference (chroma): $\Delta = C_{max} - C_{min}$
4. Calculate Lightness (L): $L = (C_{max} + C_{min}) / 2$
5. Calculate Saturation (S): $$ S = \begin{cases} 0 & \text{if } \Delta = 0 \\ \frac{\Delta}{1 - |2L - 1|} & \text{if } \Delta \neq 0 \end{cases} $$
6. Calculate Hue (H): $$ H = \begin{cases} 0^\circ & \text{if } \Delta = 0 \\ 60^\circ \times \left( \frac{G' - B'}{\Delta} \mod 6 \right) & \text{if } C_{max} = R' \\ 60^\circ \times \left( \frac{B' - R'}{\Delta} + 2 \right) & \text{if } C_{max} = G' \\ 60^\circ \times \left( \frac{R' - G'}{\Delta} + 4 \right) & \text{if } C_{max} = B' \end{cases} $$

RGB to CMYK (Cyan, Magenta, Yellow, Key)

This formula converts the additive (light) RGB model to the subtractive (ink) CMYK model.

1. Normalize R, G, B to the range [0, 1]: $R' = R/255$, $G' = G/255$, $B' = B/255$
2. Calculate Key (Black, K): $K = 1 - \max(R', G', B')$
3. Calculate Cyan (C): $C = (1 - R' - K) / (1 - K)$
4. Calculate Magenta (M): $M = (1 - G' - K) / (1 - K)$
5. Calculate Yellow (Y): $Y = (1 - B' - K) / (1 - K)$

Values are then multiplied by 100 to get the percentage.

Glossary of Variables

Hex (Hexadecimal)

A base-16 color representation commonly used in web design (e.g., #FF0000). It represents R, G, and B values.

RGB (Red, Green, Blue)

An additive color model where red, green, and blue light are mixed to create a broad array of colors. Standard for digital displays.

HSL (Hue, Saturation, Lightness)

An intuitive model. Hue is the color's angle on the color wheel (0-360°). Saturation is the intensity (0-100%). Lightness is the brightness (0-100%).

HWB (Hue, Whiteness, Blackness)

Similar to HSL, but specifies color by mixing a pure Hue with Whiteness (0-100%) and Blackness (0-100%).

CMYK (Cyan, Magenta, Yellow, Key)

A subtractive color model used in color printing. It describes the percentage of each ink (0-100%) needed to create the color.

LCH & OKLCH

Modern, perceptually uniform color spaces. L is Lightness, C is Chroma (colorfulness), and H is Hue. OKLCH is an improvement on LCH, offering better perceptual uniformity. They can represent "wide-gamut" colors not available in sRGB.

How It Works: A Step-by-Step Example

Let's convert a standard blue color, Hex: #3b82f6, to RGB and HSL.

Step 1: Convert Hex to RGB

We split the hex code into its R, G, and B components and convert each from base-16 to base-10.

• R: 3b (hex) = $3 \times 16^1 + 11 \times 16^0$ = 48 + 11 = 59
• G: 82 (hex) = $8 \times 16^1 + 2 \times 16^0$ = 128 + 2 = 130
• B: f6 (hex) = $15 \times 16^1 + 6 \times 16^0$ = 240 + 6 = 246

Result: RGB(59, 130, 246)

Step 2: Convert RGB to HSL

Using the RGB values, we apply the HSL formula:

1. Normalize: $R' = 59/255 = 0.231$, $G' = 130/255 = 0.510$, $B' = 246/255 = 0.965$
2. Find Min/Max: $C_{max} = 0.965$ (B'), $C_{min} = 0.231$ (R')
3. Calculate $\Delta$: $0.965 - 0.231 = 0.734$
4. Lightness (L): $(0.965 + 0.231) / 2 = 0.598 \rightarrow 59.8\%$
5. Saturation (S): $0.734 / (1 - |2 \times 0.598 - 1|) = 0.734 / (1 - 0.196) = 0.913 \rightarrow 91.3\%$
6. Hue (H): $C_{max}$ is B', so we use: $60^\circ \times ((R' - G')/\Delta + 4) = 60^\circ \times ((0.231 - 0.510)/0.734 + 4) = 60^\circ \times (-0.380 + 4) = 217.2^\circ$

Final Result: HSL(217.2, 91.3%, 59.8%)

Frequently Asked Questions (FAQ)