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.
HEX
RGB
HSL
Contrast Ratios
White text: 4.74:1
Black text: 4.43:1
Shade Palette
Usage notes
- 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.
Related pages
How to Use This Tool
- 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.
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.