Color Converter Online Free
Pick a color, use the screen eyedropper, or enter a HEX, RGB or HSL value and get every format instantly. Copy any format with one click.
Five color models, one shared RGB core
Every color format on this page, HEX, RGB, HSL, HSV, and CMYK, is really just a different way of describing the same three channel red, green, blue value. The converter keeps a single internal RGB object as its source of truth and derives every other format from it on demand with plain floating point math, entirely in your browser. Type a HEX code, adjust an HSL slider, or drop in a CMYK percentage, and everything downstream recalculates instantly.
The conversion math, briefly
1 - max(r,g,b) on a 0-1 scale. Cyan, magenta, and yellow are then each computed relative to the remaining brightness headroom after black is subtracted out. This is the standard subtractive-color approximation used for screen-to-print estimates, not a calibrated ICC profile conversion.
This is the exact hue interpolation function defined in the CSS Color Module and used by browsers themselves whenever they resolve an hsl() value to a pixel. There's no shortcut here, it's the same math every browser runs.
Format reference
| Format | Range | Best for |
|---|---|---|
| HEX | #000000 to #ffffff | CSS, design tools, quick sharing |
| RGB / RGBA | 0-255 per channel | Canvas, image processing, alpha blending |
| HSL / HSLA | Hue 0-360, S/L 0-100% | Adjusting lightness without shifting hue |
| HSV | Hue 0-360, S/V 0-100% | Color pickers, design software sliders |
| CMYK | 0-100% per channel | Rough print color estimate |
Extras built on the same math
WCAG contrast preview
Reuses the same relative luminance formula as the dedicated contrast checker to show your current color's best contrast ratio against pure black and white text.
Tints and shades
Generated by moving HSL lightness up or down in fixed steps of 10, 20, 35, 50, 65, and 80 percent while holding hue and saturation constant, which is why they stay recognizably the same color family.
Dark or light detection
Uses the same relative luminance number against a threshold of 0.179 to decide whether preview text should render in white or black for legibility.
- CSS Color Module Level 4, the specification defining HSL and HSV interpolation formulas.
- sRGB color space reference, the assumed color space for every RGB value this tool works with.
- CMYK color model background on the subtractive approximation used here.
Where each notation belongs
Pulling a HEX value from a designer's HSL spec into CSS, checking what a brand color looks like as a CMYK estimate before sending files to a print shop, generating a matching triadic palette for a chart legend, or converting a color picked from an image into the exact CSS variable syntax needed for a component library. Developers also use it to sanity check that a color picked in one tool renders identically once pasted into code.
HEX, RGB, HSL, HSV and CMYK: which format to use
HEX is the short form that browsers and design tools share. A value like #6366F1 is three pairs of hexadecimal numbers for red, green and blue, so it is ideal for CSS, brand guides and anywhere you paste a single color code.
RGB says the same thing in decimal, from 0 to 255 per channel. Reach for it when a color needs transparency, because rgba() adds an alpha channel that HEX only supports in its longer eight digit form.
HSL describes hue, saturation and lightness. It is the easiest format to adjust by hand: keep the hue, lower the lightness, and you get a darker shade of the same color. That makes it the best choice for hover states and full color scales in a design system.
HSV is close to HSL but models brightness differently. Most color pickers, including the one above, are drawn in HSV, which is why the square fades from white to the pure color along one edge.
CMYK is for print. Screens add light and printers subtract ink, so a bright blue on screen rarely prints the same. Treat the CMYK values as a starting point for your printer, not a promise, and ask for a proof.
Because this color converter shows every format at once, you can pick a color in one model and copy the value another tool needs without converting anything by hand.
Questions About the Color Converter
Yes. Free with no signup, no ads in the tool and no data sent anywhere.
Yes. Pick the RGB, HSL, HSV or CMYK tab and type the values, or paste any CSS color such as rgb(99, 102, 241) or hsl(239, 84%, 67%) into the main field.
RGB defines color as red, green and blue light values (0-255). HSL defines it as hue (0-360 degrees), saturation (0-100%) and lightness (0-100%). HSL is easier to reason about for adjusting colors.
Yes. Enter an 8 digit code like #6366F180 or use the opacity slider. The tool shows the 8 digit HEX, RGBA and HSLA values with the same transparency.
Use our separate Color Contrast Checker tool. It tests your foreground and background colors against WCAG AA and AAA standards.
From the blog
Notes on images and colour
Format choices, compression tradeoffs and accessible palettes.
