Free Color Code Converter

1. Pick or enter a color. Use the HTML color picker to select a color visually, or type a value directly into any of the four format fields: HEX, RGB, HSL, or CMYK.

2. Watch all formats update. When you change any field, all other formats update instantly. The live swatch shows your current color so you can verify it visually.

3. Check contrast. The contrast checker shows your color's ratio against white and black backgrounds with WCAG AA and AAA pass/fail labels for both normal and large text sizes.

4. Copy your code. Click the Copy button next to any format to copy it to your clipboard, ready to paste into your CSS, design tool, or documentation.

Colors on screens and in print use different mathematical models to describe the same visual experience. Understanding these models helps you choose the right format for your project and ensures your colors look correct across devices and media.

RGB and HEX are the most common formats in web development. RGB defines colors by mixing red, green, and blue light at intensities from 0 to 255. HEX is simply a compact hexadecimal encoding of those same three values. A HEX code like #3B82F6 means 3B (59) red, 82 (130) green, and F6 (246) blue. Because monitors emit light, RGB is an additive color model: mixing all three channels at full intensity produces white.

HSL (Hue, Saturation, Lightness) was designed to be more intuitive for humans. Hue is the color angle on the color wheel (0 is red, 120 is green, 240 is blue). Saturation controls how vivid the color is, and lightness controls how bright it is. Designers often prefer HSL because adjusting lightness or saturation is more predictable than tweaking individual RGB channels. CSS natively supports hsl() syntax, making it easy to build dynamic color palettes by rotating the hue value.

CMYK (Cyan, Magenta, Yellow, Key) is a subtractive model used in printing. Unlike RGB, which starts from black and adds light, CMYK starts from white paper and subtracts light using ink. The Key channel (black) exists because mixing cyan, magenta, and yellow ink produces a muddy brown rather than true black. When preparing files for professional printing, converting your screen colors to CMYK helps avoid surprises. Colors that look vibrant on screen may appear duller in print because CMYK has a smaller color gamut than RGB.

Accessibility matters. Beyond choosing the right format, the contrast between text and background is critical for readability. The WCAG 2.1 standard defines minimum contrast ratios to ensure content is accessible to people with low vision or color blindness. Using a contrast checker during design prevents costly fixes later and makes your content usable by everyone.