Color Converter
Click a shade to load it:
Convert Colors Between HEX, RGB, HSL, and CMYK
Color codes look like arbitrary strings until you understand the system behind each format. Each format describes the same color from a different angle — HEX for web development, RGB for digital screens, HSL for intuitive design work, and CMYK for print production. This converter moves between all four instantly.
How to Use This Calculator
Enter a HEX color code (e.g. #3B82F6) or use the color picker to choose visually. Hit Convert Color to see the equivalent values in all four formats plus complementary color, brightness, and contrast ratio against white.
The Four Color Formats
- HEX (#RRGGBB) — six hexadecimal digits representing Red, Green, and Blue channels (00–FF each). Used in HTML, CSS, and web design. #3B82F6 = R:59, G:130, B:246.
- RGB (R, G, B) — three channels from 0–255 each. The native format of digital screens. rgb(59, 130, 246) is the same blue.
- HSL (Hue, Saturation, Lightness) — describes color in human-intuitive terms. Hue (0–360°) is the color wheel position, Saturation is vibrancy (0–100%), Lightness is brightness (0–100%). hsl(217, 91%, 60%) for the same blue.
- CMYK (Cyan, Magenta, Yellow, Key/Black) — the subtractive color model used in printing. Values 0–100% for each ink. CMYK(76%, 47%, 0%, 4%) approximates our blue in print.
Web Accessibility and Contrast
The WCAG 2.1 accessibility guidelines define contrast ratios for readable text:
- AA standard: 4.5:1 contrast for normal text, 3:1 for large text (18pt+ or 14pt bold)
- AAA enhanced: 7:1 for normal text, 4.5:1 for large text
The calculator shows your color's contrast ratio against white. Light colors on white backgrounds frequently fail AA — check the ratio before using a color for body text. Dark backgrounds with light text often have excellent contrast.
Using HSL for Design Work
HSL is the most designer-friendly format because each axis is independent and meaningful: change the Hue number to shift to a related color family, adjust Saturation to make a color more vivid or muted, and change Lightness to create tints and shades. A monochromatic palette is simply the same Hue at several different Lightness values — always harmonious by definition.
Frequently Asked Questions
Why does CMYK look different from RGB for the same color?
RGB is an additive color model (light-based) while CMYK is subtractive (ink-based). The RGB color gamut is larger — it can represent many colors (especially bright, saturated ones) that CMYK inks cannot physically reproduce on paper. This is why designs often look more vibrant on screen than in print. The conversion is an approximation.
What does the complementary color mean?
The complementary color is directly opposite on the color wheel — 180° away in hue. Complementary pairs (like blue and orange, or red and green) create maximum visual contrast when used together. They're the basis of many high-impact design color schemes.
Can I use this to pick accessible text colors?
Yes — enter your background color and note the contrast ratio against white shown in the results. If your background is dark, flip the question: enter your proposed text color and see if its contrast against your background meets 4.5:1. For the reverse calculation, you'd test the text color's contrast against your specific background color.
What are analogous and triadic color schemes?
Analogous colors are adjacent on the color wheel (within 30°) — harmonious and natural-feeling. A blue-green-teal palette is analogous. Triadic colors are evenly spaced 120° apart — vibrant and balanced. The classic red-yellow-blue primary triad is the most familiar example. In HSL, analogous colors share a similar Hue value, while triadic schemes have Hues exactly 120° apart. The complementary color shown in results is 180° from your input hue.
How do I find the hex code for a color I see on screen?
Use a color picker browser extension (ColorZilla for Chrome/Firefox) or the built-in color picker in Figma, Photoshop, or most design tools. On Mac, the Digital Color Meter app (in Applications/Utilities) shows the hex value of any pixel under your cursor. On Windows, PowerToys Color Picker does the same. For grabbing colors from any website, "Inspect Element" in Chrome DevTools shows all CSS color values directly.