Color Converter

How to Use the Color Converter

1. Type or paste a color in HEX, RGB, or HSL. The converter auto-detects which format you entered.
2. Or pick visually with the native color picker.
3. Read the parallel outputs: HEX (6-digit), RGB (0-255 triplet), HSL (degrees, percent, percent), and CMYK (four percent values).
4. Click Copy next to any row to send that exact representation to your clipboard. The matching CSS named color appears when one exists.
5. Re-enter a value in any row to trigger a fresh conversion pass; all other outputs resync.

The Math Behind Each Conversion

HEX to RGB is a direct base-16 parse: each pair of hex digits maps to an integer 0-255. RGB to HSL follows CSS Color Module Level 4 § 7: find max and min of the three channels, lightness is (max+min)/2, saturation is derived from the chroma max-min conditioned on whether lightness is above or below 0.5, and hue is the angle on the RGB cylinder. RGB to CMYK is the classic subtractive conversion: K = 1 - max(R,G,B)/255, then C = (1 - R/255 - K) / (1 - K), M = (1 - G/255 - K) / (1 - K), Y = (1 - B/255 - K) / (1 - K), with a guard for pure black (K=1) to avoid a divide-by-zero. Each conversion runs on every input event, and the results are rounded to the precision that each format conventionally uses - integers for RGB, integers for HSL hue, one-decimal percents for HSL saturation and lightness, integer percents for CMYK.

When to Reach for a Converter

• Handing colors from design to print: designers work in RGB-based tools, print requires CMYK for 4-color separations.
• Translating a legacy stylesheet from HEX to HSL so a developer can adjust hue or lightness programmatically.
• Building a Tailwind theme where you need to express a color in hsl() form so downstream CSS can remix saturation without re-picking.
• Quick sanity-checking the RGB values of a named color before pasting into a config file that does not accept names.
• Preparing color tokens for cross-platform design systems that need the same color in HEX for web, RGB for Android, and CMYK for marketing collateral.

Where Converter Math Breaks Down

CMYK is the first trap. Screen CMYK is an approximation with no ink or paper profile, and does not match press output without an ICC profile (SWOP for US coated, FOGRA for European, Japan Color for CJK markets). For design comps it is fine; for press-ready artwork calibrate through InDesign or Photoshop. Second, floating-point rounding: converting HEX to HSL and back can produce an off-by-one drift at the sRGB boundary; the converter avoids displaying this by always starting fresh from your input. Third, alpha is not converted: if you paste rgba(255, 0, 0, 0.5) the alpha is read but not reflected in HEX or CMYK outputs. Use the color picker for transparency-aware output.

The Spec Lineage of These Formats

HEX and the six-digit RGB form date to the earliest HTML 3.2 color specification (1997). HSL and its alpha-aware hsla() sibling were added in CSS Color Module Level 3 (2011). CMYK has never been a CSS color format - it is a print-industry primitive codified by ISO 2846 for printing inks and translated to screen via ICC color management. CSS Color Module Level 4 (2022) added OKLCH and Oklab from Bjorn Ottosson\'s 2020 A perceptual color space for image processing, which solve HSL\'s non-uniformity by building the color space on the CAM16 chromatic-adaptation model with cube-root lightness. Level 4 also added the generic color() function for Display P3, Rec.2020, and ProPhoto RGB - wider gamuts that modern displays can render. Level 5, currently in Editor\'s Draft, adds relative color syntax and color-mix() for computed colors in any of these spaces. This converter targets the Level 3 spec plus CMYK because those are the formats most design-to-code workflows actually exchange; for OKLCH-centric work the companion color picker and future converter updates will expose it.

Comparison to Specialty Color Tools

Figma, Adobe XD, and Sketch all include color panels that show HEX, RGB, and HSL simultaneously, but none of them expose CMYK without a plugin because design tools are screen-first. Adobe Color is stronger at CMYK because it is tied to the Adobe print workflow, but it does not offer a fast paste-in HEX and get-four-formats-out experience. command-line tools like tinycolor2 (a Node.js library) give you programmatic conversion with more formats (LCH, HSV, HWB) and are the right choice for build-time token generation. Chrome DevTools\' Styles pane lets you click a color swatch and cycle between HEX, RGB, HSL with Shift-click - useful for on-the-fly inspection but limited to three formats. Use this converter when you want a pasteable grid of every common format in one page without a login.