Color Converter — HEX to RGB, HSL & CMYK Online
Convert a color between HEX, RGB, HSL, and CMYK and edit any channel live. Free, no signup, and runs 100% in your browser.
Click the color swatch above to open system picker
Color Values
EditableRGB
HSL
CMYK
Features
All Major Formats
Convert between HEX, RGB, HSL, and CMYK instantly
Real-time Visualization
See your color changes instantly as you adjust values
Visual Color Picker
Intuitive color picker for easy selection
One-Click Copy
Copy any color code format with a single click
No Registration
100% free - no signup or account required
Privacy Focused
All conversions happen locally in your browser
Color Converter: HEX to RGB, HSL & CMYK
A color converter turns one color notation into the others. Type a HEX code, RGB triplet, or HSL value and read back the matching HEX, RGB, HSL, and CMYK. RGB and HSL channels are editable both ways; CMYK is a read-only print estimate. It runs 100% in your browser, free, with no upload.
How to convert a color
- Enter a HEX code (3 or 6 digits, with or without the
#) such as#007BFF, or use the color picker swatch. - Read the matching RGB, HSL, and CMYK values, which update the moment your input is valid.
- Fine-tune any Red/Green/Blue or Hue/Saturation/Lightness channel — every other format re-syncs instantly.
- Click Random Color to generate a fresh 6-digit HEX, or Copy to send any format string to your clipboard.
- Paste the result into your CSS, design file, or print spec.
How HEX maps to RGB bytes
A HEX color is a base-16 shorthand for three sRGB bytes. The tool strips the leading #, expands any 3-digit shorthand by doubling each digit (#F00 → #FF0000), then parses the 6 characters as one integer and pulls each byte out with bit shifts: r = (n >> 16) & 255, g = (n >> 8) & 255, b = n & 255. Each pair spans 00–FF, i.e. 0–255, so FF = (15×16) + 15 = 255. Per the W3C CSS Color Module Level 4 and MDN's <hex-color> reference, each pair of digits is one sRGB component, and an optional 4th pair (#RRGGBBAA) encodes alpha.
HSL (hue 0–360°, saturation and lightness 0–100%) is a cylindrical transform of the same sRGB values — useful because you can shift lightness for a hover state without re-picking a hue. CMYK is computed with the standard subtractive formula where K = min(C, M, Y); it is a naive math estimate, not an ICC-profiled proof. Because the sRGB screen gamut is wider than CMYK, vivid screen colors can print duller.
Worked examples: HEX → RGB → HSL → CMYK
#007BFF (the default)
rgb(0, 123, 255) · hsl(211, 100%, 50%) · cmyk(100%, 52%, 0%, 0%)
#FF5733 (a warm orange)
rgb(255, 87, 51) · hsl(11, 100%, 60%) · cmyk(0%, 66%, 80%, 0%)
#F00 (3-digit shorthand)
Expands to #FF0000 → rgb(255, 0, 0) · hsl(0, 100%, 50%) · cmyk(0%, 100%, 100%, 0%)
Edge case · 8-digit alpha HEX
#FFFFFF80 (white at 50% alpha) is rejected as invalid. The validator regex /^#?([0-9A-F]{3}){1,2}$/i accepts only 3 or 6 hex digits, so 4- and 8-digit alpha codes don't parse. This tool works on opaque colors only — strip the trailing alpha pair before converting.
Reference: common colors across formats
Every row below was produced by this tool's own HEX→RGB→HSL→CMYK pipeline. Gray and pure black are useful edge cases: with no saturation, hue is reported as 0, and a neutral gray pushes all its ink into the K (black) channel.
| Color | HEX | RGB | HSL | CMYK |
|---|---|---|---|---|
| Brand blue | #007BFF | rgb(0, 123, 255) | hsl(211, 100%, 50%) | cmyk(100%, 52%, 0%, 0%) |
| Sky blue | #3498DB | rgb(52, 152, 219) | hsl(204, 70%, 53%) | cmyk(76%, 31%, 0%, 14%) |
| Teal | #1ABC9C | rgb(26, 188, 156) | hsl(168, 76%, 42%) | cmyk(86%, 0%, 17%, 26%) |
| Mid gray (edge) | #808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) | cmyk(0%, 0%, 0%, 50%) |
| Black | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) | cmyk(0%, 0%, 0%, 100%) |
The conversion that doesn't round-trip
HEX, RGB, and HSL all describe the same opaque sRGB point, so converting among them is lossless and reversible. CMYK is the exception. RGB→CMYK here uses pure math (each channel rounded to a whole percent), which is why CMYK is shown read-only — editing it back to RGB through different ink/paper profiles wouldn't land on the same screen color. A real press uses an ICC profile, so treat the CMYK output as a starting estimate, not a proof.
A second gotcha: alpha. CSS Color Module 4 added #RRGGBBAA where the last byte is opacity (00 = transparent, FF = opaque), but this converter rejects 4- and 8-digit HEX entirely. If you need a translucent color, build the opaque HEX here first, then append the alpha pair (or switch to rgba()) in your stylesheet.
Converting for accessible contrast
Before shipping a color, check it against its background. The WCAG 2.2 Contrast (Minimum) criterion requires a ratio of at least 4.5:1 for normal text and 3:1 for large text at Level AA. A failing example: mid gray #808080 on white scores about 3.9:1 — it passes for large headings but fails for body text. Dropping HSL lightness from 50% toward 40% raises the ratio above 4.5:1. Run the exact numbers in the color contrast checker.
Runs 100% in your browser
Your color values never leave your device. Conversion is plain JavaScript — bitwise parsing for HEX and the standard HSL/CMYK formulas — and copying uses your browser's native clipboard, with no uploads, tracking, or ads. I tested the round-trip on 3- and 6-digit HEX, edited RGB and HSL channels live, confirmed #FFFFFF80 is refused, and verified every value in the reference table against the tool's own output. Editing a channel re-syncs the other formats instantly.
Frequently asked questions
Is this color converter free?
Yes — 100% free with no signup and no usage cap. The color values are free to use in personal and commercial projects.
Can I edit HSL or RGB and get HEX back?
Yes. RGB and HSL are bidirectional and editable: change any channel and HEX re-syncs instantly. CMYK is read-only because RGB→CMYK is lossy.
Does it support #RRGGBBAA alpha codes?
No. Only 3- or 6-digit opaque HEX is valid; 4- and 8-digit alpha codes such as #FFFFFF80 are rejected. Add the alpha byte in your CSS after converting.
Why does CMYK look different in print?
The sRGB screen gamut is wider than CMYK ink, so vivid colors print duller. This CMYK is a naive math estimate (K = min(C, M, Y)), not an ICC-profiled proof — ask your printer for a calibrated profile.
Related color & design tools
Pick a HEX from a visual swatch
Color Contrast CheckerTest WCAG 4.5:1 against a background
Color MixerBlend two colors into a midpoint
Color Palette GeneratorBuild harmonious schemes from one color
CSS Gradient GeneratorChain your HEX stops into a gradient
CSS Filter GeneratorTune hue, saturate & brightness filters
Glassmorphism GeneratorFrosted-glass cards with rgba tints
Border Radius GeneratorRound corners for the same component
All ToolsBrowse the full Toolk utility hub
Guide: HEX, RGB, HSL & OKLCHRead the full color formats guide
Last updated: June 2, 2026 · Runs 100% in your browser — no uploads, nothing leaves your device.
Need a different tool?
Browse all 89 free, in-browser tools — or tell us what we should build next.