Productive ToolboxColor Format Converter
Convert any color between HEX, RGB, RGBA, HSL, HSLA, HSV and CMYK, from a code, a CSS color name or a color picker.
Input Color
Examples: #F53, rgba(255, 87, 51, 0.5), hsl(11, 100%, 60%), cmyk(0, 66, 80, 0), tomato
Preview
Color Formats
Quick Gradient
linear-gradient(to right, #FF5733, #00A8CC)Related tools
Color Formats and Where They Are Used
Screens make color by mixing red, green and blue light, so HEX, RGB, HSL and HSV are all different ways of writing the same RGB color. CMYK is different: it describes how much cyan, magenta, yellow and black ink to put on paper, so converting to it is an approximation.
HEX → RGB: #FF5733 → FF, 57, 33 → 255, 87, 51
RGB → CMYK: K = 1 − max(R′, G′, B′); C = (1 − R′ − K) ÷ (1 − K)
R′, G′ and B′ are the RGB values divided by 255; M and Y follow the same pattern as C.
| Format | Example | Used for |
|---|---|---|
| HEX | #FF5733 | Web and CSS; compact and easy to copy |
| HEX + alpha | #FF573380 | CSS with transparency (last two digits) |
| RGB / RGBA | rgb(255 87 51 / 50%) | Screens; CSS, JavaScript, image editors |
| HSL / HSLA | hsl(11 100% 60%) | CSS themes: change lightness to make shades |
| HSV / HSB | 11°, 80%, 100% | Color pickers in Photoshop, Figma, Sketch |
| CMYK | 0%, 66%, 80%, 0% | Print: cyan, magenta, yellow and black ink |
Common Colors in Every Format
| Color | HEX | RGB | HSL | CMYK % |
|---|---|---|---|---|
| Red | #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) | 0, 100, 100, 0 |
| Orange | #FFA500 | rgb(255, 165, 0) | hsl(39, 100%, 50%) | 0, 35, 100, 0 |
| Teal | #008080 | rgb(0, 128, 128) | hsl(180, 100%, 25%) | 100, 0, 0, 50 |
| Navy | #000080 | rgb(0, 0, 128) | hsl(240, 100%, 25%) | 100, 100, 0, 50 |
| Gray | #808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) | 0, 0, 0, 50 |
| White | #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) | 0, 0, 0, 0 |
How to Use the Color Converter
- 1Enter a color: Type or paste a HEX code (#F53 or #FF5733), rgb() or rgba(), hsl() or hsla(), cmyk() or a CSS color name, or pick one with the color picker.
- 2Fine-tune it: Adjust the red, green and blue sliders and the opacity; every format updates at once.
- 3Copy the format you need: Copy HEX, 8-digit HEX with alpha, RGB, RGBA, HSL, HSLA, HSV/HSB or CMYK, or copy all formats together.
- 4Reuse recent colors: Click a swatch in Recent Colors to bring back a color you converted earlier.
Frequently Asked Questions
How do I convert HEX to RGB?
Split the six-digit code into three pairs and convert each pair from base 16 to base 10. For #FF5733: FF = 255, 57 = 87 and 33 = 51, so the color is rgb(255, 87, 51). A three-digit code doubles each digit: #F53 is #FF5533.
What is the difference between RGB and HSL?
Both describe the same colors on screen. RGB mixes red, green and blue light from 0 to 255. HSL describes hue (0–360° around the color wheel), saturation and lightness as percentages, which makes it easier to create lighter, darker or less saturated versions of a color by changing one number.
What is HSV or HSB?
Hue, saturation and value (or brightness), the model used by color pickers in Photoshop, Figma and most design apps. It shares the hue with HSL but measures brightness differently: pure red is hsl(0, 100%, 50%) but HSV 0°, 100%, 100%.
How do I add transparency to a HEX color?
Add two more hex digits for the alpha channel: #RRGGBBAA. 80 is about 50% opacity, so #FF573380 is the same as rgba(255, 87, 51, 0.5). All modern browsers support 8-digit HEX in CSS.
Is the RGB to CMYK conversion exact?
No. CMYK values depend on the printer, paper and ink, so professional printing uses an ICC color profile. This tool uses the standard device-independent formula, which is fine for a starting point, but ask your printer for their profile before printing brand colors.
Which CSS color formats can I paste?
3, 4, 6 and 8-digit HEX with or without #, rgb() and rgba() with commas or spaces and an optional / alpha, hsl() and hsla() with or without deg, cmyk() on a 0–100 or 0–1 scale, and any of the 148 CSS color names such as tomato or rebeccapurple.
Related Tools
HEX to RGB Converter
Convert HEX to RGB and RGB to HEX, with the math shown step by step.
Hex-to-RGBA Converter
Add opacity to a HEX color: rgba(), 8-digit HEX and Android #AARRGGBB.
HSL Color Slider
Adjust hue, saturation, and lightness with live preview.
Random Hex Color Generator
Spacebar to refresh color inspiration.
Color Palette Extractor
Upload image to get 5 dominant colors.
Color Palette Generator
Generate harmony-based palettes with export and contrast checks.
CSS Gradient Generator
Create linear and radial gradients with copy-ready CSS.
Color Palette Contrast Grid
Test all palette text/background pairs for WCAG contrast.
Color Blindness Simulator
Apply SVG filters for accessibility preview.
CSS Glassmorphism Generator
Create frosted glass effects with live preview and copy-ready code.
SVG Path Visualizer
Draw SVG path data on a grid with every command explained.
Contrast Checker
Test WCAG AA and AAA color contrast accessibility.