Color Converter (HEX, RGB, HSL, CMYK)
Type or paste a color in any common format — HEX, RGB, HSL or CMYK — and get every other format instantly. Fine-tune it with sliders, set opacity, and pick lighter or darker shades.
HEX
#4f46e5
RGB
rgb(79, 70, 229)
RGB (CSS Color 4)
rgb(79 70 229)
HSL
hsl(243, 75%, 59%)
HSV / HSB
hsv(243, 69%, 90%)
CMYK
cmyk(66%, 69%, 0%, 10%)
Lighter and darker shades
One color, every format
The same color gets written in different ways depending on where it’s used. Designers hand off HEX codes, CSS can use rgb() or hsl(), design apps show HSV sliders, and print shops talk in CMYK. This converter accepts a color in any of these formats and shows all the others at once, so you can copy exactly what you need without doing the math.
How to use the color converter
- Type or paste a color — for example
#4f46e5,rgb(79, 70, 229),hsl(243, 75%, 59%)orcmyk(66%, 69%, 0%, 10%). - Or click the color swatch to use your system’s color picker.
- Copy any output with its Copy button.
- Use the sliders to fine-tune red, green, blue and opacity.
- Click a shade in the strip at the bottom to jump to a lighter or darker version.
The color formats explained
- HEX writes red, green and blue as two hexadecimal digits each, from 00 to FF. Three-digit shorthand like
#abcexpands to#aabbcc, and an optional fourth pair sets transparency. - RGB gives the same three channels as numbers from 0 to 255. Modern CSS also accepts the space-separated form
rgb(79 70 229 / 0.5). - HSL describes hue (0–360° around the color wheel), saturation and lightness. It’s the easiest format for building variations: keep the hue, change the lightness.
- HSV / HSB uses hue, saturation and value (brightness). It’s what the color pickers in Photoshop, Figma and many apps show.
- CMYK describes the cyan, magenta, yellow and black inks used in printing.
A note on CMYK accuracy
Screens mix light (RGB) while printers mix ink (CMYK), and many bright screen colors can’t be printed exactly. The CMYK values here use the standard mathematical formula, which is fine for rough matching and quick references. For professional print jobs, convert colors in design software using the ICC profile your printer provides, and ask for a proof — the same CMYK numbers can look different on different presses and papers.
Working with transparency
Colors can include an alpha channel for transparency. Enter an eight-digit HEX code, rgba() or hsla(), or use the opacity slider, and the alpha value carries through to every format that supports it. The checkerboard behind the preview shows how see-through the color is.
Want to build a palette from a photo instead? Try the Color Palette from Image tool. You can also shrink SVG icons with the SVG Optimizer or create a matching favicon.
Frequently asked questions
How do I convert HEX to RGB?
Split the six-digit HEX code into three pairs and convert each from base 16 to base 10. For #4F46E5: 4F = 79, 46 = 70, E5 = 229, so it's rgb(79, 70, 229). The converter does this instantly.
What's the difference between HSL and HSV?
Both describe color by hue and saturation. HSL uses lightness, where 50% is the pure color and 100% is white. HSV (also called HSB) uses value or brightness, where 100% is the brightest version of the color. Design apps often use HSV; CSS uses HSL.
Is the CMYK value accurate for printing?
It's a standard mathematical conversion, good for rough matching. Real print colors depend on the printer, ink and paper, which are described by an ICC color profile. For professional print work, convert in design software using your printer's profile.
Can I convert colors with transparency?
Yes. Enter an 8-digit HEX code such as #4F46E580, or rgba() / hsla(), or use the opacity slider. The alpha value is carried through to HEX, RGB and HSL outputs.
Which color format should I use in CSS?
All modern browsers support HEX, rgb() and hsl(). HEX is compact and common in design handoffs, while hsl() makes it easy to create lighter and darker variations of a color by changing one number.