Free browser-based color picker and color converter. Pick colors visually, sample from the screen or an image, convert hex to RGB, RGB to hex, RGB to HSL, and copy CSS-ready values in one click. Includes WCAG contrast checking, Tailwind v3 nearest-match hints, palette export, and shareable URLs—all client-side (no color data uploaded).
Live tool: spoold.com/tools/color-picker
- What this tool is for
- Who searches for this (keywords)
- Features
- How to use
- URL & sharing
- Accessibility & contrast
- Tech stack & privacy
- Repository
Use this online color picker when you need to:
- Pick a color with a hue strip and saturation/lightness area, or paste
#hex,rgb(),rgba(),hsl(), orhsla()and sync the picker. - Convert colors between HEX, RGB, and HSL without mental math or spreadsheets.
- Sample colors with the Eyedropper API (Chrome/Edge: “Pick from screen”) or by clicking a pixel on an uploaded or pasted image.
- Check contrast for text and UI against a chosen background (WCAG ratios and AA/AAA-style pass indicators).
- Export the current color and recent swatches as CSS custom properties (
:root { --color-n: #... }) or JSON for design systems.
It is part of Spoold — a collection of developer utilities that run in the browser.
This README and the live page target searches such as:
Color picker & conversion: color picker, online color picker, color picker free, pick color, hex color picker, rgb color picker, color converter, hex to rgb, rgb to hex, hsl converter, rgb to hsl, hex to hsl, color code converter
Workflows: eyedropper tool, pick color from screen, color picker from image, copy hex css, tailwind color picker, wcag contrast checker, color contrast ratio, accessible colors
Formats: hex rgb hsl, #rrggbb, rgba, hsla, scss color variable, css variables palette
| Area | What you get |
|---|---|
| Visual picker | Hue slider + 2D saturation/lightness field; drag to refine. |
| Input parsing | 3- and 6-digit HEX (optional #), rgb/rgba, hsl/hsla; 8-digit hex for alpha where supported in displays. |
| Copy formats | HEX, RGB, RGBA, HSL, HSLA, SCSS-style variable snippet, nearest CSS named color, nearest Tailwind v3 class token (subset palette). |
| Eyedropper | Native EyeDropper when the browser supports it. |
| Image sampling | Upload, drag-and-drop, or paste an image; click the canvas to sample RGB from that pixel. |
| Recent colors | Quick-access swatches for the last several picks. |
| Contrast | Foreground vs background: contrast ratio, WCAG-style checks; optional suggested foreground tweaks toward AA/AAA targets. |
| Shades | Generated lightness ramp (50–950-style) with copy as CSS variables. |
| Gradients | Linear gradient CSS snippet (direction + end stop options). |
| Color vision | Approximate protanopia / deuteranopia / tritanopia simulation for awareness (not a clinical assessment). |
| Export | Copy palette (current + recent) as JSON or CSS variables. |
| URL state | Current color reflected in the query string for bookmarking and sharing (see below). |
All logic runs locally in the browser unless you explicitly use a feature that calls the OS (e.g. eyedropper).
- Open Color Picker.
- Drag in the picker, paste a color string and apply, use Pick from screen, or load an image and click a pixel.
- Copy the format you need (HEX, RGB, HSL, etc.).
- Optionally set a background in the contrast section and read the ratio and WCAG-style results.
- Use Export to grab a JSON or CSS palette for your repo or design doc.
The tool keeps the selected color in the URL query string as ?hex=RRGGBB (see live behavior on spoold.com). That lets you:
- Bookmark a specific brand color.
- Share a link that opens the same swatch for teammates or in docs.
Replace RRGGBB with your 6-digit hex without # in the parameter value (as implemented in-app).
- Contrast ratio uses relative luminance in line with common WCAG math (for sRGB-style values).
- AA / AAA style pass indicators help you sanity-check text and large text thresholds; always validate with your real content, font size, and anti-aliasing in the final product.
- Color blindness previews are approximations for design discussion—not a substitute for user testing or specialized tooling.
- Built with Next.js (React) as part of the Spoold app.
- No server-side color upload: picking, conversion, and contrast math run client-side in the browser.
- Eyedropper and clipboard access follow normal browser permission prompts.
Main repo: github.com/thespoold/spoold — clone, run locally with pnpm install and pnpm dev, then open /tools/color-picker.
Spoold — Paste. Detect. Do.
spoold.com