Color Calculator

Color Converter

HEX

#4285F4

RGB

66, 133, 244

HSL

217°, 89%, 61%

CMYK

73%, 45%, 0%, 4%

Contrast Checker

The quick brown fox jumps over the lazy dog

Contrast Ratio

3.56:1

WCAG AA — Normal

Fail

WCAG AA — Large

Pass

WCAG AAA — Normal

Fail

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%.

Frequently Asked Questions

What is the difference between HEX and RGB?
They represent the same thing — three color channels (red, green, blue) — but HEX expresses them in hexadecimal (base 16) and RGB in decimal (0–255). Conversion is straightforward.
What contrast ratio do I need for web accessibility?
WCAG 2.1 Level AA requires 4.5:1 for normal text and 3:1 for large text. The stricter Level AAA requires 7:1 and 4.5:1 respectively.
Why isn't the CMYK conversion exact?
RGB has a wider color gamut than CMYK. Some bright screen colors cannot be reproduced with inks, so the conversion is an approximation. Professional printing uses ICC color profiles for accuracy.

Related Calculators