🎨 Color Palette Generator

How to Use This Color Tool

This tool helps you find exact colors from images and create professional color palettes for websites, branding, UI design, social media graphics, presentations, and other visual projects.

1. Click Upload Image and choose any image from your device. You can upload a photo, screenshot, logo, product image, website screenshot, design mockup, or any other picture that contains the color you want to identify.
2. After the image appears inside the upload area, move your mouse over the image. A circular magnifier will appear to help you inspect small color details more accurately.
3. Click directly on the exact point of the image where your desired color is located. The tool will read the pixel color from that point and update the large color preview card on the right.
4. The selected color will be shown in three formats: HEX, RGB, and HSL. Use HEX for most website design work, RGB for digital design and CSS effects, and HSL when you want to adjust hue, saturation, or lightness more easily.
5. Press any Copy button to copy the selected color value. You can then paste it into your website CSS, design software, branding document, editor, or any other tool.
6. Use Generate Palette to create a full color palette based on the selected color. Each generated color card can be clicked. When you click a palette color, it becomes the new active color and is copied automatically.
7. Use the Number of colors slider to choose how many colors should appear in the generated palette. You can create a small focused palette or a larger collection of colors.
8. Use the Variation strength slider to control how different the generated colors are. A lower value creates a calmer, more consistent palette. A higher value creates stronger contrast and more expressive color combinations.
9. Choose a Color harmony mode. Analogous creates colors close to your selected color. Complementary creates contrast using the opposite side of the color wheel. Triadic creates a balanced three-direction color scheme. Random creates more experimental combinations.
10. The Shades & Tints section automatically creates lighter and darker versions of the selected color. These are useful for backgrounds, borders, hover states, icons, buttons, labels, and design systems.
11. The Gradients section creates ready-to-use gradient previews based on your selected color. Click any gradient to copy its CSS background code.
12. Click Save Color to add the current color to the Saved Colors section. Saved colors remain visible while you work on the current page and help you compare several selected colors.
13. Click any saved color to make it active again. This updates the preview, HEX / RGB / HSL values, generated palette, shades, tints, and gradients.
14. Click Copy CSS Variables to copy the generated palette as CSS variables. This is useful when you want to quickly insert the palette into a website stylesheet.
15. Use Dark Mode to preview the tool in a darker interface. This is helpful when checking how colors look on dark backgrounds or when designing dark-themed websites.