HEX Color Picker & Converter
Convert HEX ↔ RGB ↔ HSL ↔ CMYK — complementary colors, WCAG contrast & color blindness simulator
🔄 All Color Formats
#6366F1
rgb(99, 102, 241)
hsl(239, 84%, 67%)
cmyk(59%, 58%, 0%, 5%)
--color-primary: #6366F1;
bg-[#6366F1]
🎨 Color Relationships
Complementary (180° opposite)
Analogous (±15°, ±30°)
Triadic (120° apart)
♿ WCAG Contrast Checker
Normal Text (16px)
Large Text (24px)
Small text — #6366F1 on #FFFFFF
Normal Text
Fail ✗
Large Text
AA ✓
WCAG 2.1 requires: Normal ≥4.5:1 (AA), ≥7:1 (AAA) | Large ≥3:1 (AA)
👁️ Color Blindness Simulator
Original
#6366F1
Simulated
#6464CF
How this color appears to someone with protanopia. ⚠️ Color appears different — consider adding patterns or labels.
🌈 Shades & Tints
Click any shade to select it
🔗 Related Calculators
📤 Share this tool
📖 Learn More About HEX Color Picker & Converter
HEX Color Picker & Converter — Complete Color Tool
Convert colors between HEX, RGB, HSL, and CMYK. Find complementary and analogous colors, check WCAG accessibility contrast ratios, and simulate color blindness — all in one free tool.
Color Formats Explained
HEX: Web development | RGB: Screen displays | HSL: Human-friendly (Hue, Saturation, Lightness) | CMYK: Print design. All formats represent the same colors, just in different mathematical models.
Frequently Asked Questions
What is HEX color code?
A HEX color code is a 6-digit hexadecimal representation of RGB color values. Format: #RRGGBB where each pair (00-FF) represents Red, Green, Blue intensity from 0 to 255.
How to convert HEX to RGB?
Split the 6-digit HEX into three pairs: #6366F1 → R=63 (hex) = 99, G=66 (hex) = 102, B=F1 (hex) = 241. Online tools convert instantly.
What is CMYK color model?
CMYK (Cyan, Magenta, Yellow, Key/Black) is used in printing. Unlike RGB (screen), CMYK is subtractive — mixing colors absorbs light. HEX/RGB colors may look different when printed in CMYK.
What is WCAG contrast ratio?
WCAG (Web Content Accessibility Guidelines) requires minimum 4.5:1 contrast for normal text (AA), 3:1 for large text, and 7:1 for AAA compliance. This ensures readable text for people with visual impairments.
What is color blindness simulation?
Color blindness affects 8% of men and 0.5% of women. Protanopia (red blind), Deuteranopia (green blind), Tritanopia (blue blind), Achromatopsia (complete color blindness). Design tools simulate how colors appear.
What are complementary colors?
Complementary colors are opposite on the color wheel (180° apart). They create high contrast and visual tension. Example: Purple (#6366F1) and Yellow-Green (#F1EE63) are complementary.