How This Calculation Works
This calculator converts a color between four common representation systems. HEX uses six hexadecimal digits (00–FF per channel) preceded by #. RGB defines red, green, and blue from 0 to 255. HSL describes hue in degrees (0–360), saturation, and lightness as percentages. CMYK is the subtractive print model with cyan, magenta, yellow, and black.
The contrast checker calculates the relative luminance ratio between two colors per WCAG 2.1. A ratio of 4.5:1 meets AA for normal text; 3:1 for large text (≥18pt or ≥14pt bold). AAA requires 7:1 for normal text and 4.5:1 for large.
Common Mistakes to Avoid
- Assuming screen colors match print. RGB/HEX are additive models (screen). CMYK is subtractive (ink). The conversion is an approximation and printed colors can differ noticeably.
- Ignoring accessibility contrast. Text that looks fine to you may be unreadable for people with low vision. Always check the contrast ratio to meet at least WCAG AA.
- Confusing HSL with HSV/HSB. HSL and HSV look similar but L (lightness) and V/B (value/brightness) produce different results for the same numeric values.
Worked Example
Convert Google Blue (#4285F4) to other formats.
HEX → RGB: 42 = 66, 85 = 133, F4 = 244 → RGB(66, 133, 244).
RGB → HSL: Hue ≈ 217°, Saturation ≈ 90%, Lightness ≈ 61%.
RGB → CMYK: C ≈ 73%, M ≈ 45%, Y ≈ 0%, K ≈ 4%.