Color Converter

This tool focuses on opaque color conversion between HEX, RGB, and HSL. For colors with transparency, you would need to add the alpha channel manually to the output — for example, changing rgb(255, 0, 0) to rgba(255, 0, 0, 0.5).

Currently, the tool accepts HEX, RGB, and HSL input formats. To convert a named CSS color, you can look up its HEX value first (e.g., coral is #FF7F50) and then enter that into the converter.

The tool accepts both 3-digit shorthand (e.g., #F00) and 6-digit full HEX values (e.g., #FF0000). The 3-digit format is automatically expanded to 6 digits for precise conversion.

Use HEX for fixed design tokens and HSL when you need to reason about or tweak a color in code. HEX is compact and universal — perfect for a locked brand value. But HSL exposes hue, saturation, and lightness as separate numbers, so you can derive a hover state by dropping lightness 10%, build a tint/shade ramp by stepping lightness, or desaturate without touching the hue. That's impossible to do legibly with HEX, where you'd have to recompute all three channels. A common pattern: define brand colors as HEX tokens, then manipulate them in HSL (or OKLCH) when generating variants.

OKLCH (and OKLab) are perceptually uniform color spaces now supported across modern browsers, and they fix a real problem with HSL/RGB: equal numeric steps don't look equally different to the eye. In HSL, two colors with the same lightness value can look wildly different in brightness (yellow vs blue), which makes building consistent palettes hard. OKLCH's lightness actually matches perceived brightness, so a lightness ramp looks even, and hue shifts stay vivid instead of passing through muddy grays. Use it for generating palettes, accessible color scales, and gradient interpolation (linear-gradient(in oklch, ...)). It's production-ready today with a HEX/HSL fallback if you support very old browsers.