Color Picker

Pick colors from anywhere on your screen and get HEX, RGB, HSL values. Perfect for designers and developers.

Your browser supports the EyeDropper API for direct screen color picking.

Pick a Color

#0D6EFD
Click anywhere on the image to pick a color

Color Values

HEX #0D6EFD
RGB rgb(13, 110, 253)
HSL hsl(216, 98%, 52%)

Recent Colors

Color Contrast Checker

Contrast Ratio

10.81:1
AAA

WCAG 2.1 compliance rating

Preview Text

This is how your text will look with these colors.

Color Information

About Color Formats

  • HEX - Hexadecimal representation, commonly used in web design
  • RGB - Red, Green, Blue values used in digital displays
  • HSL - Hue, Saturation, Lightness, more intuitive for color adjustments

How to Use

  1. Click "Pick Color from Screen" to activate the eyedropper
  2. Move your cursor to any part of the screen
  3. Click to capture the color
  4. Use the copy buttons to copy color values
  5. Check contrast ratios for accessibility

Color Tips

  • Use the contrast checker to ensure text readability
  • For web accessibility, aim for contrast ratio of at least 4.5:1
  • HEX values are case-insensitive but often written in uppercase
  • HSL can be easier to work with when creating color variations
  • Save frequently used colors for quick access

Accessibility Guidelines

  • AAA - Contrast ratio of 7:1 or higher (enhanced)
  • AA - Contrast ratio of 4.5:1 or higher (minimum)
  • Fail - Contrast ratio below 4.5:1 (inaccessible)
  • Large text (18pt+) requires 3:1 ratio for AA compliance

Related Utilities