Loading
Generate harmonious color palettes from a single base color.
Design:root {
--color-1: #1418DA;
--color-2: #6366F1;
--color-3: #B9BAF9;
--color-4: #F1EE63;
--color-5: #F9F7B9;
}Pick a base color using the color picker or enter a HEX code.
Select a palette type: complementary, analogous, triadic, split-complementary, or monochromatic.
The generated palette appears with HEX, RGB, and HSL values.
Click any swatch to copy its color code to your clipboard.
Generate a cohesive color palette for a new brand starting from the primary brand color.
Create an accessible, harmonious color system for backgrounds, text, buttons, and accents in a web or mobile app.
Pick a palette that looks great across all slides in a PowerPoint or Google Slides deck.
Define a recurring color palette for Instagram posts and stories to build a consistent visual feed.
Color Palette Generator creates harmonious color palettes from a base color using complementary, analogous, triadic, and other color theory rules — with HEX, RGB, and HSL values ready to copy.
Find and convert HEX, RGB, HSL color codes for your designs.
Build linear or radial CSS gradients with 2-5 color stops and copy the code.
Design CSS box shadows with live preview, multi-layer support, and copy.
Visually craft any rounded-corner shape with per-corner control.
Browse the full Tailwind color palette and click any swatch to copy.
Check image safe zones for TikTok, Reels, and Shorts to ensure content visibility.