Palette & gradient
Harmonies, shades & CSS gradients
Harmonies
Shades & tints
CSS gradient
Start from a single color and instantly get a full palette: complementary, analogous, triad, tetrad, plus a range of shades from lightest to darkest. Perfect for framing a visual identity, picking consistent accent colors or building a UI theme without guesswork. Each tone shows its hex code and copies with one click.
The tool also builds a CSS gradient (linear or radial, adjustable angle, editable stops) with a live preview and a ready-to-paste background declaration. Everything runs in your browser: no color or image is sent to any server, with no tracking and no ads.
FAQ
How are the harmonies computed?
The color is converted to HSL and the hue is rotated: ±30° for analogous, ±120° for the triad, +90/180/270° for the tetrad, 180° for the complementary.
Can I edit the gradient?
Yes: pick linear or radial, set the angle, edit each stop (color via the picker or hex field) and add as many stops as you like. The CSS code updates live.
What if I enter an invalid hex?
An error message appears and the previous palette stays visible. Both #abc and #aabbcc formats (with or without #) are accepted.
Are my colors sent anywhere?
No. Every calculation (HSL conversions, harmonies, gradient) happens locally in your browser. Nothing is transmitted and the tool works offline.