Build · Convert color values

Color Converter for CSS and Design Systems

Edit any supported color value and Colorrow recalculates the rest immediately. Move between familiar sRGB formats and perceptual Lab/OKLab formats without losing the practical CSS values you need for implementation.

Designed for sRGB handoff.This converter accepts HEX, RGB(A), HSL(A), HWB, Lab, LCH, OKLab, and OKLCH values that resolve inside sRGB. Out-of-gamut Lab/OKLab inputs are rejected instead of being silently clipped to a different color.

Bidirectional editing

Edit any format

Press Enter to commit a typed value, Escape to revert an edit, or use the copy button beside any valid CSS-ready result.

HEXWeb / tokens

RGBsRGB channels

RGBAsRGB + alpha

HSLHue-based sRGB

HSLAHSL + alpha

HWBHue / white / black

LABCIE Lab · D50

LCHPolar CIE Lab

OKLabPerceptual · D65

OKLCHPerceptual polar

Conversion scope RGB, HSL, and HWB are sRGB models. Lab/LCH use a D50 white point; OKLab/OKLCH use D65. Colorrow performs the required chromatic adaptation for Lab and validates that edited device-independent colors can be represented in sRGB before updating HEX/RGB output.

Which color format should you use?

Different formats describe the same color from different angles. The best choice depends on whether you are exchanging exact sRGB channel values, adjusting a color by hue, or building a scale where perceived lightness matters.

HEX

Compact sRGB notation that is convenient for design tokens, handoff, and static color constants. Eight-digit HEX can carry alpha, but channel relationships are not intuitive to edit by eye.

RGB / RGBA

Direct sRGB channel values. Use these when you need explicit red, green, blue, and opacity values or when integrating with APIs that expose channels numerically.

HSL / HSLA

A hue-based view of sRGB that can be easier for quick manual adjustments. HSL lightness is mathematical rather than perceptual, so equal lightness values can look very different across hues.

HWB

Another sRGB representation built from hue plus whiteness and blackness. It is useful when you think about tinting or shading a base hue, while still resolving to ordinary sRGB.

Lab / LCH

Device-independent CIE spaces using a D50 white point. LCH is the polar form of Lab: lightness, chroma, and hue can be easier to reason about than the rectangular a/b axes.

OKLab / OKLCH

Perceptual spaces using D65. OKLCH is especially practical when designing ramps because its lightness and chroma controls tend to track visual changes more predictably than HSL.

Practical CSS examples

All displayed values are ready to paste into CSS. Modern browsers can use the newer perceptual functions directly, while HEX and RGB remain useful fallback and interchange formats.

--brand: #3A86FF; --brand-alpha: rgb(58 134 255 / 0.72); --brand-perceptual: oklch(63.71% 0.19525 259.51);

Bidirectional editing

Changing one field becomes the new source color and regenerates every other field. Opaque RGB/HSL edits keep the current opacity unless an alpha-aware value changes it; HEX with six digits is treated as opaque, while eight-digit HEX includes alpha explicitly.

Limits that matter

This tool deliberately targets colors that fit in the sRGB gamut so HEX/RGB output and the live preview refer to the same displayable color.
Lab/LCH and OKLab/OKLCH can represent colors outside sRGB. The converter reports those edits instead of silently clipping them.
Conversion is mathematical; it does not guarantee two physical displays will reproduce a color identically because display calibration and color management still matter.
Changing notation does not change accessibility. Test real foreground/background pairs with a contrast checker.

A useful color workflow

Convert notation when implementation requires it, but keep evaluating the color in context. A semantic token may start in OKLCH for systematic palette work, become HEX for a legacy integration, and still need contrast and interface-preview checks before it is production-ready.