Color Converter
Convert a color between HEX, RGB, HSL and CMYK with live preview (desktop has live preview)
HEX
#
RGB
R
G
B
HSL
H
S
L
CMYK
C
M
Y
K
Tip: drag channel letters left/right to fine‑tune
Preview
🚀 Quick Start
- Pick or input: type any supported format (#1E90FF, rgb(30,144,255), hsl(210,100%,56%)) or use a color picker
- Auto conversion: entering any format updates all other formats instantly
- Copy: use the copy button next to each format to get a standardized string
📌 Common Scenarios
- Design handoff: convert HEX from design files to CSS RGB/HSL for development
- Style guide: unify color formats and writing style across a component library
- Print reference: convert screen color to CMYK as a first estimate (proofing still required)
- Accessibility: use preview for quick contrast sense (use a dedicated tool for precise ratios)
🎛️ Conversion Parameters & Display
- Input rules: HEX supports only 6 digits (no alpha); RGB 0–255; H 0–360; S/L 0–100; CMYK 0–100. Input is case‑insensitive
- Preview: desktop shows a live preview on the right; mobile runs a lightweight mode without preview
- Color picker: click the palette button at the top‑right of each card to open the picker
- HEX uppercase policy: output is normalized to uppercase (e.g. #1E90FF); input is case‑insensitive; no case toggle
- Fine‑tune: drag channel letters left/right (Shift×10, Alt÷0.1)
- Copy output: the copy button outputs standardized strings (HEX uppercase)
🧭 Usage Advice
- Precision: device/display management varies; eyedropper values may differ slightly across apps
- Alpha: current formats do not include alpha; use rgba()/hsla() or a separate alpha value
- Color space: the web defaults to sRGB; verify carefully in P3/Display‑P3 workflows
- Team consistency: agree on a canonical format in CSS (e.g. HSL)
⚠️ Risks & Limitations
- Device variance: different monitors/browsers/OS color‑manage differently; visuals may vary
- CMYK is approximate: values are an estimate only; serious print work requires ICC profiles and workflow
- No alpha: this tool does not process transparency
🔒 Privacy & Security
- All processing happens in your browser; data never leaves your device
- No persistence: inputs/history are cleared when you close the page unless you explicitly save
❓ FAQ
Is #RGB shorthand supported?
Not supported; please use 6‑digit HEX (#RRGGBB).
What are the ranges for RGB and HSL?
RGB is 0–255 (integers); H is 0–360, S/L are 0–100%
Why does CMYK differ from the final print?
CMYK depends on paper, ink, device and ICC setup; values here are approximations—proofing is required
Does it support alpha (rgba()/hsla())?
Not supported at the moment; use rgba()/hsla() or keep alpha separately.
Why do preview or converted values differ from design apps/browsers?
Differences in color management, rendering and screen calibration. This tool computes in sRGB; results are for reference.
Is wide‑gamut (P3/Display‑P3) supported?
Currently sRGB‑based; for P3 workflows, verify with the target device and ICC profiles.
Can I convert CMYK back to HEX/RGB?
Supported, but CMYK→screen color is only an approximation; serious print work requires ICC and proofing.