Share

Color format converter

Tip: Enter any color code in HEX, RGB, HSL, or CMYK format — or simply pick a color using the color box.

Design and front-end work often jumps between HEX (web), RGB (screens), HSL (tweaking lightness), and CMYK (print). This converter keeps the math consistent so you can paste once and reuse everywhere.

What this tool does

It reads your color in one notation, converts it to the others using standard formulas, and shows every form side by side. Nothing is sent to a server—the conversion runs locally in your browser.

How to use it

  1. Enter a HEX code (e.g. #1a73e8) or choose RGB/HSL/CMYK fields.
  2. Adjust sliders or numbers until the preview matches what you need.
  3. Copy the line you need (CSS hex, rgb(), hsl(), or CMYK percentages).

What you get

  • Live preview swatch so you see the color while editing.
  • Multiple outputs at once—no tab-hopping between calculators.
  • Works offline once the page is loaded.

Typical uses

  • Matching a Figma HEX to an hsl() theme token.
  • Rough CMYK readout before sending a job to pre-press (always confirm with print profile).
  • Teaching or documenting why two “same” blues differ on screen vs PDF.

Examples

  • #2563eb → rgb(37, 99, 235)
  • hsl(221 83% 53%) ↔ common HEX for primary blue

Worth knowing

  • CMYK on screen is an approximation; real output depends on paper and ink profile.
  • Eight-digit HEX includes alpha; some older tools only expect six digits.

Frequently asked

Which format should I use in CSS?

Modern projects often use HEX or hsl(). HEX is compact; hsl() makes hover states easier. rgb() is equally valid.

Is CMYK exact?

No. Browser CMYK is indicative. For packaging or magazines, use your printer’s ICC profile in desktop software.

Do you store my colors?

No. Conversion happens in your browser; nothing is uploaded.

Keep one source color, export many notations—useful when developers, designers, and vendors each expect a different format.