100% local processing — your files and data never leave this browser. No uploads, no server storage.

OnboxTools

Free · Browser-only · No upload

Color Format Converter

HEX · RGB · HSL · CMYK · CSS color strings

Free color converter for web and print: hex into rgb, rgb to cmyk, HSL, and CSS strings with live preview. Paste a color hex code, edit RGB channels, or tune HSL — every format stays in sync.

Use it as a hex color translator, rgb converter, or color code converter for design handoffs. CMYK output supports print prep; for Pantone spot colors, cross-reference with official Pantone guides after converting.

hex#3B82F6
rgbrgb(59, 130, 246)
rgbargba(59, 130, 246, 1)
hslhsl(217, 91%, 60%)
cmykcmyk(76%, 47%, 0%, 4%)

Mathematical / technical context

Hex → RGB: each byte 00–FF → 0–255 decimal.

K = 1 − max(R,G,B)/255 · C = (1−R/255−K)/(1−K) · M, Y similarly · RGB inverse from CMYK standard formula

Step-by-step practical examples

Hex → RGB: #3B82F6 → rgb(59, 130, 246)

RGB → CMYK: rgb(59, 130, 246) → cmyk(76%, 47%, 0%, 4%)

RGB → HSL:hsl(217°, 91%, 60%) — same color, easier to darken for hover states.

Color format reference table

FromToResult
#FFFFFFRGB255, 255, 255
#000000CMYK0, 0, 0, 100
#FF0000RGB255, 0, 0
#FF0000HSL0°, 100%, 50%
#FF0000CMYK0, 100, 100, 0
#3B82F6RGB59, 130, 246
#3B82F6CMYK76, 47, 0, 4
rgb(0,128,255)HEX#0080FF
#00FF00CMYK100, 0, 100, 0
50% grayRGB128, 128, 128
#800080RGB128, 0, 128
Short #F00HEX#FF0000

Complete guide to RGB, CMYK & hex color conversion

Color converter — HEX, RGB, HSL, and CMYK in one place

Designers and developers constantly move colors between formats. A brand guideline lists HEX; CSS wants rgb(); a print vendor asks for CMYK. This free color converter accepts any of those inputs, shows a live preview, and outputs every equivalent — including HSL for intuitive hue edits and ready-to-paste CSS strings.

Whether you need a hex color translator for a landing page or an rgb converter for a Figma handoff, edit one field and the rest sync instantly. All math runs in your browser; nothing is uploaded.

Hex to RGB — convert hexadecimal color codes

Web colors are often written as six-digit hex: #3B82F6. To convert hex rgb or convert from hex to rgb, split the string into three pairs and parse each as base-16:

#3B82F6 → R=0x3B (59), G=0x82 (130), B=0xF6 (246) → rgb(59, 130, 246)

Searches like hex into rgb, change hex to rgb, hexadecimal to rgb converter, and color hexadecimal converter all describe the same operation. Short three-digit hex (#F00) expands by doubling each character to #FF0000 — supported in the editor above.

Reverse direction: a color converter rgb to hex or color hex code converter formats each 0–255 channel as two hex digits. Use the RGB tab, and the hex field updates automatically.

RGB to CMYK — convert rgb to cmyk for print

Screens use additive RGB (red, green, blue light). Commercial printing uses subtractive CMYK (cyan, magenta, yellow, black ink). To convert rgb to cmyk or run an rgb cmyk conversion, each channel is normalized to 0–1, black (K) is derived from the darkest channel, and C/M/Y are computed from the remaining components.

Example: rgb(59, 130, 246) → approximately cmyk(76%, 47%, 0%, 4%). Phrases like rgb color to cmyk, rgb color cmyk, and cmyk color conversion refer to this transform. Pure black rgb(0,0,0) maps to cmyk(0%, 0%, 0%, 100%).

Important: RGB covers a wider gamut than CMYK. Neon greens and saturated blues often shift when printed — the converted CMYK is a mathematical approximation, not a press proof. Always request a physical proof for brand-critical work.

CMYK to RGB and hex — reverse conversion

Print assets sometimes arrive as CMYK percentages. To convert cmyk to rgb or move cmyk into rgb for web use, the inverse formula reconstructs red, green, and blue from cyan, magenta, yellow, and key (black). Edit RGB in the tool and read CMYK output, or start from hex and verify the print values.

Cmyk conversion in both directions helps when a packaging PDF lists ink percentages but the companion website needs matching CSS. Paste the hex from your brand book, confirm CMYK, then copy rgb() or hsl() strings from the output panel.

Hex to CMYK — one step through RGB

There is no direct hex-to-CMYK formula — hex decodes to RGB first, then RGB converts to CMYK. A hex to cmyk workflow therefore means: parse hex → rgb → cmyk. The converter above does both steps automatically when you type a hex code.

A hex colour converter (British spelling) and a color converter hex tool serve the same role: translate between human-readable hex and the numeric formats your stack expects. HSL appears as an intermediate editing mode — useful when you want to lighten a brand blue without touching three separate RGB sliders.

CMYK to Pantone — what this tool can and cannot do

Many searches ask for a cmyk to pantone converter, cmyk into pantone, or convert cmyk to pantone color. Pantone spot colors are proprietary named inks with published Lab values — accurate matching requires Pantone's licensed libraries (Connect, Color Bridge guides, or Illustrator's Pantone+ books).

This color code converter outputs standard process CMYK percentages derived from RGB. It does not return an official Pantone code (e.g. Pantone 286 C). For prepress:

  • Use Pantone Color Bridge to find the nearest coated/uncoated swatch to your CMYK values.
  • Specify spot Pantone when brand guidelines require it — CMYK is a four-color process fallback.
  • Convert screen hex → CMYK here first, then compare in professional color-management software.

Cmyk to pantone color conversion in production workflows always involves a measured delta-E search against Pantone's catalog — not a single deterministic formula. Treat CMYK output here as a starting point for print discussion, not a Pantone replacement.

RGB, HSL, and CSS — web color strings

Beyond raw numbers, the tool outputs copy-ready CSS: hex, rgb(), rgba(), hsl(), and cmyk(). HSL separates hue (0–360°), saturation (0–100%), and lightness (0–100%) — ideal for hover states (hsl(217, 91%, 45%) for a darker blue) without guessing RGB offsets.

Eight-digit hex #RRGGBBAA supports alpha transparency. The preview swatch updates as you edit any channel, so a color converter session doubles as a quick sanity check before committing tokens to a design system.

Workflow tips for designers and developers

Web: Store brand colors as CSS custom properties in hex or hsl. Convert once, paste into :root, reference with var(--brand-blue).

Print: Design in RGB for screen mockups, then convert rgb to cmyk before sending to the printer. Expect gamut shifts on saturated colors.

Handoff: When a developer receives hex and a print designer needs CMYK, one shared link to this converter avoids back-and-forth spreadsheet errors. This is a single-color rgb converter — not a batch rgb to cmyk image converter. For whole images, use Photoshop, GIMP, or a dedicated prepress RIP that applies ICC profiles per pixel.

Detailed guide

CMYK ≠ Pantone

Process CMYK mixes four inks. Pantone spot colors are pre-mixed inks with official names. Convert to CMYK here, then use Pantone Color Bridge for nearest swatch matching.

Single colors, not images

This tool converts color codes. Batch rgb to cmyk image conversion needs Photoshop, GIMP, or a RIP with ICC profiles.

More Unit Converters

🌾
Area Converter
🎨
Color Format
💾
Data Storage & Transfer
Fuel & Gas Converter
🥄
Kitchen & Cooking
📏
Length & Distance
🔢
Number Base
📄
Paper Size
🏎️
Speed
🌡️
Temperature
🔤
Typography Converter
🧪
Volume
⚖️
Weight & Mass

Browse by category

Common questions

RGB, CMYK & hex color converter FAQ

How do I convert RGB to CMYK?

Enter RGB values (0–255) or paste a hex code. CMYK percentages appear automatically using standard subtractive conversion formulas.

How do I convert hex to RGB?

Split #RRGGBB into three hex pairs. Each pair converts to decimal 0–255. Example: #FF0000 → rgb(255, 0, 0).

Can this convert CMYK to Pantone?

No — Pantone matching requires licensed Pantone color libraries. This tool outputs process CMYK from RGB/hex; use Pantone Color Bridge for nearest swatch lookup.

What is the difference between RGB and CMYK?

RGB is additive (light on screens). CMYK is subtractive (ink on paper). Print workflows need CMYK; web uses RGB or hex.

Does hex to CMYK work directly?

Hex converts to RGB first, then to CMYK. The tool performs both steps when you edit the hex field.

Can I convert CMYK back to RGB?

Yes — adjust RGB sliders and read the resulting values. CMYK output updates to match the inverse conversion.

Is this an rgb to cmyk image converter?

No. This converts individual color codes. For full images, use photo editing software with ICC color profiles.

What is HSL used for?

HSL makes hue, saturation, and lightness edits intuitive — useful for theme variants and accessible contrast tuning.

Are short hex codes supported?

Yes. #RGB expands to #RRGGBB (#F00 → #FF0000).

Is data uploaded?

No. All conversions run locally in your browser.