Color Converter — HEX, RGB, HSL & CMYK

What this color converter does

This English-language color converter translates any color value between HEX, RGB, HSL, and CMYK — the four formats you'll encounter across CSS, design tools, and print workflows. Paste a hex code like #1e90ff, a CSS rgb() value, or an hsl() string and the tool instantly shows every equivalent. A built-in live swatch and native browser color picker let you explore visually. All math runs in your browser: 100% client-side — your data never leaves your browser. No uploads, no tracking, no server logs. For tasks involving binary or numeric encoding rather than color, the [Number Base Converter](/en/number-base-converter/) handles base conversions separately. MDN Web Docs is a reliable reference for CSS color syntax if you need the full specification.

Features

HEX ↔ RGB conversion. Convert hex into RGB and back with a single input. Accepts shorthand (#fff) and full six-digit (#ffffff) hex codes, matching what browsers and design tools export.
HSL output for accessible design. HSL separates hue (0–360°), saturation, and lightness into human-readable values, making it easy to tweak contrast ratios when building accessible UI color systems.
CMYK approximation with honest caveats. On-screen CMYK is an approximation. True print CMYK depends on ink, substrate, and an ICC profile — this tool explains that clearly so you don't send wrong values to a print team.
Native color picker. Click the swatch to open your browser's native color picker. No third-party widget, no extra download — works in Chrome, Firefox, Safari, and Edge.
CSS-style input accepted. Type or paste values in the formats you already use: #1e90ff, rgb(30,144,255), or hsl(210,100%,56%). No reformatting required before pasting.
One-click copy for each format. Copy any output format to your clipboard instantly — paste directly into CSS, Figma, Sketch, or a print spec without manual transcription.

How to use the color converter

Type or paste a color value into the input field, or use the color picker to choose visually. All four formats update simultaneously.

Enter a color value. Type a hex code (#1e90ff), an RGB value (rgb(30,144,255)), or an HSL string (hsl(210,100%,56%)) into the input field.
Or use the color picker. Click the color picker button to open your browser's native picker and choose a color visually — the input and all outputs update automatically.
Check the live preview swatch. The preview swatch renders your color in real time so you can confirm it looks right before copying.
Copy the format you need. Hit the Copy button next to HEX, RGB, HSL, or CMYK to copy that value to your clipboard, ready to paste into CSS or a design file.
Note the CMYK caveat for print. If you're using CMYK for print, treat on-screen values as a starting point only. Send a physical proof or use an ICC profile with your print vendor.

Common use cases

Brand color translation for print. A designer in Seattle has a brand's HEX code from the style guide and needs approximate CMYK values to hand off to a print vendor. This tool gives an immediate starting point while making clear that a press proof is still necessary.
Accessible UI color tuning. Frontend developers use HSL output to adjust lightness incrementally — for example, shifting hsl(210,100%,56%) to hsl(210,100%,40%) to meet WCAG contrast ratios without touching hue or saturation.
Inspecting colors from screenshots. Grab a color with an eyedropper tool, paste the resulting hex code here, and immediately get the RGB or HSL equivalent you need for a CSS variable.
Generating design-token palettes. Teams converting a Figma palette into CSS custom properties can use this tool to verify each hex code translates correctly to the rgb() or hsl() value in the design tokens file.
Debugging RGB values across APIs. RGB values are 0–255 in CSS but 0.0–1.0 in many graphics APIs. Use this converter to quickly confirm the channel values and avoid off-by-factor bugs when passing colors between systems.

Frequently asked questions

Is my color data sent to any server?

No. All conversions run entirely in your browser using JavaScript math. No color value, no input, and no result is ever transmitted to a server. The tool works offline once the page loads.

Why does CMYK on screen look different from the printed result?

Screen CMYK is a mathematical approximation. Actual print output depends on ink pigments, paper stock, and the ICC profile loaded in your RIP or print driver. Always request a physical proof from your print vendor before approving a final run — on-screen CMYK is only a reference.

Why does converting HEX → HSL → HEX sometimes return a slightly different hex code?

HEX values represent integer RGB triplets (0–255). Converting to HSL introduces floating-point math, and rounding back to integers can shift channel values by 1–2 counts. The resulting color is visually identical in almost every case, but the hex string may differ by one digit.

What's the difference between HSL hue degrees and the percent values?

In HSL, hue is expressed in degrees (0–360), where 0 and 360 are both red, 120 is green, and 240 is blue. Saturation and lightness are percentages (0%–100%). Confusing the units is a common source of bugs — many graphics APIs use normalized floats (0.0–1.0) for all three instead.

Can I convert CMYK into Pantone?

This tool doesn't output Pantone codes. CMYK-to-Pantone matching requires proprietary Pantone libraries because Pantone inks are mixed pigments, not CMYK process combinations. Use this converter to get approximate CMYK values, then consult a Pantone color bridge guide or your print vendor for the closest spot-color equivalent.

Do you support alpha / transparency values?

The current version handles fully opaque colors (HEX, RGB, HSL, CMYK without alpha). If you need to work with hex color codes that include an alpha channel — like #1e90ffcc or rgba() — that is on the roadmap. For other encoding tasks such as binary-to-text, the [Base64 encoder & decoder](/en/base64/) may be what you need.