Colour Format Converter
Convert colours between HEX, RGB, HSL, and CMYK formats with live swatch preview, WCAG 2.1 contrast ratio checker, harmony palettes.
Active Colour Selection
🎨 Harmonic Variations
#C74502
#C70284
#84C702
CSS Syntax & Formats
#0284c7
rgb(2, 132, 199)
hsl(200deg 98% 39%)
cmyk(99%, 34%, 0%, 22%)
♿ WCAG 2.1 Contrast Ratios
⚖️ Decision Verdict: AA Accessible on Black
Colour #0284C7 achieves a 5.13:1 contrast ratio against black backgrounds, passing WCAG 2.1 Level AA for normal body text. On white backgrounds (4.10:1), it passes for UI components and large text (18pt+).
Photometric & Display Telemetry
About this tool
How to use it
- Choose a color by clicking the native browser color picker, selecting a preset, or entering HEX, RGB, HSL, or CMYK values directly.
- Inspect instant simultaneous conversions across HEX, rgb(), hsl(), and cmyk() formats.
- Click the clipboard icon next to any CSS syntax string to copy it directly into your stylesheet.
- Check the real-time WCAG 2.1 contrast ratio against both pure white (#FFFFFF) and pure black (#000000) for accessibility compliance.
- Review color harmony swatches (Complementary and Triadic) and photometric luminance metrics.
Why it matters
Web designers, frontend developers, and digital illustrators constantly navigate between RGB for digital displays, HEX for CSS stylesheets, HSL for intuitive tint and shade manipulation, and CMYK for commercial print prepress. Furthermore, ensuring colors meet WCAG 2.1 contrast standards is a legal and ethical requirement for modern web applications.
When to use it
Use this tool when translating Figma/Sketch design tokens into production CSS, verifying button contrast against WCAG AA guidelines, converting digital brand assets for offset printing, or building UI color themes.
Good to know
CMYK Print Gamut Note: Digital RGB monitors emit light across an additive gamut, whereas physical ink on paper absorbs light subtractively (CMYK). Highly saturated digital neon greens and electric blues cannot be reproduced accurately in 4-color process ink.
Common questions
What is the difference between RGB and HSL?
RGB (Red, Green, Blue) represents colors as additive light values from 0 to 255. HSL (Hue, Saturation, Lightness) organizes color on a 360° cylindrical wheel, making it vastly easier to create harmonious hover states and darker shades by tweaking saturation and lightness percentages.
What WCAG contrast ratio is required for accessible text?
Under WCAG 2.1 Level AA, body text (under 18pt or 14pt bold) requires a minimum contrast ratio of 4.5:1 against its background. Large text (18pt+ or 14pt bold) requires at least 3.0:1. For Level AAA, normal text requires 7.0:1.
Why do colors look different when converted to CMYK?
RGB uses emitted light with a wide color spectrum, while CMYK uses physical cyan, magenta, yellow, and black ink pigments that absorb light. The CMYK color gamut is smaller than sRGB, so out-of-gamut bright RGB colors are compressed into duller printable approximations.
What is Total Area Coverage (TAC) in CMYK?
Total Area Coverage (or Total Ink Limit) is the sum of cyan, magenta, yellow, and black percentages (up to 400%). Most commercial offset printers enforce a TAC ceiling of 300% to 320% to prevent ink smearing, paper saturation, and long drying delays.
What is relative luminance?
Relative luminance is the photometric measure of the perceived brightness of a color normalized to 0 for the darkest black and 1 for the brightest white, weighted heavily toward green (0.7152) because human eyes are most sensitive to green wavelengths.