Skip to content
Zoyku

Color Picker

Pick a color from the swatch or grab one straight from your screen with the EyeDropper API — hex, RGB and HSL copied in one click.

#0071e3
rgb(0, 113, 227)
hsl(210, 100%, 45%)

Your browser does not expose the EyeDropper API, so use the swatch input; hex/rgb/hsl values still update live.

This tool runs entirely in your browser. Your data never leaves your device — it is not uploaded to any server.

How to use

  1. 1Click the color swatch and choose a color, or use Pick from screen where available.
  2. 2Read the hex, RGB and HSL values under the preview.
  3. 3Click Copy next to the format you need.

Color Picker

Click the swatch to compose a color visually, or — in Chromium browsers — use Pick from screen to sample any pixel already on your display. The chosen value appears simultaneously as hex, rgb() and hsl(), each with its own copy button.

Sampling uses the browser's built-in EyeDropper API and reads the pixel locally; nothing is recorded, uploaded or stored. On browsers without the API, the swatch input keeps everything working.

Frequently asked questions

Why is “Pick from screen” not showing?

The EyeDropper API is currently available in Chromium-based browsers (Chrome, Edge, Brave, Opera). Firefox and Safari do not expose it yet, so those browsers show only the swatch input — everything else works identically.

What is the difference between hex, RGB and HSL?

They describe the same color three ways: hex packs red-green-blue into #RRGGBB for CSS and design tools; rgb() states the three channels numerically; hsl() expresses hue, saturation and lightness, which is easier for building palettes and hover states by hand.

Is the screen sampling private?

Yes. The EyeDropper API shows a system picker and returns only the single pixel you click; the reading happens in your browser and no screenshot, history or value is transmitted or saved.

Related tools

All Utility tools →

Color Converter

Paste a color in hex, rgb() or hsl() and get all three formats plus a ready-made row of tints and shades for your design system.

All tools →

QR Code Generator

Turn any text or URL into a crisp QR code with adjustable size, colors and error-correction level — download as PNG or SVG.

All tools →

Barcode Generator

Create scannable CODE128, EAN-13 and UPC-A barcodes with adjustable bar width and height — vector SVG output, rendered in your browser.

All tools →

Aspect Ratio Calculator

Given a ratio like 16:9 and one dimension, get the missing width or height instantly — plus presets from 1:1 to 21:9 for video and design.

All tools →

Embed this tool

Put this tool on your own site with one line — it runs entirely in the visitor's browser.

<iframe src="https://zoyku.com/en/tools/color-picker?embed=1" width="100%" height="640" style="border:0;border-radius:16px" title="Zoyku — color-picker" loading="lazy"></iframe>
100% local processing