Color Picker — Pick, Sample, and Export Any Color
A professional color picker built for developers and designers. Pick any color using the gradient canvas, fine-tune with sliders, sample directly from your screen, and export in every format you need.
Unlike the browser's native color input, this tool gives you full format output — HEX, RGB, HSL, OKLCH — with alpha support and a saved color history.
Canvas
Click or drag to pick saturation & brightness
Hue slider
Sweep through the full color spectrum
Alpha slider
Control opacity from 0% to 100%
EyeDropper
Sample any color from your screen
How the Color Canvas Works
The gradient canvas uses HSB (Hue, Saturation, Brightness) — also called HSV. The horizontal axis controls saturation from white (left) to fully saturated (right). The vertical axis controls brightness from full brightness (top) to black (bottom).
The hue slider underneath sweeps through the full 360-degree color wheel, setting the base hue that the canvas gradient is drawn against. Moving the hue slider redraws the entire canvas in real time.
This is the same model used in Photoshop, Figma, and most professional design tools — so the interaction should feel immediately familiar.
Alpha and Opacity Support
HEX8
#3B82F6CC8-character HEX appends two hex digits for alpha. CC = 80% opacity.
RGBA
rgba(59, 130, 246, 0.80)CSS rgba() function with a decimal alpha value from 0 to 1.
HSLA
hsla(217, 91%, 60%, 0.80)HSL with alpha — useful for theming where you adjust lightness.
When to Use a Color Picker
Picking Colors for CSS
Instead of guessing hex values or jumping between design tools, use the picker to find your exact color and copy the CSS value directly — HEX, RGB, HSL, or OKLCH.
Matching Colors from a Reference
Use the EyeDropper to sample a color from any image, website, or design file visible on your screen. The sampled color is immediately converted to all formats.
Building a Color Palette
Use the hue slider to explore different hues, lock in a saturation and brightness level that fits your design system, and save each color to history as you go.
Designing with Transparency
The alpha slider lets you set opacity and immediately see the rgba(), hsla(), and HEX8 output — ready to paste into your CSS or design token file.
Frequently Asked Questions
What is the difference between HSB and HSL?
HSB (Hue, Saturation, Brightness) and HSL (Hue, Saturation, Lightness) both describe color in human terms, but they define the axes differently. In HSB, maximum brightness with maximum saturation gives a pure, vivid hue. In HSL, maximum lightness gives white regardless of saturation. The canvas picker uses HSB because it maps more intuitively to the gradient — the top-right corner is always a pure hue.
Does the EyeDropper work outside the browser?
Yes — the native EyeDropper API can sample colors from anywhere on your screen, including other applications, design tools, images, and videos. It is currently supported in Chrome and Edge.
How many colors can I save to history?
The history stores up to 20 colors in your browser's localStorage. Colors persist between sessions. You can clear the history at any time using the trash icon.
Can I use the color picker in my own app?
Yes — the ColorPickerWidget component is exported as a reusable React component. Import it from the components directory, pass an initial value and an onChange handler, and it will emit HEX and alpha values as the user interacts.
Why does my picked color look slightly different from the original?
Minor differences can occur due to display color profiles, gamma correction, or browser rendering. For critical color matching work, use a hardware color calibration tool.
Pick Colors Like a Pro
No plugins, no installs, no signup. A full-featured color picker in your browser — canvas, sliders, EyeDropper, history, and every format you need to build great UIs.
Part of Pacgie's free suite of color tools, alongside the Color Converter, Color Name Finder, Contrast Checker, and Gradient Generator.