Maintain contrast
Aim for WCAG 2.1 contrast ratios of 4.5:1 for normal text and 3:1 for large text. Test under light and dark themes.
Color Picker & Converter
Generate Palette
Comparing color models
Designers and developers switch between color models to match their tools. Use this converter to translate between HEX, RGB, HSL, and HSV representations instantly.
| Model | Components | Best for |
|---|---|---|
| HEX | #RRGGBB hexadecimal | CSS variables, design tokens, static palettes |
| RGB | Red, Green, Blue 0–255 | Canvas drawing, LED strips, low-level rendering |
| HSL | Hue (°), Saturation %, Lightness % | Design adjustments, generating tints and shades |
| HSV | Hue (°), Saturation %, Value % | Image editors, selecting vivid colors from palettes |
Color accessibility checklist
Consistent color choices keep interfaces legible for everyone. Apply these accessibility practices to your palette.
Avoid color-only cues
Pair color emphasis with text labels, icons, or patterns so color-blind users understand status changes.
Test variations
Preview palettes against simulated color vision deficiencies and ensure critical information remains distinguishable.
Quick question
Are you converting colors for design tokens or programmatic editing? Use the color tools above to switch formats and preview accessibility.
Color tool FAQ
What is the difference between HEX, RGB, and HSL?
HEX is hexadecimal RGB, RGB lists decimal channel values, and HSL represents hue, saturation, and lightness—ideal for adjusting brightness programmatically.
How can I ensure color accessibility?
Check contrast ratios against WCAG guidelines and avoid conveying meaning with color alone. Simulate color blindness before production.
Does the tool modify colors on a server?
No. Shade calculations and conversions run in your browser, so brand palettes and design tokens stay private.
Can I generate complementary palettes automatically?
Yes. The palette generator suggests complementary, analogous, triadic, and monochromatic variations to speed up theme design.
How do I convert colors programmatically?
Copy the provided JavaScript and Python snippets to move between color spaces inside build tools, design plugins, or CI pipelines.