Color Converter
Convert colors online between HEX, RGB, HSL, OKLCH, and CMYK for CSS and design
How to use Color Converter
Enter a color value
Type or paste a color in any supported format: HEX, RGB, HSL, HSV, or CMYK.
View all conversions
The equivalent values in all other color formats appear instantly. A color swatch shows the resulting color.
Copy your target format
Click the copy icon next to the format you need for your project.
#3b82f6
What is color format conversion?
The same colour has half a dozen spellings. #3b82f6, rgb(59, 130, 246), hsl(217, 91%, 60%), and their OKLCH and CMYK equivalents all describe one blue; which spelling you need depends entirely on where the value is going.
Paste any color value in any supported format and the tool instantly shows the equivalent in all other formats. It also displays a live color swatch so you can verify the color visually.
Handoff is where the mismatch usually surfaces. A design file specifies HEX, but building a hover state or a tint ramp is far easier in HSL, where lightness is a single number to nudge. A Tailwind v4 theme token wants OKLCH. A print run wants CMYK, and that conversion is an approximation rather than an equivalence because the gamuts genuinely differ. Adding transparency to a brand colour means leaving HEX behind for RGBA, HSLA, or a slash-separated alpha in a modern colour function. Doing any of it by hand is arithmetic nobody should perform twice.
Understanding the differences between color models helps you choose the right format for each context. HEX is compact and universally supported in CSS, but its 6-digit notation is not intuitive for making adjustments. RGB maps directly to how screens emit light (red, green, blue channels), making it the native format for digital displays. HSL (Hue, Saturation, Lightness) and HSV (Hue, Saturation, Value) are more intuitive for human reasoning about color — adjusting lightness or saturation is straightforward. OKLCH is the modern perceptually uniform color space used by Tailwind CSS v4 and CSS Color Level 4, where equal numeric steps produce visually equal changes. CMYK is the subtractive model used in professional printing, where colors are created by overlapping cyan, magenta, yellow, and black inks.
Frequently asked questions
What color formats does the tool support?
The converter supports HEX (3 and 6 digit), RGB, RGBA, HSL, HSLA, HSV, CMYK, and named CSS colors. It converts between all of these formats in both directions.
What is the difference between HSL and HSV?
Both represent color as Hue, Saturation, and a third component. HSL uses Lightness — at 100% lightness, all hues become white. HSV uses Value (brightness) — at 100% value with 100% saturation, you get a fully saturated color.
Why does CMYK look different from the RGB version on screen?
Screens display color using RGB (additive light mixing). CMYK is a subtractive ink model for printing. The color gamuts differ — some CMYK colors cannot be reproduced on screen and vice versa. The conversion is an approximation.
How do I convert a Figma color value to CSS?
Figma displays colors in HEX by default. Paste the HEX value here and copy the RGB, HSL, or OKLCH output for use in your CSS. If Figma shows an RGBA value with opacity, enter it directly to get the equivalent HSLA or other formats.
What is OKLCH and why should I use it?
OKLCH (Oklab Lightness, Chroma, Hue) is a perceptually uniform color space, meaning that equal numeric changes in any component produce visually equal changes to the human eye. This is not true of HSL or RGB, where identical lightness steps can look very different across hues. OKLCH is the color space used by Tailwind CSS v4 for its entire built-in palette and is supported in CSS Color Level 4 via the oklch() function. It also supports wide-gamut P3 display colors that HEX and sRGB cannot represent.
How do I add transparency to a HEX color?
Convert the HEX value to RGBA or HSLA format using this tool, then adjust the alpha channel value. For example, #3b82f6 converts to rgba(59, 130, 246, 1.0) — change the 1.0 to 0.5 for 50% transparency. In modern CSS, you can also use the oklch() or hsl() function with a slash-separated alpha: hsl(217 91% 60% / 0.5).
Related tools
JSON Formatter
Format, validate, and prettify JSON data online for API debugging and code review
Hash Generator
Generate MD5, SHA-256, SHA-512, BLAKE3, and 25+ cryptographic hashes to verify file integrity
Epoch Converter
Convert Unix timestamps to human-readable dates online with live clock and timezone support
Regex Tester
Test and debug regular expressions online with live matching and capture groups
Resize Image
Change image dimensions with precise control