CSS Color Format Converter
FreeConvert between HEX, RGB, RGBA, HSL, HSLA, HSB, and CMYK. Paste any CSS color value and get all formats instantly. Free, browser-based.
What's next
Settings guide
Supported input formats:
| Format | Example input |
|---|---|
| HEX 6-digit | #FF5733 or FF5733 |
| HEX 3-digit shorthand | #F53 |
| HEX 8-digit with alpha | #FF573380 |
| RGB | rgb(255, 87, 51) |
| RGBA | rgba(255, 87, 51, 0.5) |
| HSL | hsl(217, 91%, 60%) |
| HSLA | hsla(217, 91%, 60%, 0.5) |
| CSS named color | dodgerblue, red, cornflowerblue |
| Modern space syntax | rgb(255 87 51) |
When each output format is most useful:
- ·HEX — Stylesheets, Figma/Sketch exports, Tailwind config
- ·RGB — JavaScript Canvas API, Three.js, some CSS-in-JS
- ·HSL — CSS variables with programmatic manipulation, dark mode tokens
- ·CMYK — Passing color context to print designers (approximation)
- ·HSB — Photoshop, Illustrator color pickers
Format comparison
Format compatibility in CSS: HEX, RGB, and HSL work in all browsers back to IE9+. OKLCH and Display-P3 require modern browsers (2022+). For maximum compatibility, use HEX or RGB. For design system work, HSL custom properties are worth the slight verbosity for the manipulation benefits.
Choosing the right format for a project: Use HEX for final CSS values in most projects — it's compact and universally understood. Use HSL for design token files where you want the palette to be self-documenting (the hue and lightness relationship is obvious). Use RGB when interfacing with JavaScript APIs that require separate channel values.
What this converter does not support: ICC-profile-accurate conversions, wide-gamut formats (Display-P3, Rec.2020) beyond basic OKLCH, or color spaces outside the sRGB gamut. For print-production-quality conversions, use a dedicated color management tool.
How it works
Paste color
Enter any CSS color value — HEX, rgb(), hsl(), or a named CSS color like 'tomato'.
Auto-detect
The tool identifies the input format and parses it to an internal RGB representation.
Copy any format
All output formats appear simultaneously — click any one to copy it to your clipboard.
About this format
CSS supports seven distinct color formats: named colors (red, dodgerblue), HEX (#FF5733), RGB (rgb(255, 87, 51)), RGBA (rgba(255, 87, 51, 0.5)), HSL (hsl(217, 91%, 60%)), HSLA (hsla(217, 91%, 60%, 0.5)), and the modern Color Level 4 syntax (oklch, lab, display-p3). Different contexts demand different formats — a design tool exports HEX, a CSS animation needs HSL for manipulation, a canvas API needs RGB integers, print workflows need CMYK.
This converter accepts any format as input and outputs all others simultaneously. Paste any valid CSS color string and immediately see the equivalent in every format — no need to chain multiple single-purpose converters.
The converter also handles CSS named colors (paste "dodgerblue" or "cornflowerblue" and get all numeric equivalents), and accepts both legacy comma syntax (rgb(255, 87, 51)) and modern space syntax (rgb(255 87 51)) for HSL and RGB functions.