Why Color Formats Matter
Color appears simple on the surface: you see it, you pick it, you use it. But professional design work constantly runs into a frustrating problem — the same color has different representations depending on where you're using it, and choosing the wrong format makes your workflow harder than it needs to be.
HEX: The Web Standard
Hexadecimal color codes like #667eea are the most common format in web development. They encode red, green, and blue values (0–255) as two-digit hex numbers concatenated into a six-character string. The format is compact, easily copyable, and universally supported in CSS, HTML, and design tools.
When all three pairs are identical digits, the code can be shortened: #ffffff becomes #fff. This shorthand works in all major browsers and preprocessors.
RGB: Transparency and Programmatic Control
RGB (and its variant RGBA) becomes the preferred format when you need transparency or when you're calculating colors programmatically. rgba(102, 126, 234, 0.5) gives your color 50% opacity — impossible to express directly in HEX (though HEX does support an 8-character form like #667eea80 that few developers know about).
HSL: The Palette Builder's Secret Weapon
HSL (Hue, Saturation, Lightness) is the most human-readable color format. Hue is an angle (0–360°) on the color wheel. Saturation is how vivid the color is. Lightness is how light or dark.
This makes palette creation trivially easy. To create 10 shades of the same hue for a design system:
- Keep H and S the same
- Set L to: 10, 20, 30, 40, 50, 60, 70, 80, 90, 95
- You now have a complete 10-step color scale
Accessibility: Contrast Ratios
WCAG 2.1 AA accessibility standards require a 4.5:1 contrast ratio between text and its background for normal-sized text, and 3:1 for large text. Before finalizing any color combination in your UI, test the contrast ratio. Failed contrast ratios are one of the most common accessibility violations in web design.
| Standard | Normal Text | Large Text (18pt+) |
|---|---|---|
| WCAG AA | 4.5:1 | 3:1 |
| WCAG AAA | 7:1 | 4.5:1 |
Why do colors look different in print vs screen?
Screens use the RGB (additive light) model. Printers use CMYK (subtractive ink). The same HEX color can look noticeably different when printed. For print-accurate color work, convert to CMYK in a professional tool like Adobe Illustrator or InDesign.
What does the eyedropper tool actually do?
The eyedropper uses your browser's EyeDropper API to sample pixel colors from anywhere on your screen — not just the browser window. It reads the exact RGB values of any pixel and converts them to all three formats instantly.