Question 1

How does the HEX to RGB conversion actually work?

Accepted Answer

A 6-digit hex color code #RRGGBB stores three pairs of hexadecimal digits, one each for red, green, and blue. Each pair maps to a decimal integer 0–255: #00 = 0, #FF = 255, #7F = 127. The algorithm is: split the six characters into three pairs, then interpret each pair as base-16. Example: #4A90E2 → R=0x4A=74, G=0x90=144, B=0xE2=226 → rgb(74, 144, 226). This encoding is defined in the W3C CSS Color Module Level 4 (Candidate Recommendation, February 2022).

Question 2

What is the difference between 3-digit, 6-digit, and 8-digit hex codes?

Accepted Answer

The 3-digit shorthand (e.g., #F00) expands each digit by duplication: #F00 = #FF0000 (pure red). CSS Color Level 4 also defines an 8-digit form #RRGGBBAA where the last pair is an alpha channel: #4A90E2FF is fully opaque, #4A90E280 is 50% transparent (0x80 = 128 out of 255). A 4-digit shorthand #RGBA similarly expands (#F008 → #FF000088). All modern browsers (Chrome, Safari, Firefox, Edge) have shipped the 8-digit form since 2018.

Question 3

Are hex colors and sRGB the same thing?

Accepted Answer

Yes, by default. The IEC 61966-2-1:1999 sRGB color space is the CSS default color space, so an rgb(74, 144, 226) value is interpreted as an sRGB triple. sRGB has a non-linear transfer function (gamma ≈ 2.2) that compresses luminance to match human perception; naively averaging two hex codes as if their channels were linear intensity gives a wrong midpoint color. CSS Color Level 4 adds explicit color-space syntax like color(display-p3 0.29 0.56 0.89) and color-mix(in oklch, ...) for wide-gamut displays and perceptually-uniform interpolation.

Question 4

How do I check that a text-and-background color pair meets accessibility contrast standards?

Accepted Answer

Convert both colors to sRGB, apply the relative-luminance formula from WCAG 2.2 (W3C Recommendation, October 2023), and compute the ratio (L1 + 0.05) / (L2 + 0.05) with the lighter color as L1. WCAG 2.2 requires 4.5:1 for normal text (Success Criterion 1.4.3, Level AA), 3:1 for large text (≥ 18pt or ≥ 14pt bold), and 7:1 for AAA. Web tooling in browser DevTools and the WebAIM Contrast Checker automate this. The proposed APCA algorithm in WCAG 3 (draft) accounts for polarity and font weight but is not yet ratified.

Question 5

When should I use HSL, LCH, or OKLCH instead of hex?

Accepted Answer

HSL (hue-saturation-lightness) is easier for design: shifting a hue by 30° is straightforward, while shifting a hex code is guesswork. CIE L*a*b* and its polar form LCH decouple perceptual lightness from chroma — useful for building palettes with matched perceived brightness across hues. OKLCH (Björn Ottosson, 2020) uses the Oklab color space with improved perceptual uniformity over CIE Lab in the sRGB gamut; CSS Color Level 4 standardized oklch() syntax and browsers shipped support in 2023. Use hex or rgb for interoperability with legacy tools; use oklch for design system tokens and gradient interpolation.

HEX to RGB Color Converter