DevDock
All toolsColor

Color Picker

Drag to pick, paste any format, copy HEX/RGB/HSL — eyedropper and image sampling included.

All processing stays in your browser

#3B82F5

100% opacity · H 217°

A
100%

Stays in sync with the picker — type HEX, RGB, or HSL.

Sponsored

Ad space

How to use the color picker

  1. Drag on the saturation/brightness field and adjust hue and alpha.
  2. Or type #hex, rgb(), or hsl() in Color value — it stays in sync with the picker.
  3. Optional: Pick from screen (Chrome/Edge) or Sample image, then press and drag with the zoom circle to aim.
  4. Click any format card to copy — HEX, RGBA, HSLA, or a CSS variable.

Why a dedicated picker beats guessing in chat

Design handoffs live in HEX and RGB, but CSS wants hsla() and alpha. A local picker keeps every format in sync while you tweak — plus eyedropper and image sampling for matching brand colors — without pasting screenshots into an AI thread.

FAQ

Are my colors uploaded?

No. Picking, parsing, and image sampling run entirely in your browser. DevDock does not send colors or images to a server.

What formats can I paste?

HEX (#RGB, #RRGGBB, #RRGGBBAA), rgb()/rgba(), and hsl()/hsla() — including modern space-separated CSS and slash alpha (e.g. rgb(59 130 246 / 0.5)).

How does Pick from screen work?

In supported browsers (Chrome, Edge), the Eyedropper API samples a pixel from your display. It may ask for permission; nothing is uploaded.

Can I sample from a logo or screenshot?

Yes. Load the image, then press and drag — a zoom circle helps you aim. Release to pick. The file stays in your browser.

What can I copy from the format cards?

HEX, RGB/RGBA, HSL/HSLA, and a ready CSS custom-property snippet — click a card to copy that format for stylesheets or design tokens.

Building a palette or checking contrast? Use Color Palette & Contrast. Exporting icons next? Try SVG to Tailwind / CSS.