color-converter

Type or paste a color in HEX, RGB, or HSL — the format is detected automatically and all three are shown at once, alongside a live swatch and picker. Includes a WCAG 2.1 contrast ratio checker for accessibility. Everything runs locally in your browser.

client-side only HEX · RGB · HSL WCAG contrast checker no signup

color-input

Color (any format)

converted.txt

HEX

RGB

HSL

contrast-checker.txt

Enter a foreground and background color to compute the WCAG 2.1 contrast ratio and see whether it passes AA and AAA thresholds. Accepts any format — HEX, RGB, or HSL.

Foreground (text) color

Background color

// how the format is detected

│

Each format has a distinctive syntax, so the input can be classified before it's parsed: a leading # means HEX (both 6-digit #RRGGBB and 3-digit shorthand #RGB are accepted), a leading rgb( or rgba( means RGB, and a leading hsl( or hsla( means HSL. Once detected, the color is converted internally to RGB and then re-derived into all three output formats, so the values you see always agree with each other exactly.

// which format to use where

HEX — the most common format in CSS, design tools, and brand style guides. Compact and easy to copy-paste, but not human-intuitive to read at a glance.
RGB — directly maps to how screens render color (red, green, blue channel intensities from 0–255). Useful when you need to reason about individual channel values, or when working with canvas/image APIs that expect raw byte values.
HSL — hue, saturation, lightness. The most intuitive format for humans to adjust: keep the same hue and just change lightness to get a lighter or darker shade of the same color, without the trial-and-error of hand-editing hex digits.

// WCAG contrast ratios

│

The contrast ratio is computed with the standard WCAG 2.1 relative luminance formula: each sRGB channel (0–255) is gamma-corrected into linear light, combined as L = 0.2126·R + 0.7152·G + 0.0722·B, and the ratio between the lighter and darker color's luminance is (L1 + 0.05) / (L2 + 0.05). It ranges from 1:1 (identical colors) to 21:1 (pure black on pure white). WCAG AA requires 4.5:1 for normal text and 3:1 for large text (≥18pt, or ≥14pt bold); WCAG AAA raises that to 7:1 and 4.5:1 respectively.