Color Picker

How to use

1. 1Drag the thumb on the saturation and value plane to set the color. The horizontal axis is saturation; the vertical axis is value or brightness.
2. 2Use the hue slider underneath to rotate around the color wheel. The plane updates to show every shade of the new hue.
3. 3Use the alpha slider to set opacity. Zero is fully transparent; 100 percent is fully opaque. The eight-digit HEX and rgba() outputs reflect the alpha channel.
4. 4Type any CSS color into the text input to jump straight to it. The picker accepts hex, rgb(), rgba(), hsl(), hsla(), hsv(), hwb(), and the 148 CSS named colors.
5. 5Click Native picker to open your browser's built-in color dialog, or click Eyedropper (Chromium browsers) to sample any pixel currently visible on your screen.
6. 6Use the per-channel number inputs to type exact RGB, HSL, or HSV values. Adjustments to any one model update the other models in real time.
7. 7Use Copy on any output row to grab a single format, or Copy all formats on the preview to copy the entire result block at once.
8. 8Click Save to palette to keep a color for later. Saved colors and recent picks persist in your browser's localStorage; nothing is uploaded.

About this tool

Color Picker is a visual, dependency-free color picker that runs entirely in your browser. Drag the thumb on the saturation and value plane to set chroma and brightness, use the hue slider to spin through the color wheel, and use the alpha slider to dial in opacity. You can also type any CSS color into the input field, click the native browser picker, or hit Eyedropper to sample any pixel on your screen (Chromium-based browsers support the EyeDropper API). The plane is keyboard-accessible: arrow keys move one percent, Shift plus arrow keys move ten percent, Home jumps to white, and End jumps to the deepest tone. Every change updates the live output panel with the most common color formats at once: six-digit and eight-digit HEX, short three or four digit HEX when each channel pair repeats, rgb() and rgba(), hsl() and hsla(), hsv() / hsb() as used by design tools, hwb() from CSS Color Module Level 4, oklch() for perceptually uniform ramps, an approximate CMYK conversion for print previews, a Tailwind arbitrary-value class with the closest preset name in the Tailwind 3 palette, a CSS custom property snippet, a SwiftUI Color initializer for iOS and macOS, and an Android-style 0xAARRGGBB literal. The tool also reports the closest CSS named color from the 148-entry Level 4 list, the WCAG relative-luminance contrast ratio against pure white and pure black with an AA pass or fail flag at the standard 4.5 to 1 threshold, and a Copy all formats button that builds a clean multi-line text block ready to paste into a design doc, a Tailwind config, a Figma component, or a code review. Two persistent panels keep your workflow fast: a saved palette and a recently used row, both stored in your browser's localStorage so they survive a reload but never leave your device. Useful for designers picking brand colors, frontend developers translating Figma values into Tailwind classes or CSS custom properties, mobile developers converting hex to SwiftUI or Android colors, accessibility reviewers sanity-checking contrast, and anyone who just needs a quick HEX or RGB sample from anywhere on screen. Everything runs locally; no signup, no upload, no account.

Free to use. Works in your browser. No signup, no login.