Color Converter
HEX → RGB → HSL → CMYK · Live preview · Copy to clipboard · WCAG contrast check · Free · No signup
#2980B9
rgb(41, 128, 185) · hsl(204, 64%, 44%)
HEX
RGB
HSL
CMYK (print)
C:78% M:31% Y:0% K:27%
Accessibility · Relative luminance: 0.194
Use BLACKtext on this background · ✓ WCAG AA (4.9:1)
Colour Format Reference
| Format | Syntax | Range | Used in |
|---|---|---|---|
| HEX | #RRGGBB or #RGB | 00–FF per channel | CSS, HTML, design tools |
| RGB | rgb(R, G, B) | 0–255 per channel | CSS, canvas, image APIs |
| HSL | hsl(H, S%, L%) | H: 0–360 · S/L: 0–100% | CSS, design tools, theming |
| CMYK | cmyk(C%, M%, Y%, K%) | 0–100% per channel | Print, physical media |
Common Colour Examples
Frequently Asked Questions
What is the difference between HEX and RGB?
They represent the same colour model (red, green, blue channels) but in different notations. HEX encodes each channel as two hexadecimal digits (00–FF), which maps to 0–255 in decimal — the same range RGB uses. For example, #FF4500 and rgb(255, 69, 0) are identical colours. HEX is compact and common in HTML/CSS; RGB is more readable and useful when you need to manipulate channel values mathematically.
When should I use HSL instead of RGB?
HSL (Hue, Saturation, Lightness) is more intuitive when you want to create colour variations. To make a colour lighter, increase the L value. To mute it, decrease S. To shift the hue, adjust H. This makes HSL ideal for theming, creating colour palettes, and dynamically generating shades in CSS with custom properties.
Why does CMYK matter if I'm building a website?
For web work it usually doesn't — screens use RGB. But if your design will also be printed (business cards, brochures, packaging), you'll need to supply CMYK values to a print vendor. Colours on screen can look very different in print, particularly bright reds, oranges, and neons which often fall outside the CMYK gamut.
What is WCAG contrast and why does it matter?
WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between text and background to ensure readability for users with low vision. The AA standard requires a ratio of at least 4.5:1 for normal text. This converter shows whether your colour passes or fails when paired with either black or white text, helping you choose accessible foreground colours.
Can a colour fail WCAG AA with both black and white text?
Yes — mid-range colours (neither very light nor very dark) may not achieve 4.5:1 with either black or white. In that case, you'll need to adjust the colour's lightness until it passes. Generally, if you push L below ~30% or above ~70% in HSL, you'll meet the AA standard with the appropriate text colour.
Is my data stored anywhere?
No. All conversions run entirely in your browser using JavaScript. No colour values are sent to any server.