Color Converter Online Free — HEX, RGB, HSL, CMYK Instantly
Color format mismatch is one of those small problems that wastes a surprising amount of time. A designer sends a HEX code, your CSS needs HSL, and your print vendor wants CMYK — three different numbers for the exact same color. This guide covers every major color format, when to use each one, and how to convert between them instantly with a free browser-based tool that requires no account and no file upload.
- HEX and RGB are two ways to write the same thing — RGB values as base-16 digits (
#FF6347) vs decimal numbers (rgb(255, 99, 71)) - HSL separates hue, saturation, and lightness — far more intuitive for adjusting colors dynamically in CSS
- CMYK is for print only — it describes ink percentages, not light, and cannot reproduce all RGB colors
- Use FusionPDF Color Converter to convert between all four formats instantly — no signup, runs in your browser
- Modern CSS is moving toward
oklch(), a perceptually uniform color space that makes color manipulation more predictable
Every color format was invented to solve a specific problem in a specific context. HEX was designed for compact notation in HTML. RGB maps directly to how screens physically work. HSL makes color manipulation readable for humans. CMYK describes physical ink on paper. The problem is that creative work constantly crosses these contexts — you design on a screen, publish on the web, and send files to a printer, each requiring a different notation for the same color.
Why Color Format Conversion Matters
Different tools, workflows, and output media each expect a specific color format. Web browsers understand HEX and RGB natively. CSS custom properties increasingly use HSL for dynamic theming. Print software requires CMYK values to calculate ink percentages. When you receive a brand color in one format and need it in another, manual calculation involves trigonometry and clamping logic that is error-prone to do by hand — a converter handles it in milliseconds.
The practical reasons to convert color formats come up constantly in real work:
- Web development. CSS accepts
#hex,rgb(),hsl(), and newer formats likeoklch(). When a designer delivers brand colors as HEX, developers often need HSL equivalents to build dynamic color scales or dark-mode variants. - Print design. When exporting a PDF for commercial printing, RGB colors must be converted to CMYK. Sending an RGB PDF to a print shop without conversion is one of the most common causes of unexpected color shifts in the final print run.
- Cross-tool handoff. Figma works primarily in HEX and RGB. Photoshop and Illustrator use Lab or CMYK. CSS variables are often written in HSL. Switching between tools constantly means switching between color notations.
- Design systems. Generating color scales — tints, shades, and accessible contrast variants of a base color — is much easier when the color is expressed in HSL or OKLCH, where lightness is an explicit, adjustable value.
HEX, RGB, HSL, CMYK — Each Format Explained
All four formats describe the same underlying reality — the appearance of a color to a human eye — but each uses a completely different mathematical model to do so. Understanding what each model represents makes it much easier to know which one to use and what to expect when you convert between them.
HEX — #RRGGBB
A HEX color code is a compact way to write three RGB channel values in base-16 (hexadecimal). The format is #RRGGBB, where RR is the red channel value, GG is green, and BB is blue — each ranging from 00 (0) to FF (255). #FF0000 is pure red. #000000 is black. #FFFFFF is white. The shorthand form #RGB (e.g., #F00) doubles each digit and is equivalent to #FF0000. HEX is the dominant format in web design because it is compact, copyable, and universally recognized by browsers. An optional alpha channel can be appended as a fourth byte: #RRGGBBAA.
RGB — rgb(R, G, B)
RGB stands for Red, Green, Blue. It describes colors using three channels, each ranging from 0 to 255, matching how screens physically produce color through the intensity of red, green, and blue sub-pixels. rgb(255, 0, 0) is the same pure red as #FF0000. RGB is an additive color model: combining all three channels at maximum intensity produces white (all light), while zero across all three gives black (no light). CSS also supports rgba(R, G, B, A) with an alpha channel from 0 (transparent) to 1 (opaque). Because HEX is simply RGB written in base-16, converting between the two is a lossless, mathematically exact operation with no approximation involved.
HSL — hsl(H, S%, L%)
HSL stands for Hue, Saturation, Lightness. Rather than describing a color by its component red, green, and blue intensities, HSL describes it the way humans think about color: what color is it, how vivid is it, and how light or dark is it? Hue is expressed in degrees on a 360° color wheel (0° and 360° are both red, 120° is green, 240° is blue). Saturation is a percentage from 0% (fully desaturated, a grey) to 100% (fully vivid). Lightness is a percentage from 0% (black) to 100% (white), with 50% representing the pure, undiluted hue. hsl(0, 100%, 50%) is pure red. The key advantage of HSL over HEX or RGB is that it is directly editable: to create a lighter version of any color, you simply increase the L value. To desaturate it, you decrease S. This makes HSL far more useful than HEX for building dynamic design systems.
CMYK — cmyk(C%, M%, Y%, K%)
CMYK stands for Cyan, Magenta, Yellow, Black (Key). It is a subtractive color model used exclusively for print: instead of combining light, it describes how much of each ink color to lay down on paper. Each channel runs from 0% (no ink) to 100% (full ink coverage). Unlike RGB, which is additive (more = brighter), CMYK is subtractive: more ink absorbs more light, making the result darker. The K (black) channel exists separately because mixing full cyan, magenta, and yellow theoretically produces black but in practice produces a muddy dark brown — a dedicated black ink gives sharper, more economical results for text and dark areas. CMYK values vary between print processes and ICC profiles, so the same CMYK numbers can look slightly different depending on the printer, ink, and paper stock.
How to Convert Any Color in 3 Steps
FusionPDF's color converter handles all four formats simultaneously. Enter a value in any format and all equivalent representations update instantly — no page reload, no button, no account. Everything runs in your browser with no data sent to a server.
Enter any color value. Go to fusionpdf.pro/color-converter. Type or paste a color value in any supported format: a HEX code like #4F46E5, an RGB value like rgb(79, 70, 229), an HSL value like hsl(243, 75%, 59%), or CMYK percentages like 66%, 69%, 0%, 10%. You can also click the color swatch to open a visual picker and select a color by eye.
See all formats instantly. As you type, all four equivalent representations update in real time — HEX, RGB, HSL, and CMYK. A live color preview swatch shows the exact color so you can verify it looks as expected. No conversion button, no waiting.
Copy the format you need. Click the copy icon next to any format to copy that value to your clipboard in the correct syntax for immediate use — ready to paste into CSS, a design tool, or a print specification. HEX and RGB for web, HSL for CSS variables and design systems, CMYK for print and PDF export.
Tip: You can also paste a color directly from Figma, Sketch, or Chrome DevTools. Most design tools copy colors in HEX or RGB format when you use Ctrl+C on a color swatch — paste directly into the converter input and all four formats appear immediately.
Screen vs Print: Color Gamut and Out-of-Gamut Colors
One of the most common surprises in design is that a color that looks vivid and saturated on screen comes out noticeably duller when printed. This is not a calibration problem — it is a fundamental physical limitation. Screens and printers operate in completely different color spaces, and the gap between them is significant for highly saturated colors.
Screens produce color using light. By combining red, green, and blue sub-pixels at varying intensities, a modern monitor can reproduce a specific range of colors called its color gamut. The standard web gamut is sRGB, which covers about 35% of all visible colors the human eye can perceive. Newer screens support wider gamuts like Display P3 (used in Apple hardware since 2016) or Rec. 2020.
Printers produce color by laying ink on paper. Physical inks absorb certain wavelengths of light and reflect others, creating the appearance of color. The CMYK gamut — the range of colors achievable with cyan, magenta, yellow, and black ink on coated paper — overlaps substantially with sRGB but does not contain all of it. Some colors that are easily displayed on screen simply cannot be reproduced with standard process inks.
Mid-range, desaturated hues
Most colors that appear naturally in photography, skin tones, earth tones, and muted palettes convert from RGB to CMYK with little visible change.
- Browns and beiges
- Desaturated blues and greens
- Most skin tones and neutrals
- Black, white, and most greys
Highly saturated, vivid hues
Colors near the edges of the sRGB gamut — electric blues, lime greens, hot pinks, neon shades — often have no exact CMYK equivalent and get clamped to the nearest printable value.
- Electric blue (
#0000FF) - Neon green, lime, hot pink
- Vivid cyan and magenta
- Most highly saturated HSL colors at 100% S
When converting out-of-gamut colors, the converter applies standard formula-based clamping — the result is the closest printable approximation, not the original color. For critical brand color accuracy in print, the professional approach is to specify a Pantone spot color alongside CMYK, or to use ICC profiles in your design software to soft-proof the printed output before sending files to the printer.
Common print mistake: Designing a document in RGB and exporting the PDF without converting to CMYK first. Many print shops will auto-convert at their end, often using generic RGB-to-CMYK settings that don't match your expectations. Always convert colors to CMYK yourself, inspect the result, and export a CMYK PDF when sending files for commercial printing.
Common Conversions and When You Need Them
Most color conversion needs fall into a small number of recurring patterns. Here are the situations that come up most often, and the correct direction of conversion for each one.
HEX to RGB — CSS variables and JavaScript
Designers typically deliver brand colors in HEX. CSS custom properties and JavaScript color manipulation both work more naturally with discrete numeric channels. Converting #4F46E5 to rgb(79, 70, 229) allows you to write CSS like rgba(79, 70, 229, 0.15) for transparent overlays, or destructure the channels in JavaScript for programmatic color calculations. This conversion is always exact — HEX and RGB are the same color model, just different notations.
RGB to HSL — Dynamic theming and design systems
The most useful conversion for front-end development. Once a color is in HSL, you can generate a full tonal palette by stepping the L (lightness) value, create hover states by adjusting S (saturation), and build dark mode variants by flipping L across 50%. A color like hsl(243, 75%, 59%) immediately tells you: it's a blue-purple hue (243°), quite vivid (75% saturated), in the mid-range of lightness (59%). You can't read any of that at a glance from #4F46E5.
HEX to CMYK — Print PDFs and documents
The critical conversion for any document that will be professionally printed. When preparing a PDF for a commercial printer, brochure, business card, or packaging, all colors must be specified in CMYK. Receiving a brand guide with HEX codes and needing to produce a print-ready PDF is one of the most common reasons designers reach for a color converter. Enter the HEX value, copy the CMYK output, and use those values in your design software's color settings before export.
HSL to HEX — Handing off to developers
Design systems and CSS are often built in HSL because of how naturally it expresses color relationships. But when handing colors off to a team using a tool that expects HEX (older design specs, email clients, legacy codebases), converting back to HEX is necessary. This conversion is also exact within the sRGB space.
| Conversion | When you need it | Lossless? |
|---|---|---|
| HEX ↔ RGB | CSS variables, JavaScript, API inputs | Yes — same model |
| RGB → HSL | Design systems, dynamic theming, dark mode | Yes — mathematical transform |
| HEX/RGB → CMYK | Print PDFs, commercial printing | Approximate — different gamuts |
| CMYK → RGB | Digitizing print specs for screen use | Approximate — gamut mapping varies |
Modern CSS: Why Designers Are Moving to HSL and OKLCH
CSS color specification has evolved significantly in recent years. While HEX and RGB remain the most-used formats, the CSS Color Level 4 and Level 5 specifications have introduced new color models that solve real problems HEX and RGB cannot. Two in particular have gained broad browser support and professional adoption: HSL (already discussed) and OKLCH.
The problem with HEX for design systems
HEX codes encode no human-readable information about a color's properties. #4F46E5 and #4B8BBE are both blue-ish, but you cannot tell from the codes which is lighter, more saturated, or more green. Building a systematic color scale from HEX requires guessing and checking. This is why teams that build design systems increasingly use HSL or OKLCH as the source of truth and generate HEX codes from them programmatically.
OKLCH — the perceptually uniform alternative
OKLCH stands for Lightness, Chroma, Hue in the Oklab perceptual color space. The key difference from HSL is that OKLCH is perceptually uniform: a step of +10 in the L (lightness) channel looks like roughly the same visual change regardless of the hue. In HSL, the same lightness step produces noticeably different perceptual changes at different hues — yellow at L=70% looks much lighter than blue at L=70%, even though the number is identical.
OKLCH syntax: oklch(0.65 0.22 264) — lightness (0–1), chroma (0–0.4+), hue (0–360°). Browser support as of mid-2026 covers all major browsers including Safari, Chrome, and Firefox. The CSS syntax is color: oklch(L C H).
Should you switch to OKLCH today? For new design systems, yes — OKLCH produces more predictable and accessible color palettes. For existing projects, HEX and HSL remain perfectly valid. OKLCH shines most when generating color scales programmatically or building accessible contrast ratios, since its perceptual uniformity makes contrast calculations more reliable. The FusionPDF color converter displays OKLCH equivalents alongside HEX, RGB, HSL, and CMYK.
Tool Comparison: FusionPDF vs Alternatives
Several free color converters exist online. Here's how FusionPDF's color converter compares to the most commonly used alternatives across the factors that matter most in day-to-day use.
| Tool | Formats | No signup | CMYK support | OKLCH support | Privacy (no upload) |
|---|---|---|---|---|---|
| FusionPDF Color Converter | HEX, RGB, HSL, CMYK, OKLCH | Yes | Yes | Yes | 100% local |
| Coolors | HEX, RGB, HSL, HSB | Yes | Partial | No | Local |
| Adobe Color | HEX, RGB, HSB, CMYK, Lab | Adobe account | Yes | No | Account required |
| Online HEX converters (generic) | HEX, RGB only | Yes | No | No | Varies |
Adobe Color is the most feature-rich option for users already in the Adobe ecosystem, but it requires an Adobe account to save palettes and access the full tool. For quick, account-free conversion across all four standard formats plus OKLCH, FusionPDF's converter handles the most common use cases without friction.
Why does CMYK look different from HEX on screen?
HEX and RGB describe colors using light (additive color), while CMYK describes colors using ink on paper (subtractive color). Screens emit light and can produce vivid, saturated colors — especially bright greens, electric blues, and neon shades — that physical inks cannot reproduce. When you convert an RGB color to CMYK, any colors outside the printable range are clamped to the nearest reproducible ink value, which can look noticeably duller or shifted on screen when you preview the CMYK equivalent. This difference is physical, not a bug in the converter — it reflects the genuine limits of what ink on paper can do compared to light from a screen.
What is the difference between HSL and HSB/HSV?
HSL (Hue, Saturation, Lightness) and HSB/HSV (Hue, Saturation, Brightness/Value) are related but different color models. The key difference is in the third channel. In HSL, a Lightness of 100% always gives pure white regardless of the hue and saturation settings. In HSB/HSV, a Value of 100% gives the pure, fully saturated version of the hue — not white. White in HSB/HSV requires both S=0% and V=100%. HSL is the model used in CSS. HSB/HSV is the model used in most design tools including Photoshop, Figma, and Illustrator. The same hue will produce different numeric values in each model, so they are not interchangeable — always check which model a tool is using.
How do I convert a Pantone color to HEX or RGB?
Pantone colors are proprietary spot colors defined by physical ink mixing formulas, not by a mathematical relationship to RGB or CMYK. There is no exact, universal Pantone-to-RGB conversion — only approximations. Pantone publishes official screen representations (HEX and RGB equivalents) for each swatch in their Pantone Color Finder tool. Most professional design software (Adobe, Affinity, CorelDRAW) includes built-in Pantone color libraries with approximate screen representations. For critical brand color work, always reference Pantone's official digital values rather than a formula-based converter, since the conversion varies by Pantone series (Coated, Uncoated, Pastel, etc.) and paper stock.
Can I use this for print design?
Yes. If you are designing for print — whether a PDF, brochure, or packaging — you need CMYK values. Enter your HEX or RGB color and the converter displays the CMYK equivalent, which you can copy and use in your design software's color settings before exporting a print-ready PDF. Keep in mind that the CMYK output is a formula-based approximation for standard process printing. For precision color management on a commercial press, use ICC profiles in your design software (Photoshop, InDesign, Illustrator) and soft-proof the output before sending files. The converter is most useful for quick reference and for approximate print planning when ICC-profile workflows are not available.
What is a color space?
A color space is a defined range of colors that a device or medium can produce, along with a mathematical model for specifying colors within that range. sRGB is the standard color space for screens and the web — it defines the range of colors most monitors can display. Adobe RGB covers a wider range used in photography. CMYK covers the range reproducible with process printing inks. Display P3 is a wider screen color space used in modern Apple displays and newer smartphones, covering about 25% more colors than sRGB. Colors specified in one color space may appear different when displayed or printed in another, which is why correct color space tagging and ICC profile management matters for professional work that crosses multiple output media.
Convert Any Color Instantly — Free, No Signup
HEX, RGB, HSL, CMYK, and OKLCH — all formats at once, in your browser. No account, no upload, no waiting.