Color Palette Generator

Pick a base color with the color picker or by typing a HEX code, an RGB value or even a CSS color name like "teal", then choose a color scheme such as analogous, complementary or monochromatic. The palette is built instantly from that base color using color theory. Click any swatch to copy its HEX code, or use the export box to copy the whole palette as a HEX list, CSS variables, RGB values or a code array. Press Shuffle for a fresh random base color whenever you want a new starting point.

They are classic color harmonies based on positions around the color wheel. Complementary uses two colors directly opposite each other for high contrast. Analogous uses neighbouring colors for a calm, cohesive look. Triadic picks three colors evenly spaced around the wheel for a balanced, vibrant set, while split-complementary and tetradic are richer four- and three-color variations. Monochromatic keeps a single hue and varies its lightness for an elegant, subtle palette. This generator builds each one for you from your chosen base color.

Switch to the Gradient tab, choose a linear, radial or conic gradient, and add as many color stops as you like — each with its own color and position. Drag the angle slider for linear and conic gradients, or set the shape and position for radial ones, and the live preview updates as you go. When it looks right, copy the ready-to-use CSS (for example background: linear-gradient(135deg, #6366F1 0%, #EC4899 100%);) straight into your stylesheet.

Yes. The export box lets you switch between a plain HEX list, a :root block of CSS custom properties (--color-1, --color-2 …), rgb() values, or a JavaScript/JSON array of HEX strings. Copy the whole thing with one click or download it as a file. Individual swatches also copy their HEX code when you click them, so you can grab just the one color you need.

Completely. There is no sign-up, no limits and no cost, and every palette and gradient is generated in your browser with JavaScript — nothing is ever sent to or stored on a server. That also means it keeps working offline once the page has loaded, and the colors you create stay entirely on your device.