Design
Free Color Converter Online
Convert colors between HEX, RGB, HSL, HSV and CMYK instantly. Live preview, CSS output, one-click copy.
What is a color converter?
A color converter translates a color value from one format to another — for example, from a HEX code used in CSS to an RGB triplet used in JavaScript, or to a CMYK value needed by a print designer. All these formats describe the same color, just using different mathematical models and different number ranges.
This tool converts between HEX, RGB, HSL, HSV, and CMYK — the five formats you'll encounter in web development, UI design, and print. It also outputs CSS-ready strings (rgb(), hsl()) and a CSS custom property declaration ready to paste into your stylesheet.
Everything runs in your browser — no API calls, no data transmitted, instant results as you type.
Color formats explained — HEX, RGB, HSL, HSV, CMYK
Every format describes a color differently. Understanding when to use each one prevents frustration when working across design, development, and print:
| Format | Range / Syntax | Used in | Best for |
|---|---|---|---|
| HEX | #rrggbb or #rgb | HTML, CSS, design tools | Sharing colors, CSS stylesheets |
| RGB | r: 0–255, g: 0–255, b: 0–255 | CSS, JavaScript, Canvas API | Programmatic color manipulation |
| HSL | h: 0–360°, s: 0–100%, l: 0–100% | CSS, design systems | Theming, lightness/darkness variants |
| HSV | h: 0–360°, s: 0–100%, v: 0–100% | Photoshop, Figma, design apps | Color pickers, visual design |
| CMYK | c/m/y/k: 0–100% | Print, offset printing | Business cards, posters, physical print |
HSL vs HSV — which should you use?
Both HSL and HSV use the same Hue and Saturation components, but differ in how they describe brightness. This distinction matters depending on your tool and use case.
- 0% lightness = black
- 50% lightness = pure color
- 100% lightness = white
- Native in CSS:
hsl() - Best for design tokens and theming
- 0% value = black
- 100% value = full brightness
- 100% value + 0% sat = white
- Used in Figma, Photoshop, Sketch
- Best for color pickers and design tools
Rule of thumb: use HSL when writing CSS or building a design system. Use HSV when working inside a design tool like Figma or Photoshop. They describe the same color differently — neither is "better".
RGB vs CMYK — screen vs print
RGB and CMYK use fundamentally different physics to produce color. RGB is additive — it adds light. CMYK is subtractive — it absorbs light with ink. This is why some bright screen colors cannot be exactly reproduced in print.
| RGB | CMYK | |
|---|---|---|
| Model | Additive light | Subtractive ink |
| Medium | Screens, monitors, TVs | Printers, offset press |
| White | All channels at max (255,255,255) | All channels at 0% (blank paper) |
| Black | All channels at 0 (0,0,0) | K channel at 100% |
| Color gamut | Larger — more colors possible | Smaller — limited by ink |
| File formats | PNG, JPG, SVG, WebP | PDF (print-ready), TIFF |
| Design tools | Figma, CSS, browser | Adobe InDesign, Illustrator |
Always design in RGB and convert to CMYK only before submitting to a printer. Never design in CMYK for digital output.
Using colors in CSS — which format to choose?
Modern CSS supports all color formats. The best choice depends on how you plan to use the color:
color: #3b82f6;
background: rgba(59, 130, 246, 0.15);
color: hsl(217, 91%, 60%); --light: hsl(217, 91%, 90%);
:root { --primary: #3b82f6; }
a { color: var(--primary); }Color accessibility — contrast ratios and WCAG
Converting a color to the right format is only half the job. Before using any color for text or interactive elements, verify that it meets WCAG 2.2 contrast requirements. Low-contrast colors are the most common accessibility failure on the web, and they make content unreadable for users with low vision or in bright sunlight.
The contrast ratio is calculated from the relative luminance of two colors — a value derived from their linear RGB components. The luminance calculation uses non-linear gamma correction to match human visual perception, which is why two colors that look similar in HEX can have very different luminance values.
| WCAG Level | Min contrast ratio | Applies to | Passes? |
|---|---|---|---|
| AA (normal text) | 4.5:1 | Text under 18px regular / 14px bold | ✅ Minimum required |
| AA (large text) | 3:1 | Text 18px+ regular or 14px+ bold | ✅ Minimum required |
| AA (UI components) | 3:1 | Buttons, inputs, icons, focus rings | ✅ Minimum required |
| AAA (enhanced) | 7:1 | Normal text — highest accessibility | ⭐ Gold standard |
After converting your colors with this tool, test your text/background combinations with a dedicated contrast checker. Use Color Palette Generator to generate accessible color combinations from the start.
Color spaces beyond the browser — LAB, LCH, and P3
HEX, RGB, HSL, HSV, and CMYK cover the majority of developer workflows, but modern CSS is expanding into perceptually uniform color spaces that were previously limited to professional design software. Understanding the landscape helps you choose the right tool for the job.
For new projects targeting modern browsers, consider using oklch() in your CSS for its superior perceptual uniformity and wide-gamut capability. Use this converter to get the sRGB values for cross-browser fallbacks.
Practical color workflow tips for web developers
Color conversion is rarely a one-off task — it is part of a repeatable workflow. Here are the patterns that experienced developers follow to avoid inconsistency and save time:
Define your brand colors as CSS custom properties in HSL: --brand-hue: 220; --brand: hsl(var(--brand-hue), 80%, 55%). This lets you generate tints, shades, and tones with a single hue value. Changing the hue updates your entire palette in one edit.
When a designer hands you a HEX color (#3b82f6), convert it to HSL to understand its hue, saturation, and lightness. Then build your full color scale by adjusting only the L value in 10% increments from 10% to 90%. The result is a consistent 9-stop color ramp ready for a design system.
RGB is the easiest format to manipulate mathematically in JavaScript. Lightening a color is as simple as increasing all three channels by the same amount. For canvas drawing, WebGL shaders, and the Canvas 2D API, RGB values map directly to the underlying data model.
A raw CMYK conversion (C=20, M=5, Y=0, K=0) means nothing to a print shop without specifying the ICC profile. The same CMYK values produce different printed colors on coated versus uncoated paper. Always send RGB source files to professional printers and let them convert using the target ICC profile.
Convert your color combinations early and check WCAG contrast ratios before you get attached to a palette. Failing contrast is more painful to fix after a design is approved and sliced into components. Use this converter to check HSL lightness values — a minimum lightness difference of ~40% between text and background is a useful rough heuristic for passing AA.
Chrome and Firefox DevTools let you click any CSS color value to cycle between HEX, RGB, and HSL representations in the inspector. This is useful for quick conversions when reviewing a live page. For batch conversion or CMYK output, a dedicated tool is more reliable.
FAQ
Common questions
What is the difference between HEX, RGB, and HSL?
HEX (#rrggbb) is shorthand for RGB in base-16, used in HTML and CSS. RGB (Red, Green, Blue) defines colors by mixing three light channels, each 0–255. HSL (Hue, Saturation, Lightness) describes colors by their position on the color wheel plus their intensity and brightness — making it more intuitive for design work.
What is HSV and how is it different from HSL?
HSV (Hue, Saturation, Value) and HSL both use a cylindrical color model, but differ in the third component: HSL measures Lightness (0% = black, 100% = white, 50% = pure color), while HSV measures Value (0% = black, 100% = full brightness). HSV is used in most design tools like Photoshop and Figma. HSL is more common in CSS.
What is CMYK and when is it used?
CMYK (Cyan, Magenta, Yellow, Black) is a subtractive color model used in print. Unlike RGB which adds light, CMYK works by subtracting light from white paper using ink. If you are designing for print (business cards, posters, brochures), your printer will need CMYK values.
Why does my color look different in print than on screen?
Screens use additive RGB color (light) while printers use subtractive CMYK color (ink). Some vivid RGB colors — especially bright blues and purples — cannot be accurately reproduced in CMYK because the gamut (range of reproducible colors) is smaller. Always proof your design in CMYK before printing.
Can I use HSL colors directly in CSS?
Yes. Modern CSS supports hsl(h, s%, l%) and the newer hsl(h s% l%) syntax (without commas). HSL is often preferred for CSS because you can easily create lighter or darker variants by adjusting only the lightness value, making theming and design systems simpler.
What is a CSS custom property (variable) for colors?
A CSS custom property stores a color value as a reusable variable: --color-primary: #3b82f6. You then reference it as color: var(--color-primary). This is the foundation of design tokens and theming in modern CSS — change the variable once and it updates everywhere.
How precise is this conversion?
RGB and HEX conversions are lossless (exact). HSL, HSV, and CMYK conversions involve rounding since they use different mathematical models. Converting HEX → HSL → HEX may produce a value 1–2 steps off due to rounding. For critical design work, verify the final hex value after multiple conversions.
More in Design