Color Code Converter

HEX, RGB, HSL and CMYK explained

The same color can be written several ways depending on where you use it. <strong>HEX</strong> joins the red, green and blue channels as two hex digits each (like #ff0000) and is the format CSS and most design tools expect. <strong>RGB</strong> writes the same color as three integers from 0 to 255, mirroring how screens add light to make color. <strong>HSL</strong> splits color into hue (0–360°), saturation and lightness (both percentages), which is far more intuitive when you want to tweak a color by hand. <strong>CMYK</strong> describes color as ratios of cyan, magenta, yellow and black ink for print. This tool converts all four in real time, so a HEX handed over by a designer becomes RGB for a developer, or a screen color becomes a CMYK reference for print. Enter one value and the other three are calculated automatically, removing the errors that come from converting codes by hand.

Pick, paste or eyedrop a color

There are three ways to choose a color here. Open the built-in <strong>color picker</strong> and click or drag inside the palette; paste a value you already know into the HEX, RGB, HSL or CMYK field; or, on recent Chromium browsers, use the <strong>EyeDropper</strong> button to sample any pixel on your screen — a web page, an image, even another app. Whatever you pick is instantly shown in all four notations, and a copy button drops the format you need straight into CSS or a design file. Paste #3366cc, for example, and you immediately see rgb(51, 102, 204), hsl(220, 60%, 50%) and cmyk(75, 50, 0, 20). If your browser lacks EyeDropper support the button is disabled, and the picker or manual entry works everywhere.

Shape colors with HSL

HSL shines when you refine a color. Change only the <strong>hue</strong> to rotate from red to orange to green while keeping brightness and saturation fixed — perfect for building a family of matching tones. Lower the <strong>saturation</strong> to fade toward gray, or raise it for a punchier color. Raise the <strong>lightness</strong> toward white or lower it toward black to derive light and dark variants of one color — ideal for button default/hover states or chart shading. From hsl(220, 60%, 50%), dropping lightness to 30% gives a deep navy while 70% gives a soft sky blue. Adjust one HSL value, convert back to HEX or RGB here, and you have a consistent palette ready for a design system.

Why CMYK is only a guide

HEX, RGB and HSL all describe screen light, so they convert to each other exactly. <strong>CMYK is different.</strong> The CMYK shown here is a simple formula with no color management (no ICC profile), so treat it as an <strong>approximate reference</strong>. Real print results shift with the ink, the paper and its absorbency, the press and the proofing method. Bright, saturated blues and greens that glow on screen often fall outside the CMYK gamut and print duller. For color-critical work — business cards, brochures, packaging — use these numbers as a starting point only and confirm the final color with a physical proof or color chip from your printer to avoid costly reprints.

Frequently asked questions