🎨 कलर स्कीम जेनरेटर — 5 रंग का पैलेट बनाएं

Generate harmonious 5-color schemes from any base color. Complementary, analogous, triadic, tetradic, monochromatic. Export as CSS variables or Tailwind.

Enter a base color and instantly see five harmonious colors generated using classic color theory rules: complementary (opposite), analogous (adjacent), triadic (three equidistant), tetradic (four), or monochromatic. Export as CSS custom properties, a Tailwind config, or JSON.

Base Color

Scheme

Export as:

How to Use

Pick a base color

Click the base color swatch or enter a HEX value to set your starting color.

Choose a scheme

Select Complementary, Analogous, Triadic, Tetradic, or Monochromatic from the scheme selector.

Export the palette

Lock colors you want to keep, click Regenerate to vary others, then export as CSS variables, Tailwind, or JSON.

Frequently Asked Questions

What is a color palette in design? +

A color palette is a set of colors chosen to work harmoniously together in a design. Color theory defines relationships between colors: complementary (opposite on the color wheel), analogous (adjacent), triadic (three equidistant), tetradic (four), and monochromatic (same hue, varying lightness).

What is a complementary color scheme? +

Complementary colors are directly opposite each other on the color wheel (e.g., blue and orange, red and green). They create strong contrast and visual tension — ideal for call-to-action buttons and highlights that need to stand out.

What is an analogous color scheme? +

Analogous colors are adjacent on the color wheel (e.g., blue, blue-green, green). They create harmonious, natural-looking combinations with low contrast — great for backgrounds, serene designs, and nature-inspired UIs.

How do I lock a color I like? +

Click the lock icon on any color swatch to lock it. Locked colors are preserved when you click Regenerate or change the scheme type. This lets you keep a brand color while varying the supporting palette.

How do I export the palette? +

Use the Export dropdown to copy as CSS custom properties (--color-1: #abc), Tailwind config colors object, or a raw JSON array. All formats are ready to paste directly into your project.

संपूर्ण गाइड: Color Palette Generator

Color Palette Generator क्या है?

Color Palette Generator harmonious color combinations automatically generate करता है color theory principles के आधार पर। Complementary, analogous, triadic, split-complementary, और monochromatic schemes automatically calculate होती हैं। Professional designers इन्हीं rules use करते हैं visually appealing interfaces बनाने के लिए।

यह tool brand identity, UI design, और web projects के लिए consistent color system बनाने में help करता है। Export options में CSS variables, Tailwind config, और SCSS variables शामिल हैं।

कैसे उपयोग करें

Base color enter करें HEX या color picker से।
Scheme type select करें: complementary, analogous, triadic, etc।
Generated palette review करें और adjust करें।
Export format choose करें: CSS, Tailwind, SCSS।

Pro Tips

60-30-10 rule follow करें: 60% dominant color, 30% secondary, 10% accent।
Accessibility के लिए colors के बीच sufficient contrast ratio maintain करें (WCAG 4.5:1)।
Palette को dark और light backgrounds दोनों पर test करें।