:root {
--color-1: #3b82f6;
--color-2: #f6af3b;
}(التوثيق بالإنجليزية)
What it does
The Color Palette Generator turns any base color into a harmonious palette using classic color-theory rules: complementary, split-complementary, analogous, triadic, tetradic, and monochromatic. Pick a color, choose a harmony, and get a ready-to-use set of swatches with one-click copy. Export the whole palette as CSS custom properties, a Tailwind config snippet, or plain JSON. Everything runs 100% client-side: nothing leaves your browser.
How to use it
- Pick a base color with the color swatch, or type a hex value (e.g.
#3B82F6) into the text field. Hit Randomize to roll a fresh base. - Choose a harmony scheme - Complement, Split-Complement, Analogous, Triadic, Tetradic, or Monochromatic. For Monochromatic, set the number of Steps (2-9).
- Click any swatch to copy its hex - the value is shown right on the color, in black or white whichever reads clearer.
- In the Export panel, pick CSS / Tailwind / JSON and Copy export to grab the whole palette at once.
- Hit Copy link to capture a shareable URL - the base color, scheme, and step count are encoded in the link, so anyone opening it sees your exact palette.
Examples
Complementary palette from red
Base #FF0000 → [ #FF0000, #00FFFF ] - red and cyan, directly opposite on the wheel.
Tailwind export
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
palette: {
'1': '#3b82f6',
'2': '#f59e0b',
},
},
},
},
};CSS variables export
:root {
--color-1: #3b82f6;
--color-2: #f59e0b;
}Good to know
- Monochromatic holds the base hue and saturation, spreading lightness across the chosen number of steps - great for building UI tone scales.
- Private: all generation happens locally in your browser - safe for proprietary brand colors.
- Shareable: every palette has its own URL - base color, harmony, and step count live in the link’s
hashhashA one-way function that maps data of any size to a fixed-length digest. Same input, same digest; any change, different digest; not reversible.
, so bookmarking or sharing reloads the exact palette. - Formats: hex is the source of truth; HSL is shown for reference and used internally for the harmony math.
- Related tools: look for the gradient and contrast tools in Color & Design.