title: "Color Converter: Convert HEX, RGB, HSL, HWB and CMYK the Right Way" slug: color-converter-guide tool: color-converter category: color type: cluster
Color Converter: Convert HEX, RGB, HSL, HWB and CMYK the Right Way
The first time a color bit me was on a print run. I had built a landing page for one of my WordPress products, signed off on the brand blue in the browser, and then sent the same "blue" to a print shop for a batch of stickers. What came back was a flat, slightly greyed navy that looked nothing like the screen. Nobody had converted the RGB screen color to CMYK, so the printer guessed, and the guess was wrong. That was the day I stopped treating a color as a single string and started treating it as one value that has to be spoken in several languages at once.
That is exactly what a color converter is for. You give it a color in one syntax and it hands you back every other syntax, so the blue in your CSS, the blue in your design file, and the blue your printer receives are all provably the same color. I built the color converter on Toolz.dev because I was tired of pasting hex codes into three different sites to get RGB, HSL, and CMYK separately.
TL;DR: A color converter takes one color and re-expresses it in HEX, RGB, HSL, HWB, and CMYK at once, plus the nearest CSS color name. Use RGB and HEX for screens, HSL or HWB when you want to nudge a color by hand, and CMYK for print. The Toolz.dev converter runs entirely in your browser, keeps the alpha channel intact, and never uploads what you paste.
What is a color converter?
A color converter parses a color written in any common CSS syntax and computes its equivalent in the others. Which syntaxes exist, and exactly how each converts, is defined by CSS Color Module Level 4. The math is not complicated, but doing it by hand is tedious and error prone. Converting #4466EE to RGB means splitting the six hex digits into three pairs and reading each pair as a base-16 number: 44 is 68, 66 is 102, and EE is 238, giving rgb(68, 102, 238). Going the other way means dividing each channel into a two-digit hex string and joining them. Getting to HSL means normalizing the channels, finding the minimum and maximum, and computing hue, saturation, and lightness from those. You do not want to do that in your head at 2am.
The value of a converter is not just saving arithmetic. It is guaranteeing consistency. When one tool produces all formats from a single parsed color, there is no chance that the RGB you copied and the HSL you copied describe slightly different colors because you rounded differently between steps. One source, one truth, every format.
Why do color formats even exist?
Each color format survives because it is genuinely good at one job.
RGB is how screens work. A display emits red, green, and blue light, and mixing those three at different intensities produces every color you see. That makes RGB the native language of the browser: whatever syntax you write in CSS, the rendering engine resolves it to RGB before it lights up a pixel.
HEX is RGB in shorthand. #4466EE is the same as rgb(68, 102, 238), just packed into a compact string that is easy to paste into a stylesheet or a design tool. It is popular because it is short and unambiguous, not because it is more capable.
HSL describes a color by hue, saturation, and lightness. It is the format I reach for when I am hand-tuning a UI. To make a button darker on hover, I drop the lightness a few points and leave hue and saturation alone. Trying to do that in raw RGB means changing all three channels by unequal amounts and hoping the hue does not drift.
HWB, defined in the CSS Color Module Level 4 specification (https://www.w3.org/TR/css-color-4/), describes the same hue by how much white and how much black are mixed in. It maps cleanly to how people actually think about tints and shades: add white to lighten, add black to darken. It is newer, so I use it mostly when readability of the code matters more than browser reach.
CMYK is the print model. Printers lay down cyan, magenta, yellow, and black ink on white paper, and each ink subtracts light rather than adding it. That is why a vivid screen color can look duller on paper: the ranges of colors the two models can produce, called gamuts, are different. A converter gives you the CMYK approximation, but it cannot invent ink that does not exist.
How do I convert HEX to RGB and back?
The most common conversion, by a wide margin, is HEX to RGB and RGB to HEX. Here is the manual method so you can sanity-check any tool, including mine.
To convert HEX to RGB, split the six digits into three pairs and read each as a hexadecimal number from 0 to 255. Three-digit shorthand like #46E expands by doubling each digit to #4466EE first. To convert RGB to HEX, take each channel value, convert it to a two-digit hex string with a leading zero if needed, and join them behind a hash.
Rather than do this repeatedly, paste the value into the color converter and read every format at once. If you also need to pick a color visually and see it update live, the color picker is the better starting point, and the two tools share the same conversion core so their numbers agree.
When should I use CMYK instead of RGB?
Use CMYK only when the output is ink on paper. Business cards, stickers, packaging, and any commercial print job expect CMYK values, and sending RGB to a printer means the printer or its software converts for you, often with results you did not sign off on. That was my sticker mistake in a sentence.
Use RGB, and its HEX shorthand, for anything that will be displayed on a screen: websites, apps, social graphics, video. If a project spans both worlds, keep RGB or HEX as your source of truth and generate the CMYK approximation with a converter at the moment you hand off to print, so you can eyeball the CMYK values and flag any color that will shift badly before it costs you a print run.
How do color formats compare?
| Format | Best for | Alpha support | Example |
|---|---|---|---|
| HEX | Compact CSS, design handoff | 8-digit form only | #4466EE |
| RGB / RGBA | Screens, programmatic color | Yes (RGBA) | rgb(68, 102, 238) |
| HSL / HSLA | Hand-tuning hue and lightness | Yes (HSLA) | hsl(228, 83%, 60%) |
| HWB | Readable tints and shades | Yes (with slash alpha) | hwb(228 27% 7%) |
| CMYK | Print, ink on paper | No | cmyk(71%, 57%, 0%, 7%) |
The table is worth keeping in mind because it maps neatly onto a workflow: design in HEX or pick visually, tune in HSL or HWB, ship to screens in RGB or HEX, and convert to CMYK only at the print boundary.
How does transparency travel between formats?
Alpha is where a lot of conversions quietly go wrong. The alpha channel controls opacity, from 0 (fully transparent) to 1 (fully opaque). RGBA and HSLA carry it as a fourth value, and an 8-digit HEX carries it as a fourth pair: #4466EECC is that blue at roughly 80 percent opacity, because CC is 204 out of 255. Plain HEX and cmyk() have no alpha channel at all.
The Toolz.dev converter preserves alpha through every format that supports it. If you paste rgba(0, 0, 0, 0.5) you get #00000080 in the HEXA row and hsla(0, 0%, 0%, 0.5) in the HSLA row, all describing the same half-transparent black. When you copy the plain HEX or the CMYK row instead, you are copying the fully opaque color, which is a deliberate choice, not a bug: those formats cannot express opacity, so they show the color as if it were solid. When transparency matters, copy from an alpha-aware row.
Can I convert a CSS color name?
Yes, and it works in both directions. Type a keyword such as tomato, rebeccapurple, or slategray and the converter resolves it to HEX, RGB, HSL, HWB, and CMYK. The full set of 148 named colors comes from the CSS Color Module Level 4 specification, so the values match exactly what a browser resolves.
Going the other way is where it gets genuinely useful. Paste a numeric color and the converter reports the exact CSS name if one matches, and always shows the nearest named color by RGB distance when it does not. That nearest match is handy for naming variables and writing readable design docs: #663399 comes back as rebeccapurple, and something close to it comes back as "nearest: rebeccapurple" so you know what neighborhood you are in.
How does this fit a real design workflow?
Here is how I actually use color across a project, and where each tool fits.
I start by choosing a primary color, usually visually with the color picker. Once I have my brand blue, I run it through the color converter to lock down its HEX, RGB, HSL, and CMYK values in one place, and I paste those into the design system doc so every teammate and every vendor is working from the same numbers.
Then I build the palette. Supporting shades come from nudging lightness in HSL, and I check every text-on-background pair with the color contrast checker so the palette is accessible before it ships, not after a complaint. When I need a background flourish, I feed two of those colors into the gradient generator.
Finally, for responsive spacing and typography around all that color, I pair the palette with the CSS clamp generator so sizes scale as smoothly as the colors are consistent. Color and layout are two halves of the same polish.
If you care about where your data goes while you work, it is worth reading how these tools handle it. Everything in the color converter runs client-side, a design choice I wrote about in the guide to data privacy in online tools, and it sits alongside the rest of my daily kit in the web developer toolkit.
Is it accurate enough for production?
For screen work, yes, without qualification. HEX, RGB, HSL, and HWB are all exact representations of the same sRGB color, so converting between them round-trips cleanly: convert a color to HSL and back and you land on the same RGB triple, give or take one unit of rounding on a channel. That rounding is inherent to representing a continuous color in integer channels, not a flaw in any one tool.
For CMYK, treat the output as a solid, standard approximation rather than a color-managed proof. True print color depends on the specific paper, inks, and ICC profile your printer uses, which no browser-based tool can know. The converter uses the standard naive CMYK formula, which is exactly what most design tools show by default and is a reliable starting point. When a job is color-critical, get a physical proof from the printer before the full run. That is the lesson my greyed-navy stickers taught me, and it is cheaper to learn from this paragraph than from a box of wrong stickers.
What about newer color spaces like LAB and OKLCH?
If you follow CSS closely you have seen lab(), lch(), oklab(), and oklch() appearing in stylesheets and design tools. These come from the CSS Color Module Level 4 specification and they solve a real problem: RGB, HSL, and HWB are all tied to the sRGB screen model, so two colors that look equally different to the eye can be very different numeric distances apart, and a wide-gamut display can show colors that sRGB simply cannot describe. The OK color spaces are perceptually uniform, which makes them excellent for generating evenly stepped palettes and for interpolating gradients that do not muddy in the middle.
I deliberately kept this converter focused on the formats you paste into everyday production CSS and hand to printers: HEX, RGB, HSL, HWB, and CMYK. That is the set that covers the overwhelming majority of real tasks, and every one of them maps cleanly to the same sRGB color, so conversions between them are exact and reversible. The wider-gamut spaces involve gamut mapping decisions that are easy to get subtly wrong, and mixing them into a simple converter would trade clarity for coverage most people do not need.
The practical rule I follow: reach for OKLCH when you are algorithmically generating a palette or a gradient and you want perceptually even steps, and stay with HEX, RGB, and HSL for the day-to-day work of writing components. When you do design in OKLCH, convert the resulting anchor colors down to HEX or RGB with your design tool before handoff, so the values in your stylesheet are the same ones this converter and your teammates can read.
Frequently asked questions
How do I convert HEX to RGB?
Split the six-digit HEX code into three pairs and read each as a hexadecimal number from 0 to 255. In #4466EE, 44 is 68 (red), 66 is 102 (green), and EE is 238 (blue), giving rgb(68, 102, 238). Paste the HEX code into the converter and the RGB value appears immediately alongside every other format.
How do I convert RGB to HEX?
Convert each of the red, green, and blue values (0 to 255) to a two-digit hexadecimal number and join them after a hash. rgb(68, 102, 238) becomes #4466EE. The converter does this instantly and also gives you the 8-digit HEXA form when an alpha value is present.
What is the difference between HSL and HWB?
HSL describes a color by hue, saturation, and lightness, while HWB describes the same hue by how much white and how much black are mixed into it. HWB is often more intuitive for tints and shades: increasing whiteness lightens the color and increasing blackness darkens it. Both map to the exact same RGB value, so you can switch between them freely.
When should I use CMYK instead of RGB?
Use CMYK for print and RGB for screens. CMYK is a subtractive model based on cyan, magenta, yellow, and black inks, so it is what commercial printers expect. RGB is additive and describes light emitted by displays. A screen color has a CMYK approximation, but the two gamuts differ, so vivid screen colors can look duller in print.
Does the converter support transparency?
Yes. Provide an alpha value through rgba(), hsla(), or an 8-digit HEX and the opacity is preserved in every alpha-aware output. Formats without an alpha channel, such as plain HEX and cmyk(), show the fully opaque color, so check the RGBA or HEXA output when transparency matters.
Can I convert a CSS color name?
Yes. Type a CSS keyword such as tomato, rebeccapurple, or slategray and the converter resolves it to HEX, RGB, HSL, HWB, and CMYK. It also works in reverse: paste a numeric color and it reports the exact CSS name if one matches, plus the closest named color for reference.
Is the color converter free and private?
Yes. The converter is completely free with no signup, no limits, and no watermarks. All parsing and conversion run in your browser using client-side JavaScript, so the colors you enter never leave your device and the tool keeps working offline once the page has loaded.
