🎨
Color Picker
Pick colors and convert between HEX, RGB, HSL, CMYK, and HSV formats.
Use Tool ➜TechCompare
Design & Accessibility Tools
Convert colors across HEX, RGB, HSL, CMYK, and HSV — and check contrast against WCAG AA and AAA.
2 tools in this category
♿
Contrast Checker
Check color contrast ratios for WCAG AA/AAA accessibility compliance.
Use Tool ➜About Design & Accessibility Tools
TechCompare's design tools cover the two colour questions that come up on every project: what is this colour in every format, and is this text/background combination accessible? The Color Picker converts between HEX, RGB, HSL, CMYK, and HSV in real time as you drag. The Contrast Checker evaluates any two colours against WCAG 2.1 AA and AAA thresholds for normal and large text.
Use these when translating a brand palette to code, auditing a design for WCAG compliance, or picking an accessible shade of an existing brand colour. Both run entirely in the browser and don't require any design-software licence.
Frequently asked questions
What WCAG contrast ratio do I need?
WCAG AA requires 4.5:1 for normal text and 3:1 for large text (18pt, or 14pt bold). AAA raises those to 7:1 and 4.5:1. Most consumer products target AA; AAA is common in government, healthcare, and education. The Contrast Checker shows every result against every threshold at once.
How do I convert HEX to HSL?
Paste the HEX code into the Color Picker and read the HSL value directly. The conversion is live, so dragging any slider updates all formats simultaneously — useful when hand-tweaking a palette.
Why do CMYK values look different from what my printer produces?
CMYK conversion from RGB is mathematical; real printers use profile-specific colour management that depends on paper, ink, and press calibration. The Color Picker gives you a reasonable baseline, but always proof against the actual print workflow for critical jobs.
Can I test a colour pair for colour-blind accessibility?
The Contrast Checker handles luminance contrast, which is the single biggest factor for low-vision and many forms of colour-blindness. For specific colour-vision deficiency simulation use a dedicated tool in addition — the contrast check is necessary but not always sufficient.
Do I need to memorise HSL, HSV, and HWB differences?
Not really. The Color Picker converts between them live, so you can see what reducing saturation in HSL looks like as HSV or RGB and pick whichever mental model fits your workflow.