🎨 Color Code Converter

Convert HEX to RGB, HSL, CMYK — with live color picker and complementary colors

HEX
#EC4899
RGB
rgb(236, 72, 153)
HSL
hsl(322, 81%, 60%)
CMYK
cmyk(0, 69%, 35%, 7%)
HSV
–
CSS Name
–
Complementary & Harmonious Colors:
Introduction

What is a Color Code Converter?

A color code converter is a tool that translates a color from one representation format to another. Colors on digital screens can be expressed in many formats — HEX codes (used in CSS and web design), RGB values (used in design software and programming), HSL (Hue-Saturation-Lightness, intuitive for designers), CMYK (used in print), and more. Each format represents the same color mathematically but in different ways suited for different workflows.

Calculator Expert's Color Code Converter supports all major formats and also shows complementary colors — colors that contrast or harmonize with your chosen color — which is essential for building color palettes.

Formula

Conversion Formulas

HEX → RGB: Parse each pair of hex digits as base-16 integer
#EC4899 → R=0xEC=236, G=0x48=72, B=0x99=153

RGB → HSL: Normalize R,G,B to 0–1. Find max/min.
L = (max+min)/2
S = (max-min)/(1-|2L-1|)
H = based on which channel is max

RGB → CMYK: K=1-max(R,G,B); C=(1-R-K)/(1-K); etc.
Chart

Color Format Comparison

HEX: Used in CSS, HTML — compact 6-digit code. RGB: Used in CSS, Photoshop, Illustrator — intuitive for screen design. HSL: Used in CSS3 — easiest for humans to adjust (change lightness without touching hue). CMYK: Used in professional print — defines ink percentages. HSV (also called HSB): Used in Adobe tools — Hue, Saturation, Brightness. Each format has its ideal use case; conversion between them is lossless for most cases.

Use Cases

Who Uses Color Converters?

Web developers converting design mockup colors (often in HSL/RGB) to CSS hex codes. Graphic designers converting brand colors between digital (RGB) and print (CMYK) formats. UI/UX designers checking contrast ratios between colors. Developers using CSS custom properties and needing multiple format representations. Photographers converting color profiles between different color spaces. Marketing professionals ensuring brand colors are consistent across digital and physical media.

Methods

Using the Color Picker

The visual color picker (the colored square on the left of the row) lets you select any color visually without knowing its code. Clicking it opens your browser's native color selection interface. Alternatively, type a hex code directly into the text field. All output formats update simultaneously when you pick a color or click Convert.

Ponderal Index

Color Theory: Complementary Colors

Complementary colors are colors that are opposite each other on the color wheel (180° apart in hue). They create strong visual contrast and are used together in design for high impact. Analogous colors (adjacent on the wheel) create harmonious, calm palettes. Triadic colors (120° apart) create vibrant, balanced designs. The complementary colors shown below the converter are generated by rotating the hue in HSL space by 30°, 60°, 120°, and 180°.

Guide

How to Use This Tool

Either use the color picker to select a color visually, or type a HEX code (#RRGGBB format) into the text field. Click Convert or press Enter. All color representations (HEX, RGB, HSL, CMYK, HSV) appear instantly. Click the Copy button next to any value to copy it to your clipboard. The complementary color swatches below let you click any color to load it into the converter.

Limitations

⚠️ Limitations

This tool converts within the sRGB color space. Colors outside sRGB (used in professional photography like P3 or AdobeRGB) may not convert accurately. CMYK values are approximate — actual print output depends on paper type, printer, and ink profiles. CSS color names are shown only for the 147 standard web colors; custom or near-miss colors show "–". Alpha (opacity) channel (RGBA, HSLA) is not included in this version.