Color Code Converter (HEX ⇄ RGB ⇄ HSL ⇄ CMYK)

Convert HEX, RGB, HSL, and CMYK values with a live color preview.

Start from any color.

Preview

#3498db

rgb(52, 152, 219)

hsl(204, 70%, 53%)

Supports 3, 6 or 8 digits (#RRGGBB, #RGB, #RRGGBBAA).

Format: rgb(r, g, b) or 52, 152, 219.

Hue 0–360, Saturation & Lightness in %.

Approx. CMYK for printing (0–100).

Contrast preview

Text with your color on white

Lorem Ipsum

Text with your color on black

Lorem Ipsum

Use this to quickly gauge accessibility (WCAG) contrast.

Generated tints & shades

How this color converter works

We keep a single “source” color internally as RGB, because it’s the easiest to convert to/from. Whenever you edit HEX, RGB, HSL or CMYK, we normalize the input, convert to RGB, and then re-compute every other format.

Supported formats

  • HEX: #RRGGBB or #RGB
  • RGB: either rgb(r, g, b) or comma-separated
  • HSL: hsl(0–360, 0–100%, 0–100%)
  • CMYK: 4 numbers 0–100 (approximation from RGB)

FAQ

1. Why can CMYK change slightly when I re-enter it?

CMYK → RGB → CMYK is not always perfectly reversible because CMYK is device-dependent. We generate a practical CMYK value for print designers starting from RGB.

2. Can I get Pantone?

This tool doesn’t output Pantone because it’s a proprietary library. Use your design software with the RGB/HEX we generate here.

3. Why HSL?

HSL is more intuitive to tweak in code and design systems: you can change just lightness to create tints, or saturation for muted variants.


Audit: Complete
Formula (LaTeX) + variables + units
This section shows the formulas used by the calculator engine, plus variable definitions and units.
Formula (extracted LaTeX)
\[','\\]
','\
Variables and units
  • No variables provided in audit spec.
Sources (authoritative):
Changelog
Version: 0.1.0-draft
Last code update: 2026-01-19
0.1.0-draft · 2026-01-19
  • Initial audit spec draft generated from HTML extraction (review required).
  • Verify formulas match the calculator engine and convert any text-only formulas to LaTeX.
  • Confirm sources are authoritative and relevant to the calculator methodology.
Verified by Ugo Candido on 2026-01-19
Profile · LinkedIn
, ', svg: { fontCache: 'global' } }; ]], displayMath: [['\\[','\\]']] }, svg: { fontCache: 'global' } };, svg: { fontCache: 'global' } };