How do I generate a color palette for a new website design?

Start by selecting your primary brand color (e.g. Blue or Teal), then lock it in the Palette Designer. Generate accompanying shades to find complementary and neutral background tones, following the 60-30-10 design rule.

How does the CSS Gradient Builder work?

Switch to the "Gradient" tab, choose between Linear or Radial mode, set your desired angle (0° to 360°), and adjust your color stops. Click "Copy CSS" to copy the single-line background property.

🎨

Color Studio & Palette Architect

Unified color toolkit: generate random palettes, design custom stops, formulate CSS gradients, and browse 1,000+ named shades.

🎨All Palettes Red Pink Purple Blue Cyan Teal Green Lime Yellow Orange Navy Gold Bronze Brown Maroon Magenta Aqua Olive Silver Gray

✨ NLP PROMPT ENGINESearch database shades or filter by color styles in plain English

⚡

Or try prompts:

Workspace Preview

History Tape

No colors saved in history yet. Copied/analyzed colors will appear here.

Color Theory & Palette Pairings Guide

Master the fundamentals of color science, structural harmonies, and the 60-30-10 design rule.

A. Fundamental Concepts: Hue vs. Color & Harmonies

🎨

Hue vs. Color

• Hue refers to the pure pigment itself (e.g. Pure Red 0°, Pure Blue 240°).
• Color is the umbrella term after modifying hue with Saturation and Lightness.

⚡

Complementary Contrast

Complementary colors sit opposite each other on the color wheel (e.g. Blue & Orange, Red & Cyan). They create maximum visual energy and high-contrast call-to-action buttons.

B. The 60-30-10 UI Design Rule

60%

Dominant Neutral Base

Background canvas and primary body surfaces (whites, slates, creams).

30%

Secondary Brand Tone

Navbars, cards, headers, and structural UI elements.

10%

Vibrant Accent Pop

High-contrast CTA buttons, active state pills, badges, and links.

Popular Color Shades Palettes

Explore customized palettes for popular color shades: details, hex codes, and pairings.

🔴 Red 🔵 Blue 🟢 Green 🟠 Orange 🟡 Yellow 🟣 Purple 🌸 Pink 🌐 Teal 💎 Cyan 👑 Gold ⚓ Navy 🪵 Brown 📁 Gray 🥈 Silver 🍷 Maroon 🫒 Olive 🍋 Lime 🔮 Magenta 🌊 Aqua 🥉 Bronze