What Is an HTML Color Picker?
An HTML Color Picker lets you choose any color visually using the browser’s built-in color dialog. Pick a color with the slider or by entering a hex value in the dialog, and all formats — HEX, RGB, HSL, and CSS Name — appear instantly. No typing required.
Color History — Your Last 12 Colors
Every color you pick is automatically saved as a swatch below the output. The history holds up to 12 colors. Click any swatch to restore that color instantly. Swatches are stored in your browser’s localStorage — they persist between sessions without any account or upload.
Output Formats Explained
| Format | Example | Use Case |
|---|---|---|
| HEX | #3b82f6 | CSS, HTML, design tools (Figma, Sketch) |
| RGB | rgb(59, 130, 246) | CSS, Canvas API, image processing |
| HSL | hsl(217, 91%, 60%) | CSS custom properties, theme tokens |
| CSS Name | cornflowerblue | Readable code, quick prototyping |
Click Copy next to any format to copy it to your clipboard.
When to Use the Picker vs. the Converter
Use the Color Picker when you want to choose a color visually and track your recent picks. Use the Color Format Converter when you already have a color value (e.g. from a design file) and need to translate it between formats.
How the Color History Works
The swatch history uses the browser’s localStorage API. Each new color is added at the front and duplicates are removed automatically, so the list always shows your most recent unique picks. When the list reaches 12 colors, the oldest one is dropped. Click “Clear History” to reset all swatches.
Privacy
All color math and history storage happen entirely in your browser using JavaScript and localStorage. No color values are ever sent to a server, logged, or shared. Clearing browser storage removes all saved swatches.