Color Picker & Palette Generator

Color Picker & Palette Generator lets you choose a color with a visual picker or by typing a HEX code, then shows the matching HEX, RGB, and HSL values side by side. Each value has its own Copy button, and the tool also builds a five-shade palette by holding your color's hue and saturation while stepping the lightness from 20% to 100%. Everything runs in your browser, so no color you pick is uploaded anywhere.

How was this tool?

Your feedback helps us improve Color Picker.

Why use Color Picker?

The Color Picker & Palette Generator is a single-screen tool for choosing a color and reading it in every format you commonly need. You set a color one of two ways: click the swatch labeled "Pick a Color" to use your system's visual picker, or type directly into the "HEX Value" box, which accepts a # plus up to six hex characters. A large preview bar reflects the current color, and three cards beneath it show the same color as HEX, as an rgb(r, g, b) string, and as an hsl(h, s%, l%) string. Each card has its own Copy button that places that exact string on your clipboard. Below the values, the tool builds a five-color palette from your base color. It reads the hue and saturation of what you picked and generates shades by stepping the lightness through 20%, 40%, 60%, 80%, and 100%, labeling each column with its percentage. Clicking a swatch copies its hsl() value and shows a brief "Copied!" tooltip. This gives you a quick tint scale from one color, handy for backgrounds, hover states, and layered UI where you want related shades rather than random picks. Everything happens client-side. The HEX-to-RGB and RGB-to-HSL math, the palette generation, and the clipboard actions all run in your browser with no network request, so no color data is uploaded or stored. Note the tool works with solid colors only: it does not produce alpha or RGBA values, it does not extract colors from an uploaded image, and the palette is a lightness scale rather than a full harmony or complementary scheme. Within that scope it is a fast way to convert between formats and pull usable shades from a starting color.

Key benefits

See HEX, RGB, and HSL for the same color at once instead of converting formats by hand
One-click Copy on each value and on every palette swatch, with a visual confirmation
Get a ready-made 5-shade tint palette from a single base color
Works entirely in the browser with no accounts, uploads, or waiting

Features

Native visual color picker plus a typeable HEX input that validates # and up to 6 hex digits
Live HEX, RGB rgb(r, g, b), and HSL hsl(h, s%, l%) readouts for the current color
Five-swatch palette generated at 20%, 40%, 60%, 80%, and 100% lightness from your color's hue and saturation
Copy buttons for each format and click-to-copy on each palette swatch
Large live preview bar so you can judge the color before copying

Popular use cases

A front-end developer grabbing the exact HEX, RGB, or HSL string to drop straight into CSS
A designer building a set of lighter and darker tints from one brand color for backgrounds and states
Converting a color between HEX, RGB, and HSL without opening a separate converter
Matching a color to an existing UI by adjusting the HEX code and reading the updated values

How to use Color Picker

1
Pick a color
Click the square color swatch under 'Pick a Color' to open the visual picker, or type a code like #3b82f6 into the 'HEX Value' box. The preview bar and all values update as you choose.
2
Read the HEX, RGB, and HSL values
The three cards below the preview show your color as HEX, as rgb(r, g, b), and as hsl(h, s%, l%). These recalculate live from whatever color is selected.
3
Copy a value
Press the Copy button on any of the three cards. A checkmark confirms the value is on your clipboard, ready to paste into CSS, a design tool, or code.
4
Grab a palette shade
Under 'Generated Palette', click any of the five swatches to copy its hsl() value. The strip runs from 20% to 100% lightness, and a 'Copied!' tooltip appears on the swatch you click.

Frequently asked questions

What color formats does it output?

Three: HEX (like #3b82f6), RGB as rgb(r, g, b), and HSL as hsl(h, s%, l%). All three update together whenever you change the selected color.

How is the palette generated?

The tool keeps your color's hue and saturation and varies only the lightness, producing five hsl() shades at 20%, 40%, 60%, 80%, and 100%. Click any swatch to copy its value.

Can I enter a color by typing instead of using the picker?

Yes. The HEX Value field accepts a # followed by up to six hex digits, and the picker and preview update as you type. You can also open the visual swatch to pick a color by eye.

Are my colors sent to a server?

No. Color conversion, the palette, and copying to your clipboard all happen locally in your browser, so nothing you pick leaves your device.

Does it copy RGBA or HEX with alpha (transparency)?

No. The tool works with solid colors and outputs plain HEX, rgb(), and hsl() values without an alpha channel.

What does the Copy button do after I click it?

It writes the value to your clipboard and briefly shows a checkmark (or a 'Copied!' tooltip on palette swatches) so you know it worked, then resets.

Last reviewed: July 2026

How was this tool?

Related tools