Colors
8
Brightness
50%
Generate harmonious color palettes for your designs.
Generate harmonious color palettes from any base color using color theory. Perfect for branding, UI design, illustration, and interior design projects.
Pick your primary brand color as the base and generate an analogous or complementary palette. This ensures all colors relate back to your core identity.
Analogous palettes — colors adjacent on the wheel — create serene, cohesive interfaces. Use them for dashboards, reading apps, and any UI where low visual stress is important.
Complementary color palettes use opposite hues for maximum contrast. Ideal for CTAs, hero sections, and marketing materials where you want to grab attention.
Effective brand palettes rarely use more than 5 colors. Pick a dominant, a secondary, an accent, and one or two neutral tones. More colors create visual chaos.
After choosing your palette, verify that text colors have at least 4.5:1 contrast against their backgrounds per WCAG AA guidelines. Dark palettes need light text.
Export as CSS variables for web projects, JSON for design system tokens, Tailwind config for utility-class frameworks, or PNG/SVG for presentations and style guides.
A color palette is a curated set of colors selected to work harmoniously together. In design, a palette typically includes a primary color, secondary colors, accent colors, and neutral tones. Color palettes are foundational to brand identity, UI design, illustration, and interior design because they create visual consistency and emotional resonance throughout a project.
Start with color psychology — blue conveys trust, red signals energy and urgency, green suggests nature or growth, yellow evokes optimism. Choose a primary color that reflects your brand's personality, then build a palette around it. Use an analogous scheme for cohesive brands, a complementary scheme for bold, high-energy brands, or a triadic scheme for playful, creative brands. Always test your palette in context — on backgrounds, in typography, and on screens.
Complementary colors are pairs of colors that sit directly opposite each other on the color wheel — for example, blue and orange, red and green, or yellow and purple. When placed next to each other, complementary colors create maximum contrast and make each other appear more vibrant. In design, use complementary colors for high-impact pairings like a call-to-action button against a background.
Use the Export buttons below the generated palette. CSS exports the colors as CSS custom properties (variables) ready to paste into your stylesheet. JSON exports a structured data file for use in design systems and code. Tailwind exports a configuration snippet for your tailwind.config.js file. PNG exports the palette as a visual swatch image for Figma, Canva, or presentations. SVG exports a scalable vector swatch file.
Structure your palette: 60% dominant background, 30% secondary color, 10% accent. This ratio keeps designs balanced and hierarchy clear.
Real depth comes from 2–3 stacked box-shadows: a large soft outer glow + a tighter crisp inner shadow. Single flat shadows look artificial.
Instead of #000, use dark-saturated hues like #1a1a2e or #0d1117. Pure black creates harsh contrast that feels digital, not designed.
Define a spacing scale (4px, 8px, 16px, 24px, 40px, 64px) and stick to it. Random spacing steps are the #1 reason designs feel "off" to designers.
Gradients at 120–145° read as more natural than 90° or 180°. That slight diagonal mirrors how natural light falls on surfaces.