Color Code Converter (HEX ⇄ RGB ⇄ HSL ⇄ CMYK)
Convert color codes between HEX, RGB, HSL and CMYK in real time. Pick a color, view previews, copy values, and check contrast against white and black. Perfect for designers, front-end developers and printers.
Start from any hue and watch every code update.
Edit HEX, RGB, HSL or CMYK directly. The internal engine keeps a single RGB source and converts everything else so you can grab the precise code for every use case.
Supports 3, 6 or 8 digits (#RRGGBB, #RGB, #RRGGBBAA).
Format: rgb(r, g, b) or comma-separated (0–255).
Hue 0–360, Saturation & Lightness in %.
Approximation for print (0–100).
#3498db
rgb(52, 152, 219)
hsl(204, 70%, 53%)
Text with your color on white
Lorem Ipsum
Text with your color on black
Lorem Ipsum
Use this to quickly gauge accessibility contrast (WCAG).
Generated tints & shades
Base + eight variations
How to Use This Converter
Choose a color with the picker or edit any of the HEX, RGB, HSL, or CMYK fields. Every input is tied to the same RGB source, so clicking Calculate or waiting for the debounced update keeps the entire palette in sync.
Methodology
The editor normalizes the first valid input into an internal RGB triple, then derives the complementary codes with deterministic math. RGB is the reference for every conversion and is clamped to 0–255, so the UI never shows NaN or Infinity even when typing partial values.
- “Live preview” mirrors the current RGB source to show the true color you are working with.
- Contrast blocks paint the text on white and black to highlight accessibility differences.
- Tints and shades are generated with fixed proportions to keep lighting increments predictable.
Full original guide (expanded)
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.