Color Converter

Hex (#FF5733) is a compact RGB notation for web use. RGB (255, 87, 51) defines color by red, green, blue channel intensity. HSL (14°, 100%, 60%) describes color by hue angle, saturation percentage, and lightness — making it more intuitive for adjusting color properties.

OKLCH is a perceptually uniform color space where equal numeric changes produce equal perceived visual changes. Unlike HSL where L:50% varies wildly in perceived brightness across hues, OKLCH lightness is consistent. It's the recommended format for design systems and CSS in 2026.

Use the WCAG 2.1 contrast ratio formula. Normal text needs a 4.5:1 ratio; large text (18px+ bold or 24px+) needs 3:1. APCA (the draft WCAG 3 algorithm) provides more accurate perceptual contrast assessment.

Converting between sRGB-based formats (Hex, RGB, HSL) is lossless. Converting to/from perceptual spaces (OKLCH, OKLAB) may involve minimal rounding. Converting from wide-gamut (Display P3) to sRGB may clip out-of-gamut colors.

Use hex for simple static colors, HSL/OKLCH when you need to systematically adjust hue/saturation/lightness, and rgb()/rgba() when you need alpha transparency in older browser support. OKLCH is best for design token systems.