Color Converter: HEX, RGB, HSL, CMYK

What Is Color Converter?

Color Converter is a free online tool that instantly converts any color between the five most common color formats: HEX, RGB, HSL, HSB (HSV), and CMYK. Paste or type a color value in any supported format and the tool auto-detects what you entered and shows all other representations simultaneously, in real time. It solves the everyday friction of switching between a designer's Figma HEX value and a developer's CSS HSL function, or translating screen RGB values to print CMYK percentages — without copying values through a calculator. All conversion happens locally in your browser with no server required.

Key Features

• Convert between HEX, RGB, HSL, HSB, and CMYK — all five formats are displayed simultaneously the moment a valid color is entered. The source uses a useColorConversion hook that maintains hex, rgb, hsl, hsb, and cmyk state objects in sync.
• Auto-detect input format — the text area detects HEX (values starting with # or matching /^[0-9a-f]{3,8}$/i), RGB (prefix rgb), and HSL (prefix hsl) automatically, showing a badge that reads "Detected: HEX" (or RGB/HSL/Auto).
• Real-time conversion as you type — every keystroke that produces a parseable value triggers an immediate re-render of all five output formats. No button press needed.
• Copy any format to clipboard — each format row has a copy button that shows a green checkmark for 2 seconds after a successful copy. A toast notification confirms the action.
• Visual color preview — a large aspect-video preview box fills with the current color and renders the hex value in auto-contrasting text (black or white based on luminance).
• RGB, HSL, HSB, and CMYK numeric inputs — manual adjustment panels let you tune individual R, G, B channels (0–255), H (0–360), S (0–100), L (0–100) for HSL, H (0–360), S (0–100), B (0–100) for HSB, and C, M, Y, K (0–100) for CMYK, each clamped to valid ranges.
• Shareable URL — the tool uses a useShareableState hook to encode the current color in the URL, enabling direct links to specific color conversions.
• Works offline after loading — no network requests during conversion; the full conversion library is bundled with the page.

How to Use Color Converter

Step 1: Enter your color

Open the Color Converter. The left half of the input card contains a text input field. Paste any of the following:

• A hex value: #3B82F6
• An RGB function: rgb(59, 130, 246)
• An HSL function: hsl(217, 91%, 60%)
• A bare hex string: 3b82f6 (without the #)

As soon as you type or paste a recognizable value, a small badge appears at the top right of the input — for example "Detected: HEX". The right half of the card shows a live color preview box that immediately fills with the detected color.

Alternatively, use the native color picker below the preview box. Click the square swatch to open your browser's color chooser; selecting a color there sets the input and updates all formats simultaneously.

Step 2: Review all format outputs

Below the input card, the "All Formats" card lists five rows:

Every row shows the format label, the formatted value in a monospace font, and a copy icon button. Click any copy button to place that specific value on your clipboard.

Step 3: Fine-tune with numeric inputs

Below the text input, the tool provides direct numeric inputs for all four adjustable color models:

• RGB: Three number inputs labeled R, G, B — each accepts values from 0 to 255 and is clamped to valid ranges.
• HSL: Three number inputs labeled H (0–360), S (0–100), L (0–100).
• HSB: Three number inputs labeled H (0–360), S (0–100), B (0–100).
• CMYK: Four number inputs labeled C, M, Y, K — each accepts values from 0 to 100.

Changing any input updates the hex state, which propagates to all five output formats instantly. This is useful when you know a target hue angle, saturation percentage, or CMYK value and need the equivalent hex for CSS.

Step 4: Copy and use your converted values

Click the copy button next to whichever format you need. The button icon switches from a clipboard icon to a green checkmark for 2 seconds. A success toast appears at the bottom of the screen.

The tool also tracks a history of conversions in the HistoryPanel (Premium). When you restore a history entry, it sets the input to the stored hex value and re-runs all conversions.

Step 5: Share a specific color

The URL updates automatically as you change the color (via useShareableState). Copy the browser URL to share a direct link to any specific color. Recipients who open the link see a "Loaded from shared link" toast and the shared color pre-loaded in all formats.

Practical Examples

Translating a Figma design token to CSS

A designer provides a brand violet as #8467C7. The developer needs the HSL value for a CSS color-mix() function. Opening Color Converter and typing #8467C7 immediately shows hsl(261, 40%, 59%) in the HSL row — ready to paste.

Converting a print color to web

A print shop specifies a corporate blue as cmyk(76%, 47%, 0%, 4%). The text input auto-detection does not recognize raw CMYK notation, but you can enter the values directly using the CMYK numeric input panel: set C to 76, M to 47, Y to 0, and K to 4. The HEX, RGB, and HSL outputs update in real time, giving you the web-ready values instantly.

Building a dark mode palette

A developer is building a dark theme and needs to shift a light color to a darker variant. They enter #E2E8F0 (light slate), note the HSL is hsl(214, 32%, 91%), then manually reduce the L channel input from 91 to 25 to get the dark equivalent. The HEX output updates to #253443, which they copy directly.

Tips and Best Practices

Type without the # for faster entry. The auto-detection regex matches bare hex strings like 3b82f6 as HEX format. You can paste directly from design tools that strip the hash.

Use the RGB inputs for precise channel control. If you need a color with an exact red value of 200, type directly into the R input rather than searching for the right hex prefix. The min/max clamping prevents you from entering out-of-range values accidentally.

Bookmark colors via the shareable URL. Because the color is encoded in the URL through useShareableState, you can bookmark frequently referenced brand colors and reopen them instantly without re-entering values.

The detection badge is a quick validity check. If the badge does not appear after typing, the input has not been recognized as a valid color. Check for typos — common mistakes include a missing #, using rgba with an alpha channel (not currently parsed), or entering percentage-based RGB values.

All four color models have editable inputs. RGB, HSL, HSB, and CMYK all have dedicated numeric input panels. You can start from any model by adjusting its values directly, and the other formats update in real time.

Common Issues and Troubleshooting

Nothing appears in the output rows after typing. The input text has not been recognized as a valid color. The parseColorToHex function handles # hex, bare hex, rgb(), and hsl() strings. If you entered a different format (like a named CSS color cornflowerblue), the auto-detection falls through to null and no conversion fires. Use a hex value instead.

RGB inputs accept values above 255. The code clamps values to Math.min(255, Math.max(0, val)) on change, so if you type 300, it snaps to 255 as soon as the input processes. This is expected behavior.

HSL hue input wraps at 360. The hue field is clamped to Math.min(360, Math.max(0, val)). Entering 361 sets to 360; entering -1 sets to 0.

Copy button does not respond. If navigator.clipboard.writeText fails (for example in an insecure or restricted context), the tool falls back to the document.execCommand('copy') method using a temporary textarea element. If both fail, check that the browser has clipboard permission for the site.

Loaded from shared link toast appears unexpectedly. This toast shows once when isFromUrl is true, meaning a color was encoded in the URL query string. If you opened a bookmarked URL, this is expected. The toast only appears once per page load due to the hasShownShareToast ref guard.

Privacy and Security

Color Converter processes all conversions locally using JavaScript math. No color values, input text, or conversion results are transmitted to any server. The shareable URL encodes the color in the browser URL only — it is never sent anywhere unless you choose to share the link. The tool uses the Web Clipboard API for copy operations, which are also entirely local. Works fully offline after the initial page load.

Frequently Asked Questions

Is Color Converter free to use?

Yes, fully free with no account required. All five conversion formats, the visual color picker, RGB and HSL manual inputs, clipboard copy, and shareable URLs are available to all users at no cost. Supporter features like PresetsPanel and HistoryPanel require a $5 Ko-fi activation for 30 days of access.

Does Color Converter work offline?

Yes. Once the page has loaded, all conversion logic runs entirely in JavaScript with no external requests. You can close your network connection and continue converting colors without interruption.

Is my data safe with Color Converter?

Yes. Color values are processed in browser memory only. Nothing is sent to a server. The shareable URL encodes the color client-side — Glyph Widgets servers never log the specific colors you work with.

What formats does Color Converter support?

The tool supports five formats: HEX (3 or 6 digit hex strings with or without #), RGB (rgb(R, G, B) notation), HSL (hsl(H, S%, L%) notation), HSB/HSV, and CMYK. All five formats have dedicated numeric input panels for direct value adjustment.

What is the difference between HSL and HSB?

Both use Hue (0–360 degrees) and Saturation (0–100%), but the third channel differs. HSL uses Lightness, where 50% is a fully saturated color and 100% is always white. HSB (also called HSV) uses Brightness/Value, where 100% is the purest version of the hue and 0% is always black. Figma and most design tools display HSB; CSS uses HSL.

Can I convert CMYK to HEX?

The auto-detection in the text input does not parse raw CMYK notation, but you can use the CMYK numeric input panel to enter C, M, Y, and K values directly. Adjusting any CMYK value updates all other formats in real time, including HEX.

Why does the CMYK conversion look slightly off from my print values?

Screen-to-print conversion depends on the color profile. The tool uses a standard sRGB-to-CMYK mathematical formula without ICC profile correction. For print production work, use a color management tool that applies the correct ICC profiles for your printer and paper stock.

Can I enter 3-digit shorthand hex values like #F0F?

Yes. The parseColorToHex function detects hex strings matching /^[0-9a-f]{3,8}$/i, which includes 3-digit shorthand. #F0F is treated as equivalent to #FF00FF.

How do I share a specific color with a colleague?

Change the color in the tool and copy the browser's URL. The current hex value is encoded in the URL query string via useShareableState. When your colleague opens the link, they see the color pre-loaded with a "Loaded from shared link" notification.

Does Color Converter support alpha (RGBA / HSLA)?

Not in the current version. The input parser handles rgb() and hsl() but not rgba() or hsla(). Alpha channel values are not preserved in the conversion pipeline. For full alpha support, extract the RGB or HSL values manually and handle the alpha separately.

Related Tools

• Color Picker — sample colors directly from an uploaded image or your screen and send the result to the converter.
• Contrast Checker — verify that two converted colors meet WCAG AA or AAA contrast requirements.
• Palette Generator — generate harmonious color palettes from a base color and convert each swatch to your preferred format.

Try Color Converter now: Glyph Widgets Color Converter