How to Use Color Converter

Use the color picker — Click the color swatch to open the native color picker and select any color.

Click a quick color swatch — Choose from the preset palette for common colors used in design.

Type any format — Enter a HEX, rgb(), or hsl() value in the text box and it auto-converts.

All 5 formats update instantly — HEX, RGB, HSL, HSV and CMYK are all shown simultaneously.

Copy any format — Click the copy icon next to any color format row to copy it to clipboard.

Color Converter — Convert Between HEX, RGB, HSL, and More

Designers and developers work with color in different formats depending on the context. CSS might need a hex code, a design tool needs RGB, and a color theory discussion uses HSL. Converting between them by hand involves formulas that are easy to get wrong. This converter handles the math instantly — paste any color format and get all the equivalents at once.

Color formats explained

HEX (#RRGGBB): The most common format in web development. A 6-character hexadecimal string where the first two characters are red, the next two are green, and the last two are blue. Values go from 00 (no color) to FF (full intensity). For example, #FF0000 is pure red, #000000 is black, #FFFFFF is white.

RGB (Red, Green, Blue): Three numbers from 0 to 255 representing the intensity of each color channel. rgb(255, 0, 0) is pure red. This is the format used in CSS color properties and in many design tools' color pickers.

RGBA: RGB with an additional alpha (opacity) channel, from 0 (fully transparent) to 1 (fully opaque). rgba(255, 0, 0, 0.5) is red at 50% opacity.

HSL (Hue, Saturation, Lightness): A more intuitive format for humans. Hue is the base color (0–360 degrees on a color wheel: 0/360 is red, 120 is green, 240 is blue). Saturation is how vivid the color is (0% is grey, 100% is fully vivid). Lightness is how light or dark it is (0% is black, 100% is white). HSL is much easier to adjust manually — to make a color lighter, just increase the lightness value.

HSLA: HSL with an alpha channel for transparency.

CMYK: Cyan, Magenta, Yellow, Key (Black) — the format used in print design and professional printing. Web browsers work in RGB/HEX, but if your design will go to print, you need CMYK values for the printer.

Common use cases

Front-end development: You have a hex color from a Figma design file and need to write CSS. Or you're reading a CSS file and want to visualise what hsl(210, 50%, 40%) looks like. Convert in either direction and see the color preview.

Brand color consistency: Your brand guidelines specify a color in one format, but different tools need it in different formats. Convert your brand color once and keep all format variants handy for reference.

Design handoff: When designers hand off to developers, color codes sometimes get transcribed incorrectly. Verify that the color code you received produces the expected visual color by checking the preview here.

Print preparation: If you designed something in RGB for screen and need to prepare it for offset printing, convert to CMYK and check the values. Note that the conversion is approximate — screen and print gamuts differ, and some bright screen colors don't reproduce accurately in print.

Accessibility checking: When adjusting foreground and background colors for contrast, HSL is the most intuitive format for making incremental lightness adjustments while keeping the hue the same.

Tips

When working with brand colors, save the HSL version as your reference. To create a lighter tint, increase the lightness while keeping hue and saturation the same. To create a darker shade, decrease the lightness. This gives you a consistent color palette without guessing.

HEX values are case-insensitive — #FF0000 and #ff0000 are identical. Most tools accept either.

3-character HEX codes (#RGB) are shorthand for 6-character codes where each character repeats — #F00 is the same as #FF0000. This converter accepts both forms.

Limitations

CMYK conversion from RGB is an approximation. The actual CMYK values for professional printing depend on the specific printer profile (ICC profile) being used. For print production work, use professional tools like Adobe Illustrator or consult your printer's color management guidelines. The CMYK values here are useful for reference but shouldn't be used as final print values without verification.

This tool converts between the standard mathematical representations of colors. It doesn't handle color names (like "tomato" or "cornflowerblue") as inputs — use the HEX or RGB value instead.

Frequently Asked Questions

HEX, RGB, HSL, HSV, and CMYK — all major formats used in web design, UI design, and print publishing.

Yes. Type HEX like #FF5733, or rgb(255,87,51), or hsl(11,100%,60%) in the text box and it automatically converts all other formats.

Cyan-Magenta-Yellow-Key (Black) — a color model used in print design and publishing. Unlike RGB which adds light, CMYK subtracts from white.

Yes. All conversions use standard color math formulas with proper rounding. The results match values produced by professional design tools like Figma and Photoshop.