Image
Color Palette & Gradient Generator
Generate, lock, and export color palettes and CSS gradients. Nothing leaves your browser.
Base color
Scheme
#17858C
#278FBE
#4B86D2
#7D8ED8
#B8B5E3
Picking colors that actually work together is the hardest part of any design. This tool generates a five-color palette from color-theory schemes — complementary, analogous, triadic, or monochromatic — starting from a random seed, a HEX code you type in, or the dominant colors pulled out of an image you upload. Lock the swatches you want to keep and hit generate (or just tap the spacebar) to reroll the rest, the same lock-and-reroll flow popularized by tools like Coolors. When you're happy with it, copy every HEX code at once, copy a ready-to-paste block of CSS custom properties, or download a labeled PNG swatch strip. The gradient builder alongside it works the same way in spirit: add color stops, drag the angle dial or pick a direction preset, and the CSS output always matches the live preview exactly — copy it straight into a stylesheet or export it as a PNG at any size.
Related Tools
How to Use
- 1
Choose a base color source (random, a HEX code you enter, or extract from an uploaded image) and a scheme (complementary, analogous, triadic, monochromatic, or random).
- 2
Click "Generate" or press the spacebar to roll a new palette.
- 3
Click the lock icon on any swatch you want to keep, then generate again — only the unlocked swatches change.
- 4
Copy individual HEX codes, copy all of them at once, copy a CSS variables block, or download a labeled PNG swatch strip.
- 5
Switch to the Gradient tab to add color stops, set the angle, then copy the CSS or download a PNG at any size.
Frequently Asked Questions
How do I lock a color and regenerate the rest?
Click the lock icon in the top corner of any swatch. Locked swatches are skipped the next time you click "Generate" or press the spacebar — only the unlocked colors change.
What color schemes are available?
Complementary (opposite hues), analogous (neighboring hues), triadic (three evenly spaced hues), monochromatic (one hue at different shades), and a fully random option.
Can I extract a palette from a photo?
Yes. Click "Extract palette from an image" and upload a photo — the dominant colors are pulled out using the same k-means-based color clustering as the Color Picker tool and dropped into the unlocked swatches.
How do I use the gradient in my CSS?
Click "Copy CSS" to copy a ready-to-paste `background: linear-gradient(...)` declaration that matches the live preview exactly, including your chosen angle and color stops.
Can I download the gradient as an image?
Yes. Choose a width and height (or a quick preset like 1200×630 for social sharing) and click "Download PNG" — the exported image is pixel-for-pixel the same gradient shown in the preview.
Is anything uploaded to a server?
No. Palette generation, image color extraction, and gradient rendering all happen locally in your browser using the Canvas API. Nothing is sent anywhere — open your browser's Network tab to confirm.