Pick a base color and instantly generate 5 harmonious palettes using color theory. Complementary, analogous, triadic, split-complementary, and tetradic — click any swatch to copy.
180° opposite on the color wheel — maximum contrast
±30° neighbors — harmonious and cohesive
120° apart — vibrant and balanced
150° + 210° — contrast with less tension
90° apart — rich, four-color schemes
:root {
--color-1: #00D4FF;
--color-2: #47EBB5;
--color-3: #85D1E0;
--color-4: #EB6347;
--color-5: #FF2B00;
}A color palette generator is a design tool that creates sets of harmonious colors based on color theory principles. Instead of manually guessing which colors look good together, you pick a single base color and the tool calculates mathematically related colors using the HSL (Hue, Saturation, Lightness) color model and the color wheel. This generator produces five palette types simultaneously: Complementary palettes use colors 180 degrees apart on the color wheel for maximum contrast — ideal for call-to-action buttons and attention-grabbing designs. Analogous palettes use neighboring colors within 30 degrees of each other, creating smooth, cohesive schemes perfect for backgrounds and subtle UI elements. Triadic palettes space colors 120 degrees apart for vibrant, balanced combinations that work well in illustrations and data visualizations. Split-complementary palettes offer the contrast of complementary schemes with less visual tension by using colors at 150 and 210 degrees from the base. Tetradic (square) palettes use four colors at 90-degree intervals for rich, complex color schemes suited to editorial design and dashboards. Each palette generates 5 swatches including tints and variations of the harmony colors, giving you a complete, usable color system from a single starting point. All calculations run entirely in your browser — no data is sent to any server.
Use the color picker or type a HEX value directly into the input field. The preview bar shows your selected color in real time. This base color becomes the foundation for all five palette calculations.
All five harmony types are generated instantly — complementary, analogous, triadic, split-complementary, and tetradic. Each palette shows 5 color swatches with their HEX labels. Scroll through to find the palette that fits your project.
Click any individual swatch to copy its HEX value to your clipboard. Use the Copy All button on any palette to copy all 5 colors as comma-separated HEX values. The CSS Variables section provides ready-to-paste custom properties for your stylesheet.
Create beautiful linear, radial and conic CSS gradients with live preview. Copy CSS or Tailwind code.
Build layered box shadows visually with offset, blur, spread and color controls. Copy CSS instantly.
Design custom border-radius shapes with independent corner controls and live preview.
Visual flexbox layout builder. Configure direction, wrap, alignment and gap with live preview.
Visual CSS grid builder with rows, columns, gap and named areas. Copy CSS and HTML code.
Create beautiful text shadows with offset, blur and color. Multiple layers and live preview.