Glyph WidgetsGlyph Widgets
AboutContactPrivacyTermsSupport on Ko-fi

© 2026 Glyph Widgets. All rights reserved.

·

100% Client-Side Processing

Color Picker

Last updated: March 6, 2026

Pick any color from your screen using the EyeDropper API, or enter colors in HEX, RGB, or HSL format. Instantly convert between all major color formats with this free online tool.

Features

  • ▶Pick colors from anywhere on your screen
  • ▶EyeDropper API support in modern browsers
  • ▶Convert between HEX, RGB, HSL, HSB, CMYK
  • ▶Copy color values to clipboard
  • ▶Color history tracking
  • ▶Works offline after loading

How to Use This Tool

1

Pick from Screen

Click 'Pick from Screen' to activate the EyeDropper tool. Click anywhere on your screen to capture that color. Works with any visible content, including other applications.

2

Use Color Input

Click the color square to open the native color picker. This works in all browsers and provides a visual way to select colors.

3

Enter Values Manually

Type HEX values directly (e.g., #3B82F6), or adjust RGB and HSL sliders for precise control. All formats update automatically as you type.

4

Copy and Use

Click the copy button next to any format to copy it to your clipboard. Use the color history to quickly access previously picked colors.

Color Selection Methods

The Color Picker supports multiple input methods: the native HTML5 color input for visual selection, the EyeDropper API for sampling colors from anywhere on your screen, and direct text input for HEX, RGB, or HSL values.

EyeDropper API

When you click 'Pick from Screen', the browser activates its native EyeDropper interface. This displays a magnified view of pixels under your cursor and lets you click to sample any color visible on your display, even from other applications.

Color Space Conversions

Color conversions follow standard mathematical formulas. RGB to HEX converts decimal values to hexadecimal. RGB to HSL calculates hue from the color wheel position, saturation from color intensity, and lightness from the average of min/max RGB values.

Browser Compatibility

The EyeDropper API requires Chrome 95+, Edge 95+, or Opera 81+. We detect browser support and show appropriate UI. The native color input and manual entry work in all modern browsers as fallbacks.

Privacy & Security

All processing happens locally in your browser using JavaScript. No color data, screen captures, or any information is sent to external servers. Your color history is stored only in your browser's localStorage.

Frequently Asked Questions

Click the 'Pick from Screen' button to activate the EyeDropper tool. Your cursor will change to a magnifier - click anywhere on your screen to capture that color. This feature requires a modern browser that supports the EyeDropper API (Chrome 95+, Edge 95+).

Related Tools

Color Converter

Convert between all color formats

Contrast Checker

Check WCAG color contrast

Palette Generator

Generate color palettes

Gradient Generator

Create CSS gradients

#3B82F6

Screen color picking is not supported in this browser. Use the color input or enter values manually.

All Color Formats

Share
HEX
#3B82F6
RGB
rgb(59, 130, 246)
HSL
hsl(217, 91%, 60%)
HSB
hsb(217, 76%, 96%)
CMYK
cmyk(76%, 47%, 0%, 4%)

Tool History is a Supporter feature.

Tool Notes is a Supporter feature.