Color Picker & Palette Generator
Pick a color, get HEX/RGB/HSL codes, and generate matching palettes
Click anywhere on the uploaded image to pick that pixel's color.
#0D9488
Shades & Tints
Color Scheme (complementary, analogous, triadic)
Choosing colors that work well together is one of the trickiest parts of any design project. This color picker and palette generator lets you pick a color from a wheel, type a HEX code, or sample a pixel directly from an uploaded image, then instantly gives you the HEX, RGB and HSL values along with a full set of shades, tints, and complementary color schemes.
How to Use the Color Picker & Palette Generator
- 1Pick a color using the color wheel, or type a HEX code directly.
- 2Or upload an image and click any pixel to sample its exact color.
- 3Copy the HEX, RGB or HSL value shown for use in your design tool or code.
- 4Click any swatch in the shades or scheme rows to copy that color instantly.
Why Use This Tool
- Outputs HEX, RGB and HSL simultaneously.
- Eyedropper tool samples exact colors from any uploaded photo or design.
- Auto-generates 9 shades/tints plus complementary, analogous and triadic schemes.
- One click on any swatch copies its HEX code to your clipboard.
Frequently Asked Questions
What's the difference between HEX, RGB and HSL?
HEX and RGB both describe a color using red, green and blue values (just in different notations), while HSL describes color using hue, saturation and lightness — HSL is often more intuitive for creating lighter or darker versions of a color.
How does the eyedropper on an uploaded image work?
After uploading an image, it's drawn onto a canvas element; clicking anywhere reads that exact pixel's RGB value and converts it to HEX and HSL automatically.
What are complementary and triadic color schemes?
A complementary scheme pairs a color with its opposite on the color wheel for high contrast, while a triadic scheme uses three colors evenly spaced around the wheel for a balanced, vibrant palette.