Color Code Converter

How to Use the Color Code Converter

1. Use the color picker to visually choose a color, or type a known HEX code (e.g., #3498db) directly into the HEX field.

2. You can also type an RGB value (e.g., rgb(52, 152, 219)) into the RGB field — all other values update automatically.

3. The HEX, RGB, HSL, and CMYK values for your color update instantly. The color preview bar shows the selected color.

4. Click Copy HEX, Copy RGB, or Copy HSL to copy the desired format to your clipboard.

Color Code Formats Explained

• HEX (#RRGGBB): Hexadecimal color codes are the most common format in web development. Each pair of digits represents red, green, and blue values from 00 to FF. Used in CSS, HTML, and most design software.
• RGB (0–255, 0–255, 0–255): Red, Green, Blue values from 0 to 255. Used in CSS, JavaScript, and digital color management.
• HSL (0–360°, 0–100%, 0–100%): Hue, Saturation, Lightness. More intuitive than HEX or RGB for creating color variations — adjust saturation or lightness while keeping the same hue.
• CMYK (0–100% each): Cyan, Magenta, Yellow, Key (black). Used in print design and press publishing. Not natively supported in CSS.

Which Format Should I Use in CSS?

For most web development, HEX codes are the standard. For dynamic color manipulation in JavaScript, HSL is often preferred since adjusting lightness or saturation is straightforward. RGB with an alpha channel (RGBA) is used for transparency. Modern CSS also supports the oklch() and color() functions for broader color gamuts.