Answer: The Color Converter produces your output instantly from the input you provide — everything runs in your browser, free, with no signup required.
Convert between HEX, RGB, HSL, CMYK — with palette generator
Digital colors are usually written in one of a few standardized notations, and each carries different information. HEX and RGB define exact amounts of red, green, and blue light. HSL describes the same color in human terms: hue (position on the color wheel), saturation (colorfulness), and lightness. CMYK describes printed ink percentages. This converter translates between all four in real time so you can copy CSS-ready values without doing channel math by hand.
In CSS, these correspond to the #rrggbb hex notation and the rgb(), hsl(), and (for print-oriented contexts) cmyk-style functions supported by design tools. Values are interconvertible: RGB and HSL are two views of the same RGB color space, while CMYK is device-dependent and should be treated as an approximation of what a printer will produce.
RGB uses three channels from 0 to 255 (or 0% to 100% in CSS functional notation). HEX is simply those same three channel values written in hexadecimal: #FF5733 means R=255, G=87, B=51. HSL remaps the same color: hue is a 0–360 degree angle around the color wheel (0° red, 120° green, 240° blue), and saturation and lightness are percentages. Lightness 0% is always black and 100% is always white regardless of hue.
CMYK expresses color as percentages of cyan, magenta, yellow, and key (black) ink. A simple conversion uses the relations C = 1 − R/255, M = 1 − G/255, Y = 1 − B/255, and K = min(C, M, Y), then rescales the remaining channels. This ignores ICC color profiles, so professional print work should use a profile-aware tool.
The table below shows one example color expressed in every format this page supports, plus what each channel means.
| Format | Example (same color) | Channels |
|---|---|---|
| HEX | #FF5733 | Red, green, blue as hexadecimal 00–FF |
| RGB | rgb(255, 87, 51) | Three channels, each 0–255 |
| HSL | hsl(11, 100%, 60%) | Hue 0–360°, saturation %, lightness % |
| CMYK | cmyk(0%, 66%, 80%, 0%) | Cyan, magenta, yellow, key ink % |
Modern CSS accepts both legacy syntax like rgb(255, 87, 51) and space-separated syntax like rgb(255 87 51), and hsl() likewise accepts hue as a plain number: hsl(11, 100%, 60%). Hex remains the most compact and universally supported notation. When you copy values from this page you get syntax that pastes straight into a stylesheet.
For accessibility, remember that contrast depends on lightness much more than hue. WCAG 2.1 requires a contrast ratio of at least 4.5:1 for normal body text (3:1 for large text) against its background, so when picking a text color, compare the luminance of foreground and background rather than judging by eye.
A related concept is the alpha channel: CSS supports #rrggbbaa hex and rgba()/hsla() notation, where alpha 0 is fully transparent and 1 fully opaque. Alpha does not change the color's identity, only how much of the background shows through, which is why converting a color between HEX, RGB, and HSL never touches opacity. Design systems often define a single brand hue and generate transparent overlays from it rather than precomputing dozens of tints.
Every color on this page lives in the sRGB color space, the default for the web defined by the W3C. Newer displays cover wider gamuts like Display-P3, which CSS can target with the color() function, and CSS Color 4 adds perceptually uniform spaces such as OKLCH where adjusting lightness changes perceived brightness evenly across hues. Converting between HEX, RGB, and HSL stays inside sRGB and never crosses gamuts — the values are three views of the same color.
Design tools often show HSB/HSV as well; it resembles HSL but brightness is defined differently — HSB brightness is the maximum RGB channel while HSL lightness is the midpoint of the maximum and minimum. A color at HSB brightness 100% can still be a dark tone in HSL terms. When following tutorials, check which model the numbers refer to before copying values.
Gradients and opacity work together in backgrounds: a common pattern is a semi-transparent black or white overlay on a photo, written rgba(0,0,0,0.5), so text stays readable regardless of the underlying image. Because the overlay is transparent, the computed contrast depends on the photo behind it — WCAG techniques recommend also checking the worst-case region of the image, not just one sample point, when accessibility matters.
How do I convert HEX to RGB manually?
Split the hex string into pairs: #FF5733 gives FF, 57, 33. Convert each pair from hexadecimal to decimal: FF=255, 57=87, 33=51, giving rgb(255, 87, 51).
Is CMYK conversion exact?
No. The arithmetic conversion used here (C=1−R/255, etc.) does not account for ICC color profiles or gamut differences between screens and printers. Treat CMYK output as an approximation and use a profile-aware design tool for print production.
What is the difference between HSL lightness and luminance?
HSL lightness is a simple average-based scale where 50% is the pure hue. Perceptual luminance is a weighted combination of the RGB channels (green contributing most) used for contrast calculations. Two colors with the same HSL lightness can differ in luminance.
Why does lightness 0% always give black in HSL?
Lightness 0% means zero light in every channel, so the color has no hue information left — it is black by definition. Similarly, 100% lightness is always white.
Does this converter upload my colors anywhere?
No. All conversions and the color picker run entirely in your browser.