What is this color picker?
A color picker lets you choose a color visually and instantly see its value in every format you need for CSS and design work. This tool uses the browser's native color input for the picking interface and converts the selected color to HEX (the 6-digit hex code), RGB (red-green-blue channels 0–255), HSL (hue 0–360°, saturation and lightness 0–100%), and HWB (hue, whiteness, blackness). You can save favorite colors as swatches in localStorage and explore a range of tints and shades derived from the chosen hue.
How to use this tool
- 1 Click the color swatch to open the native browser color picker.
- 2 Copy the format you need — HEX, RGB, HSL, or HWB — using the copy button on each field.
- 3 Click "+ Save current" to add the color to your saved swatches (stored in your browser).
- 4 Click a tint or shade in the bottom row to jump to a lighter or darker variant.
Frequently asked questions
What is the difference between HSL and HWB?
HSL (hue, saturation, lightness) describes a color by its angle on the color wheel, how vivid it is, and how light or dark. HWB (hue, whiteness, blackness) is an alternative cylindrical model that describes how much white and black are mixed into a pure hue — some people find it more intuitive for picking tints and shades.
Are my saved swatches stored on a server?
No. Swatches are stored in your browser's localStorage. They are private to your device and browser, and are never uploaded anywhere.
How are the tints and shades generated?
The tool converts the selected color to HSL, keeps the hue and saturation fixed, and generates 10 lightness steps from ~95% (nearly white) down to ~14% (nearly black).
Can I type a color value directly?
Not currently — picking is done via the browser's native color input. Type-in color fields may be added in a future update.
Does the color picker support alpha transparency?
The native color input doesn't expose alpha, so HEX, RGB, and HSL values here are all fully opaque. For RGBA or HSLA with alpha, you'd need to append the alpha channel manually.