Loading
Generate color harmonies from a base color and copy palette values.
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.
Found incorrect guidance or a result? Send the team steps and a non-sensitive example.
Select a color and copy HEX, RGB, HSL and other displayed color values.
Adjust linear or radial gradient stops and copy the generated CSS.
Build layered CSS box shadows with offsets, blur, spread, color and inset options.
Adjust individual corner radii in pixels or percentages and copy the CSS.
Browse the built-in Tailwind color table and copy a color or utility value.
Preview approximate TikTok, Reels or Shorts overlays on a portrait image.