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.

Share:
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.

How to Use This Tool

  1. 1Click the color swatch to pick a color visually.
  2. 2Or enter values directly in HEX, RGB, or HSL fields.
  3. 3View contrast ratios and palette shades below.
  4. 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.