Developer Tools
Color Picker & Palette
Pick any color visually, convert between HEX, RGB, and HSL, check contrast ratios, and generate shade palettes. All in your browser.
Free · Runs in your browser · No signup · Files stay on your device
How to use
How to use Color Picker & Palette
- 1Click the color swatch to pick a color visually.
- 2Or enter values directly in HEX, RGB, or HSL fields.
- 3View contrast ratios and palette shades below.
- 4Click any value to copy it to your clipboard.
Tips
Quick tips
- Click the color swatch to open your system color picker.
- WCAG AA requires 4.5:1 contrast for normal text and 3:1 for large text.
- The palette shows 7 shades of your selected hue.
FAQ
Frequently asked questions
What's the difference between this and Color Converter?
The Color Converter focuses on converting between formats. This tool adds a visual picker, contrast checker, and palette generation — it's a more complete design workflow tool.
What is a contrast ratio?
A measure of the difference in perceived brightness between two colors. WCAG accessibility guidelines require at least 4.5:1 for normal text and 3:1 for large text against the background.
How is the palette generated?
It takes your selected hue and saturation, then generates 7 shades by varying the lightness from 15% to 90%. This gives you a consistent tonal range from dark to light.
Related