Color Picker
Pick any colour visually or type a value. Copy HEX, RGB, HSL or HSV. Sample from your screen with the Eyedropper. Build a palette and export as CSS variables or JSON. Everything runs in your browser — nothing is uploaded.
—
Tints & Shades
Click a swatch to set it as the active colour. Hover for the HEX value.
Colour History
No colours yet — pick one above to start.
Custom Palette
Add colours with the "+ Add to Palette" button above.
Colour Format Reference
| Format | Example | Range | Best for |
|---|---|---|---|
| HEX | #5b8cff | #000000–#FFFFFF | Web CSS, HTML, design tokens |
| RGB | rgb(91, 140, 255) | 0–255 per channel | CSS, screen design, blending |
| HSL | hsl(225, 100%, 68%) | H: 0–360°, S/L: 0–100% | CSS, easy human editing (lighten/darken) |
| HSV / HSB | hsv(225, 64%, 100%) | H: 0–360°, S/V: 0–100% | Design apps (Figma, Photoshop pickers) |
| rgba / hsla | rgba(91,140,255,0.8) | Alpha: 0–1 | CSS transparency |
| 8-digit HEX | #5b8cffcc | #00000000–#FFFFFFFF | CSS4, Android, SVG with alpha |
How the Colour Math Works
Starting from HSV (225°, 64%, 100%) — the native model of this picker:
- HSV → RGB: Hue 225° lands in the blue-to-indigo sector. Using the standard HSV→RGB formula: R=91, G=140, B=255.
- RGB → HEX: Each channel in base 16 → 91=0x5B, 140=0x8C, 255=0xFF →
#5B8CFF. - RGB → HSL: Max=255 (B), min=91 (R). Lightness = (255+91)/2/255 ≈ 67.8%. Saturation = (255−91)/(255−|255+91−255|) ≈ 100%. Hue = 225°. →
hsl(225, 100%, 68%). - Alpha: An alpha of 0.8 appends CC in hex (0.8×255=204=0xCC) →
#5B8CFFCCorrgba(91,140,255,0.8).
Frequently Asked Questions
- What is the difference between HSL and HSV in a colour picker?
- HSL (Hue, Saturation, Lightness) and HSV (Hue, Saturation, Value/Brightness) are both cylindrical colour models. In HSL, Lightness 0% is black and 100% is white, with the pure colour at 50%. In HSV, Value 0% is black and 100% is the fully saturated colour — white is only reachable by reducing saturation. Most colour picker canvases use HSV internally because the 2D gradient maps naturally to it: horizontal = saturation, vertical = value.
- How does the Eyedropper tool work?
- The Eyedropper uses the EyeDropper API, a modern browser feature that lets you sample any pixel from anywhere on your screen. It is supported in Chrome, Edge, and Opera. Firefox and Safari do not yet support it. No image data is sent to a server — the sampled colour is processed entirely in your browser.
- What is colour history and how long is it kept?
- Every colour you pick is added to a history strip showing the last 12 colours you used. This is saved in your browser's localStorage and persists between sessions on the same device. You can clear it at any time. Nothing is sent to a server.
- What are tints and shades?
- Tints are created by mixing a colour with white (increasing HSL lightness toward 100%), producing lighter versions. Shades are created by mixing with black (decreasing lightness toward 0%). This tool shows 5 tints and 5 shades of the current colour.
- How do I export my custom palette?
- Use "Add to Palette" to build a collection, then click "Export CSS" to download a .css file with CSS custom properties (e.g.
--color-1: #5b8cff;), or "Export JSON" to get an array of hex values. Your palette is also saved in localStorage between sessions.