Color Converter
Convert colors between HEX, RGB, HSL, and OKLCH
Convert colors between HEX, RGB, HSL, and OKLCH
#14B8A6rgb(20, 184, 166)hsl(173, 80%, 40%)oklch(70.4% 0.123 182.5)HEX, RGB, HSL, and OKLCH equivalents render in the output panel with copy buttons. The swatch reflects the parsed sRGB value.
CSS supports several color models, each with its own strengths. Picking the right format for the job makes your design tokens easier to reason about and your UI easier to theme.
Both describe the same thing — red, green, and blue channels in the sRGB color space. HEX is compact (#14B8A6), RGB is more legible (rgb(20 184 166)), and RGB also lets you specify alpha (rgb(20 184 166 / 0.8)). Use HEX for static brand colors and RGB when you need transparency or interpolation.
HSL (hue, saturation, lightness) maps to the way humans think about color adjustment: rotate the hue, desaturate, darken. It's great for generating tints and shades procedurally, which is how our Shade & Tint Generator works under the hood. The downside is that HSL lightness isn't perceptually uniform — a "50% light" yellow looks much brighter than a "50% light" blue.
OKLCH is a newer, perceptually uniform color space. Equal numerical changes in lightness or chroma look equally different to the eye across hues, which is why modern design systems (Tailwind v4, Radix Colors, and browsers' new wide-gamut pipelines) are moving to it. It also supports colors outside sRGB — useful on P3 displays. OKLCH is the best format for generating consistent color scales and for theming across light and dark modes.
Rule of thumb: store brand tokens in OKLCH or HSL, convert to HEX or RGB for fallback, and use the generated values as CSS custom properties.