Color Converter: HEX, RGB and HSL
Convert a color between supported formats such as HEX, RGB, and HSL. Use equivalent values when moving between design tools and CSS.
Color Converter workspace
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
Convert a color between supported formats such as HEX, RGB, and HSL. Use equivalent values when moving between design tools and CSS. A color notation is a way to describe a color, not a contrast or accessibility rating. Check rounding when transferring values between formats. If transparency is involved, evaluate the composited color against its actual background.
How to use the color converter
- 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.
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: September 15, 2026 · Runs 100% in your browser — no uploads, tool input is not sent to Toolk.
Frequently asked questions
Can I edit the RGB or HSL values and get HEX back?
Yes — RGB and HSL are fully editable in both directions, and every other format re-syncs the moment a channel changes. CMYK is deliberately read-only because the RGB-to-CMYK step rounds to whole ink percents and cannot round-trip back to the same screen color.
Why is my 8-digit HEX code like #FFFFFF80 rejected?
The validator accepts only 3- or 6-digit opaque HEX, so 4- and 8-digit alpha codes fail with an error instead of silently dropping the alpha byte. Convert the opaque base here first, then append the alpha pair or switch to rgba() in your stylesheet.
Why does the CMYK value look different when printed?
The sRGB screen gamut is wider than CMYK ink, so vivid screen colors print duller. The CMYK output here uses the naive K = min(C, M, Y) formula as a starting estimate — a real press proof requires an ICC profile from your printer.
Do the colors I enter get sent to a server?
No. Parsing and conversion run locally in your browser via bit shifts and standard formulas, and Toolk's page analytics do not receive the values you type. Tool input is not sent to Toolk.
How do I make sure my converted color passes accessibility?
Take the converted HEX into the Color Contrast Checker at /tools/color-contrast-checker — normal body text needs a 4.5:1 ratio against its background at AA, which usually means nudging HSL lightness down rather than changing hue.