Color Picker & Palette Generator
What this tool does
Pick any color using the native color picker, the HSL or RGB sliders, or by typing a HEX, RGB, or HSL value directly. All three formats update in real time. The palette generator creates harmonious color schemes based on color theory: complementary (opposite the wheel), analogous (adjacent colors), triadic and tetradic (evenly spaced), plus shades (darker) and tints (lighter). Click any palette swatch to load it into the picker.
How to use
- Pick a color using the color wheel, sliders, or by typing a HEX/RGB/HSL value.
- Click Copy next to any format to copy it to your clipboard.
- Choose a palette scheme with the chips at the top — the palette updates automatically.
- Click any palette color to load it. Click Save Color to keep it.
Frequently Asked Questions
What color formats does this tool support?
HEX (e.g. #FF6B57), RGB (e.g. rgb(255, 107, 87)), and HSL (e.g. hsl(8, 100%, 67%)). You can type any of these into the input fields and the other formats update automatically.
What is the difference between complementary and analogous colors?
Complementary colors are opposite each other on the color wheel — they create strong contrast. Analogous colors are adjacent on the wheel — they create harmonious, low-contrast combinations.
What is the difference between shades and tints?
Shades are created by adding black to a color, making it darker. Tints are created by adding white, making it lighter. Both keep the same hue and saturation.
How do I copy a color value?
Click the Copy button next to any format (HEX, RGB, or HSL) to copy that value to your clipboard. You can also click any palette color to load it into the picker, then copy the format you need.
Where are my saved colors stored?
Saved colors are stored in your browser's localStorage. They persist across sessions but are only available on the same browser and device. Hover a saved swatch and click × to remove it.