Color Picker

Pick any color and instantly get HEX, RGB, and HSL values. Check contrast ratios against white and black text. All processing happens client-side.

7.8Kuses
9.1/10(116)
Pick a Color
Preview
HEX
#3B82F6
RGB
rgb(59, 130, 246)
HSL
hsl(217, 91%, 60%)

Contrast Ratio Checker

White Text
Sample body text
3.68:1AA Large
Black Text
Sample body text
5.71:1AA

Color History

Pick a color to start building your history...

How to Use the Color Picker

  1. Click the large color picker area to select any color visually.
  2. View the HEX, RGB, and HSL values updated in real time.
  3. Click Copy next to any format to copy it to your clipboard.
  4. Check the contrast ratio section to see how your color performs with white and black text for accessibility.

Features

  • Large visual color picker with native browser support
  • Simultaneous HEX, RGB, and HSL output
  • One-click copy for any color format
  • Color history tracking (last 10 picks)
  • WCAG contrast ratio checker against white and black text
  • 100% client-side processing -- no data sent to any server

Recommended Products

Ad

Affiliate Disclosure: As an Amazon Associate, ToolBird earns from qualifying purchases. Links above are affiliate links — if you buy through them, we may earn a small commission at no extra cost to you.

Disclaimer: This tool is provided as-is for informational and educational purposes only.

ToolBird Assistant

Find the right tool instantly

Hey! I'm ToolBird Assistant. Tell me what you need and I'll find the right tool for you.