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?
Color format conversion translates a color value between the different notations used in design and development: HEX (#3b82f6), RGB (59, 130, 246), HSL (217°, 91%, 60%), HSV, CMYK, and more. Different design tools and workflows use different color formats.
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.
Color conversion is a daily task for web developers and designers. A designer hands off a Figma mockup with HEX color values, but the developer needs HSL to create programmatic color variations, or OKLCH for Tailwind CSS v4 theme tokens. A print designer receives RGB brand colors from a client but needs CMYK values for a brochure. A data visualization engineer needs to generate color scales by interpolating between two HSL values. A CSS developer wants to add transparency to a brand color, which requires converting HEX to RGBA or HSLA. This tool eliminates manual calculation and lookup tables by converting instantly between all common formats.
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