ToolSink

Color Picker

Pick colours, sample any pixel on screen with the eyedropper, and convert between HEX, RGB and HSL.

HEX
#7C3AED
RGB
rgb(124, 58, 237)
HSL
hsl(262, 83%, 58%)
On white5.70:1
WCAG AA: ✓ · AAA: ✕
On black3.69:1
WCAG AA: ✕ · AAA: ✕

What is the Color Picker?

The Color Picker lets you sample a colour visually, convert between formats (HEX, RGB, HSL, HSV) and copy the value in the exact syntax you need — for CSS, design tools or a slide deck. Some browsers also expose the EyeDropper API so you can pick colours anywhere on the screen.

Colours look identical across formats but syntax differs by tool. Figma wants HEX. CSS variables often use HSL. A design system may standardise on RGB. Manually converting is tedious. The picker converts as you drag and lets you copy in any format with one click.

The tool runs in your browser. Nothing you sample or type is uploaded.

How to use the Color Picker

  1. 1Drag the picker inside the colour panel or enter a value.
  2. 2Adjust the sliders for hue, saturation and lightness.
  3. 3Watch every format (HEX, RGB, HSL, HSV) update live.
  4. 4Click the format you need to copy.
  5. 5Use the eye-dropper icon to sample any pixel on your screen (Chrome/Edge only).

Key features

  • Live HEX / RGB / HSL / HSV conversion
  • Alpha channel support
  • EyeDropper screen sampling (supported browsers)
  • Saved palette in local storage
  • Contrast checker against black and white
  • Runs offline

Examples

CSS variable

Sample brand blue and copy as `hsl(220 90% 55%)` — perfect for a design system.

Sample from an image

Use the eye-dropper to pick the exact green from your favourite photo.

Why use this tool

  • Removes format-conversion friction
  • Screen-wide sampling in supported browsers
  • Fast copy in any syntax
  • Great for design system work
  • Private — no uploads

Common use cases

  • Picking brand colours from moodboards
  • Building a CSS variable palette
  • Matching colours between design tools
  • Checking contrast ratios
  • Extracting themes from screenshots

Frequently asked questions

Which browser supports the eye-dropper?

Chrome, Edge and Opera. Safari and Firefox do not expose the EyeDropper API yet.

Does the picker support alpha?

Yes — output includes the alpha component when relevant.

Is HSL preferred over HEX?

HSL is easier to tweak (lighten/darken by adjusting L) but HEX is more universal.

Do you save my picked colours?

Only in your browser’s localStorage — never uploaded.

Can I import a palette?

JSON import is on the roadmap.