Color Picker & Converter

HEX and RGB describe the literal same underlying value — how much red, green and blue light to mix — in two different notations aimed at two different purposes: HEX packs the three channels into a single compact six-character string that is convenient to paste as one CSS value or store in one database column, while RGB spells the three numbers out separately, which is more convenient when a program needs to read or manipulate each channel independently. HSL restates the same color again in an entirely different coordinate system built around how people actually think about color — hue (which color), saturation (how vivid), lightness (how close to white or black) — specifically because "make this a bit lighter" or "make this more muted" are one-number adjustments in HSL and require recalculating all three RGB channels simultaneously to achieve the same visual effect.

RGB, HSL and HSV are all different ways of describing additive light — colors created by emitting red, green and blue light directly, which is how every screen works. CMYK describes subtractive color — cyan, magenta, yellow and black ink absorbing certain wavelengths of light reflecting off paper, which is a physically different process with a smaller achievable range of colors than a screen can produce. This is why a bright, saturated RGB color, particularly certain vivid blues and greens, frequently has no exact CMYK equivalent at all — the color simply falls outside what ink on paper is physically capable of reproducing, and the conversion shown is the closest available approximation using standard arithmetic rather than a professionally color-managed match. Genuine print accuracy for an important job needs an ICC color profile calibrated to the specific press and paper stock being used, which is a separate, more involved process than a general-purpose arithmetic conversion can provide.

The WCAG contrast ratio is computed purely from each color's relative luminance — a measure of perceived brightness derived from the RGB channels using a formula that weights green most heavily, since the human eye is most sensitive to that wavelength — rather than from how visually distinct or vivid the two colors appear side by side. This produces a specific, counterintuitive failure mode: two saturated, clearly different-looking colors of similar overall brightness, such as a bright orange text on a bright red background, can carry almost no luminance contrast between them at all despite looking obviously distinguishable to typical vision, and the pairing genuinely becomes difficult or impossible to read for anyone with low vision, color vision deficiency, or simply a phone screen in direct sunlight. The ratio is measuring exactly the dimension of contrast that matters for those readers, even when it disagrees with an unimpaired eye's first impression of the pairing.