Color Converter
Convert between HEX, RGB, HSL, and CMYK color formats. Essential tool for designers and developers.
Last updated:
How to Use
Expand how to useCollapse how to use
- 1
Enter a color code
Enter a color code in HEX (#FF5733), RGB (rgb(255,87,51)), or HSL (hsl(9,100%,60%)) format in the input field.
- 2
View conversion results
The entered color is automatically converted to HEX, RGB, HSL, HSV, and CMYK formats. You can visually confirm the color in the preview.
- 3
Copy the format you need
Click the 'Copy' button next to each format to copy the color code to your clipboard.
Color Input
Supports HEX (#FF5733), RGB (rgb(255,87,51)), HSL (hsl(9,100%,60%))
Preview
Conversion Results
HEX
#3B82F6CSS RGB
rgb(59, 130, 246)CSS HSL
hsl(217, 91%, 60%)RGB
R: 59, G: 130, B: 246HSL
H: 217°, S: 91%, L: 60%HSV
H: 217°, S: 76%, V: 96%CMYK
C: 76%, M: 47%, Y: 0%, K: 4%* CMYK/HSL/HSV values are rounded to integers. Round-trip conversions may differ by ±1-2.
About Color Converter
Color Converter instantly translates color codes between HEX, RGB, HSL, HSV, and CMYK with a live color preview and one-click copy for each format. Enter a color in any supported format — such as #FF5733, rgb(255,87,51), or hsl(9,100%,60%) — and see all other formats generated simultaneously. It's essential for web developers who need CSS color values, designers converting colors between Figma, Sketch, and code, and anyone preparing CMYK values for print. CSS-ready output formats (rgb() and hsl()) can be pasted directly into stylesheets, and a random color generator provides quick inspiration. All processing runs locally in your browser.
Key Features
- Convert between HEX, RGB, HSL, HSV, and CMYK
- Auto-detect input format (HEX, RGB, HSL supported)
- Real-time color preview display
- Copy in CSS format (rgb(), hsl())
- Random color generation
Use Cases
- Convert Figma or Sketch color values to CSS HEX or rgb()
- Translate brand colors to the format required by your CSS framework
- Convert CMYK values from print assets to web RGB/HEX
- Fine-tune colors in HSL for Tailwind CSS or design tokens
- Verify color consistency across a design system
FAQ
What's the difference between HEX, RGB, and HSL?
HEX represents colors in hexadecimal and is widely used in CSS. RGB specifies colors using the three primary colors of light: red, green, and blue. HSL represents colors by hue, saturation, and lightness, making it intuitive for color adjustments.
What is CMYK?
CMYK represents colors using four inks: Cyan, Magenta, Yellow, and Black. It's primarily used in printing. Since CMYK has a different color gamut than RGB, perfect conversion isn't always possible.
Why do converted values differ slightly from the original?
CMYK, HSL, and HSV values are rounded to integers, so round-trip conversions (e.g., HEX→HSL→HEX) may have errors of ±1-2. This is normal behavior.
What input formats are supported?
Three formats are supported: HEX (#RGB, #RRGGBB), RGB (rgb(R,G,B)), and HSL (hsl(H,S%,L%)). The input format is automatically detected.
Is transparency (alpha) supported?
The current version does not support transparency (alpha values). Only opaque colors can be converted.