Color Format Converter
Convert any color between HEX, RGB, HSL, and OKLCH instantly. Paste any format — the tool detects it automatically.
Accepts HEX, RGB, RGBA, HSL, or HSLA
HEX
Web / design tools
#3B82F6RGB
CSS
rgb(59, 130, 246)RGBA
CSS with alpha channel
rgba(59, 130, 246, 1)HSL
Intuitive CSS
hsl(217, 91%, 60%)HSLA
CSS with alpha channel
hsla(217, 91%, 60%, 1)OKLCH
Modern CSS (wide-gamut P3)
oklch(62.3% 0.188 259.8)About the Color Format Converter
Color formats are a constant friction point. Figma gives you hex, your CSS uses hsl(), your design tokens are in oklch(). Every time you cross a tool boundary you're converting manually, or Googling a converter that may or may not handle edge cases correctly.
Paste any color here in any format and all the others show up instantly with copy buttons. No dropdown to switch, no button to click first.
Supported formats
HEX
The one everything understands. Figma, Sketch, browsers, CSS. The safe default when you just need something that works everywhere.
#3b82f6 RGB / RGBA
How screens actually mix colors. The alpha channel in RGBA is useful when you need transparency directly in CSS.
rgb(59, 130, 246) HSL / HSLA
The most readable format for making quick adjustments. Tweak hue, saturation, or lightness independently without touching the others.
hsl(217, 91%, 60%) OKLCH
Worth switching to if you're building design tokens. Its lightness axis is perceptually uniform — two colors at equal L values actually look equally bright. HSL doesn't do that.
oklch(65.7% 0.178 249.8) On OKLCH
If you're building a design token system, OKLCH is worth a look as your source format. Two colors at the same HSL lightness often look noticeably different in brightness. Two OKLCH colors at the same L value actually look the same. That makes building accessible, visually consistent scales a lot more predictable.