Color Picker
Pick colors visually and convert between HEX, RGB, HSL, OKLCH
How to Use
- Pick a color visually. Click the swatch to open your browser’s native color picker, or paste a HEX value directly into the input field.
- Sample from your screen. On supported browsers (Chrome, Edge), click the eyedropper button to pick any color from anywhere on your screen — webpages, images, even other apps.
- Copy in any format. The HEX, RGB, HSL, and OKLCH values update instantly. Click any value to copy it to your clipboard.
Why Use This Tool
- Four formats live and synchronized: HEX, RGB, HSL, and OKLCH — useful for design systems, Tailwind themes, and accessibility work.
- EyeDropper API integration on Chromium browsers lets you sample any pixel on your desktop — no screenshotting, no offline tools.
- All conversions happen locally in your browser using Web APIs. No service round-trip, no rate limits.
- Pasting a HEX from a Figma file or design spec is one keystroke — instant conversion to whatever format your CSS or framework needs.
- OKLCH support is built-in for modern design systems that target perceptual uniformity (Tailwind v4, shadcn/ui, Radix Colors).
Frequently Asked Questions
How do I copy a color value?
Click any of the format displays (HEX, RGB, HSL, or OKLCH) to copy that value to your clipboard. A confirmation indicator briefly replaces the value to confirm the copy succeeded.
What is OKLCH and why include it?
OKLCH is a perceptually-uniform color space gaining traction in modern CSS. Unlike HSL, equal numerical changes in OKLCH lightness or chroma produce equal perceptual changes — making it ideal for accessible color systems. Tailwind v4 and shadcn/ui both ship OKLCH-based themes.
Why doesn’t the eyedropper button appear in my browser?
The EyeDropper API is currently Chromium-only (Chrome 95+, Edge 95+). Firefox and Safari do not support it as of 2026. The button is hidden in unsupported browsers; the rest of the picker works everywhere.
Can I save my color palette?
The current build is a single-color picker. For multi-color palette building and saving, see our Color Palette tool — linked in the related tools section below.
Is the color data sent anywhere?
No. All color manipulation happens in your browser. The picker uses native CSS color parsing, the EyeDropper Web API, and the Clipboard API — none of which leave your device. You can verify zero network traffic by opening DevTools → Network.
Do the format conversions lose precision?
HEX is limited to 8 bits per channel (0-255), so converting between HEX and OKLCH may round slightly. RGB ↔ HEX is lossless. Most design work uses HEX or OKLCH directly — round-trips through HSL can drift over many conversions.