Color Converter & Picker

How It Works

RGB (Red, Green, Blue) is the native color model for screens. Each channel ranges from 0–255, mixing additive light. White is 255,255,255; black is 0,0,0.

HSL (Hue, Saturation, Lightness) is more intuitive for humans — hue selects the color (0–360°), saturation controls intensity (0=grey, 100=vivid), and lightness goes from black (0) to white (100), with the pure color at 50.

HSV (Hue, Saturation, Value) is similar to HSL but Value controls brightness differently — at full value the color is its most vivid, not white. It's the model used by most visual color pickers, which is why it drives the square above.

Hex encodes RGB as three 2-digit hexadecimal pairs: #RRGGBB. A fourth pair (#RRGGBBAA) adds the alpha channel. 3-digit shorthand (#RGB) doubles each nibble.

OKLCH is a perceptually uniform color space introduced in CSS Color Level 4. L (lightness, 0–100%) and C (chroma, 0–0.4) behave consistently across hues — doubling L actually looks twice as bright, which isn't true in HSL. H is the same hue angle (0–360°). Because of gamut differences, some OKLCH values fall outside sRGB; those are clamped on conversion.

WCAG contrast measures the luminance difference between two colors. AA Normal requires a 4.5:1 ratio for body text; AA Large requires 3:1 for large text (18pt+ or 14pt bold). AAA is stricter: 7:1 and 4.5:1. Relative luminance converts sRGB to linear light using the formula 0.2126·R + 0.7152·G + 0.0722·B.