Converting color...
Enter a color above and click Convert All Formats
or click any color swatch to convert instantly
The Four Color Models — What Each One Is For
Each color model describes color differently based on how it is produced and where it is used. Knowing which model fits your context saves time and avoids color-shift surprises when moving between design tools, browsers, and printers.
The dominant web format. Each color is six hex digits — two each for red, green, and blue. Used in HTML, CSS, and every design tool that targets screens. Example: #FF5733.
Additive light model for screens, cameras, and Canvas APIs. Each channel ranges 0–255. rgb(255, 87, 51) is equivalent to #FF5733 — they represent the same data.
Designed around human colour perception. Hue (0–360°) selects the colour wheel angle, Saturation (0–100%) controls vividness, and Lightness (0–100%) adjusts brightness. Native in CSS: hsl(14, 100%, 60%).
Subtractive ink model used in print design (InDesign, Illustrator, offset printing). The K (Black/Key) channel prevents muddy mixed blacks from C+M+Y combinations. CMYK percentages describe ink coverage on paper.
How the Conversions Work
All four conversions route through normalised RGB as the canonical intermediate. Any input format is first resolved to R (0–255), G (0–255), B (0–255), and then all output formats are computed from that single source of truth.
Conversion pipeline
HEX ↔ RGB is a trivial base-16 encoding. #FF5733 means R=0xFF=255, G=0x57=87, B=0x33=51. There is no rounding or approximation.
RGB → HSL works by finding the dominant channel (max), the lightness midpoint, and deriving hue from which channel is dominant: H = 60° × sector_offset, S = Δ / (1 − |2L − 1|), L = (max + min) / 2. Converting back (HSL → RGB) uses the same equations in reverse.
RGB → CMYK first extracts the black channel (K = 1 − max(R′, G′, B′)), then divides remaining ink: C = (1 − R′ − K) / (1 − K). Note: RGB and CMYK have different colour gamuts, so CMYK → RGB conversions may lose colours that are printable but outside the sRGB display range.
Color Space Reference Table
| Property | HEX | RGB | HSL | CMYK |
|---|---|---|---|---|
| Range | 00–FF | 0–255 | H:0–360°, S/L:0–100% | 0–100% each |
| Used in | HTML, CSS, SVG | Screens, Canvas API | CSS, design tools | Print, InDesign |
| Channels | 3 (packed) | 3 | 3 | 4 |
| Example | #FF5733 | rgb(255,87,51) | hsl(14,100%,60%) | cmyk(0%,66%,80%,0%) |
| Model type | Additive | Additive | Perceptual | Subtractive |
WCAG 2.1 Contrast Ratios Explained
The Web Content Accessibility Guidelines (WCAG) 2.1 define minimum contrast ratios to ensure text is readable by users with low vision or colour blindness. This converter computes ratios against pure white (#FFFFFF) and pure black (#000000) automatically.
Level AA — minimum
Normal text: ≥ 4.5 : 1
Large text (18pt+ or 14pt bold): ≥ 3.0 : 1
Required for most public websites
Level AAA — enhanced
Normal text: ≥ 7.0 : 1
Large text: ≥ 4.5 : 1
Recommended for body copy
The formula applies IEC 61966-2-1 sRGB gamma correction (linearisation) before computing relative luminance: L = 0.2126·R + 0.7152·G + 0.0722·B. The contrast ratio between two luminances L1 and L2 (where L1 ≥ L2) is (L1 + 0.05) / (L2 + 0.05).
Frequently Asked Questions
What is the difference between RGB and HEX?
They are the same data in different notation. HEX packs the three 0–255 channel values into base-16 pairs: R=255 → FF, G=87 → 57, B=51 → 33 → #FF5733. Browsers parse both identically. HEX is more compact for markup; RGB is more readable when working with arithmetic or opacity.
Why does my HSL value look different in different tools?
Most differences come from rounding rules. Hue is computed in floating-point and different tools round to different decimal places. A 0.5° hue difference is imperceptible. If you see a larger shift, the source tool may use a different definition of Lightness (some use HSB/HSV Brightness rather than HSL Lightness).
Can I convert CMYK to HEX exactly?
Not always. CMYK (subtractive) and sRGB (additive) have different colour gamuts. Some vivid cyan or magenta tones that are achievable in print fall outside what a typical display can reproduce. The converter clamps out-of-gamut values to the nearest valid RGB channel (0–255), so the screen representation is the closest possible — not always an exact match.
Which CSS color format should I use?
HEX is the shortest for static values and universal browser support. HSL is the best choice when building theme systems because adjusting only the Lightness or Saturation channel creates natural tints and shades of the same hue. RGB and RGBA are convenient when you need alpha transparency or when mixing channel values programmatically.
Why does CMYK have 4 channels instead of 3?
Theoretically, equal amounts of Cyan, Magenta, and Yellow ink should produce black, but in practice they produce a muddy dark brown. Adding a dedicated Black (Key) channel produces sharper text and darker shadows while also using less coloured ink, which saves cost in high-volume printing.
What is relative luminance?
Relative luminance (0 = black, 1 = white) is a perceptual measure of how bright a color appears to the human eye. It applies gamma correction to each RGB channel before weighting them: green contributes about 71%, red about 21%, and blue about 7% — matching how the eye's three cone types respond to light.
Further Reading
MDN — CSS color values
Complete reference for all CSS color formats including hsl(), rgb(), hex, and new color spaces
W3C WCAG 2.1 — Contrast (Minimum)
Official 4.5 : 1 AA standard and formula for computing relative luminance
W3Schools — HSL Colors
Interactive HSL colour wheel and beginner-friendly explanation of hue, saturation, and lightness
Adobe Color
Professional palette builder and colour harmony tool — complements this converter for design workflows