Why do HEX colors look different on print versus on screen?

Screens use additive RGB color (mixing light), while printing uses subtractive CMYK color (mixing pigments). The RGB and CMYK color gamuts overlap but are not identical — certain bright RGB colors (especially neon greens, electric blues) cannot be reproduced accurately in CMYK printing and must be converted to the nearest printable equivalent.

What is the WCAG AA contrast ratio requirement?

WCAG 2.1 Level AA requires a minimum contrast ratio of 4.5:1 for normal text (under 18pt) and 3:1 for large text (18pt+ or 14pt bold). Level AAA requires 7:1 and 4.5:1 respectively, providing maximum readability for users with low vision.

Developer Tools100% Client-Side

All Tools

Color Converter & Generator

An all-in-one color converter and picker. Switch seamlessly between HEX, RGB, HSL, and CMYK formats, inspect WCAG contrast ratios, and generate monochromatic color shades.

Current Selected Color

#4F46E5

rgb(79, 70, 229) • hsl(243, 75%, 59%)

Color Code Conversions

Click Copy to get values

HEX Format

#4F46E5

CSS: #4F46E5

RGB Format

rgb(79, 70, 229)

Red: 79, Green: 70, Blue: 229

HSL Format

hsl(243, 75%, 59%)

Hue: 243°, Sat: 75%, Light: 59%

CMYK (Print)

cmyk(66%, 69%, 0%, 10%)

C:66% M:69% Y:0% K:10%

RGB Color Sliders

Red (R)79

Green (G)70

Blue (B)229

Color Tints & Shades Palette

Click any swatch to copy

WCAG Text Contrast Accessibility

White Text on Color

The quick brown fox jumps over the lazy dog.

Ratio: 6.29:1✓ Pass AA (Normal)

Black Text on Color

The quick brown fox jumps over the lazy dog.

Ratio: 3.34:1✕ Fail AA

🇰🇭Cambodian Heritage Palette

Modern Tech Palette

About & How It Works

Technical calculation logic, standards, and operational details

The Color Converter & Generator is a comprehensive color science tool that converts color values between the four most widely used digital color models — HEX (hexadecimal RGB), RGB (Red, Green, Blue), HSL (Hue, Saturation, Lightness), and CMYK (Cyan, Magenta, Yellow, Key/Black) — in real time. It additionally evaluates the WCAG 2.1 contrast ratio between the selected color and standard white/black backgrounds, enabling designers to verify accessibility compliance for text legibility at Normal (AA: 4.5:1) and Large Text (AA: 3:1) thresholds. The tool generates a set of monochromatic tints and shades by varying the HSL lightness parameter, providing a design-ready color palette.

Algorithmic Logic & Calculation

All conversions pass through an internal RGB [0–255] representation as the canonical interchange format. HEX is parsed by extracting 2-character hex substrings (parseInt(hex, 16)). RGB-to-HSL uses the chroma-based normalization algorithm: H is computed from the dominant channel, S from chroma/lightness, L from (max+min)/2. HSL-to-RGB reverses via the hue sextant method. RGB-to-CMYK normalizes to [0–1] scale, computes K = 1 − max(R,G,B), then derives C, M, Y. WCAG contrast ratio is (L1 + 0.05) / (L2 + 0.05) where L is relative luminance from the IEC 61966-2-1 sRGB gamma function.

Technical Standards & Compliance

Color model conversions follow IEC 61966-2-1 (sRGB) standard. WCAG contrast ratios comply with Web Content Accessibility Guidelines (WCAG) 2.1 Success Criterion 1.4.3. CMYK approximation uses standard device-independent RGB-to-CMYK transform.

Key Features & Capabilities

HEX ↔ RGB ↔ HSL ↔ CMYK Live Conversion

Enter any color model value and see all other representations update in real time.

WCAG 2.1 Contrast Ratio Checker

Evaluates AA and AAA contrast levels against white and black backgrounds for accessibility compliance.

Monochromatic Shade & Tint Generator

Generates a palette of 10 tints (lighter) and 10 shades (darker) from any base color.

One-Click CSS Copy

Copy color as hex(#), rgb(), hsl(), or rgba() CSS notation with a single click.

Practical Real-World Use Cases

UI/UX Design & Brand Guidelines

Designers convert brand primary colors from CMYK (print) to HEX/RGB (digital screen) for consistent cross-media color reproduction.

Web Accessibility WCAG Compliance

Front-end developers verify that text color combinations meet WCAG 2.1 Level AA minimum contrast ratios before launching websites.

Khmer Typography Color Pairing

Publishers and news editors select contrasting text and background colors that maintain Khmer script readability at small sizes.

How to Use

Use the color picker or enter any HEX/RGB/HSL string.
See immediate conversions across all color models.
Click to copy CSS snippets or palette shades.

In-Depth Educational Guide

Client-Side Security Guide: Why In-Browser Tools Protect Your Sensitive Data

Learn how modern WebAssembly and JavaScript enable private, 100% in-browser utilities that guarantee zero data leakage, ideal for API keys, JSON payloads, and sensitive tokens.

Read Full Guide