Color Picker
Interactive HSL color picker with live hex, RGB, and named color lookup.
How to Use
- Drag on the large saturation/value swatch to choose how vivid and how bright the color should be.
- Drag the hue slider below to spin through the color wheel (red → yellow → green → cyan → blue → magenta → red).
- The HEX, RGB, and HSL outputs update live as you pick.
- Click any output field to select the value, then copy with Ctrl/Cmd+C.
- The preview swatch on the right shows the selected color at full size.
- Everything runs in your browser — no colors leave your device.
Picker Anatomy
A Brief History of the Color Picker
The first interactive color pickers on personal computers appeared in MacPaint (1984) and the original Microsoft Paint, both offering a fixed palette of 16 or 256 indexed colors. As 24-bit color became standard in the mid-1990s, the modern HSV picker emerged in Photoshop 3 (1994), Illustrator, and CorelDRAW with the now-familiar layout: a 2D saturation/value square paired with a vertical hue slider. Apple's macOS color picker (NSColorWell) and the Windows ChooseColor common dialog standardized the design at the OS level shortly after.
Web color pickers came much later. CSS only supported a fixed 16-color palette through 1996; named colors and full hex came in CSS Level 2; and HTML's native <input type="color"> didn't reach all major browsers until 2016. Before then, every web app had to ship its own picker — leading to a generation of jQuery and JavaScript libraries (Spectrum, Pickr, Coloris) that recreated the desktop picker in HTML5 canvas. Native browser pickers are good now but vary in styling and feature support, which is why custom pickers like this one are still common in design-tool web apps.
The conventions established by Photoshop in 1994 — saturation horizontal, value vertical, hue as a separate slider — are still used virtually everywhere. They're not the only way to picture color (color wheels, HCL/OKLCH wheels, three-channel sliders) but they're the most learnable design that most people already know.
About This Picker
This picker uses a 2D HSV saturation/value canvas paired with a hue slider — the standard layout pioneered by Photoshop. Drag anywhere on the canvas to set saturation (X) and value (Y); drag the slider to change hue. The hex, RGB, and HSL outputs are computed live from the (H, S, V) state and are mathematically lossless within sRGB.
Everything runs entirely in your browser using HTML5 canvas; no colors are transmitted, logged, or stored. Outputs are sRGB and ready to paste into CSS, Tailwind, design tools, or anywhere else. For wider gamuts or perceptual color spaces, see CSS Level 4 oklch() — beyond the scope of this picker but supported by modern browsers.
Frequently Asked Questions
Why HSL/HSV instead of just RGB?
HSL and HSV are perceptually more intuitive: hue is what color it is, saturation is how vivid, lightness/value is how bright. Tuning these by eye is much easier than guessing R, G, B values, especially when you're trying to find variants of a color (a darker shade, a more muted version). Most professional design tools default to HSV; CSS uses HSL because the math maps better to color theory.
What's the difference between this and the CSS Color Converter?
This tool is for picking a color visually with sliders and a 2D canvas — like the Photoshop or Figma color picker. The Converter is for transforming a known color between formats. Use the Picker when you don't have a color in mind yet; use the Converter when you have one.
How do I pick a "good" color for a design?
Start with hue (your brand color or chosen accent). Pick saturation around 60–80% for buttons and highlights, lower (10–30%) for backgrounds and chrome. Lightness varies by use: 40–60% for primary content, 80–95% for backgrounds, 10–20% for text. Use the picker to grid out a 9-step lightness scale at fixed hue and saturation for systematic theme building.
How accurate is the on-screen preview?
It's exactly as accurate as your monitor's calibration. Most uncalibrated consumer displays drift slightly — a color that looks the same on your laptop may look different on a phone or printed paper. For mission-critical color matching (brand colors, print, photography), use a hardware calibrator and a known color profile.
Can I save colors to a palette?
This picker focuses on single-color picking. For palette work — generating, saving, exporting — see the Palette Generator. For deriving palettes from a brand color, the Shade Generator gives you systematic lightness variations from a base.
Does this support wide-gamut (P3) or HDR colors?
No — outputs are sRGB. Modern Apple devices and high-end monitors support wider gamuts (Display P3, Rec. 2020), but CSS support for those is still rolling out (oklch(), color()) and most use cases benefit from staying in sRGB for compatibility.
Common Use Cases
Picking CSS colors
Find the exact hex or rgb() value for an accent or background color while designing in code.
Tailwind arbitrary values
Pick a color and paste the hex into a Tailwind arbitrary value class like bg-[#3b82f6].
Brand color exploration
Find variants of a base hue at different saturations and lightnesses to build a coherent palette.
Design system tokens
Pick the exact colors for primary/secondary/accent/danger/success token slots in a design system.
Generating UI states
Pick the base color, then drag the lightness slider to find clean hover/active/disabled variants.
Pixel art and retro design
Browse the saturated corner of the picker for vibrant 16-bit-style colors.
Last updated: