कलर पैलेट जेनरेटर

एक बेस रंग से complementary, analogous, triadic, tetradic, square या monochromatic हार्मनी वाले कलर पैलेट बनाएं। रंग लॉक करें, CSS/Tailwind एक्सपोर्ट करें।

पैलेट सेटिंग्स

मूल रंग

रंग सामंजस्य

मूल ह्यू + विपरीत ह्यू (180°)।

ह्यू घुमाने का तरीका

पसंद के रंग लॉक करें; दोबारा बनाएँ नया रैंडम मूल रंग चुनता है और लॉक रंग बनाए रखता है।

एक्सपोर्ट

फ़ॉर्मैट

टोकन नाम

पैलेट

#3b82f6

oklch(62.3% 0.188 259.8)

#b07d00

oklch(62.5% 0.129 79.9)

एक्सपोर्ट कोड

:root {
  --palette-1: #3b82f6;
  --palette-2: #b07d00;
}

कलर पैलेट जेनरेटर क्या है?

यह एक बेस रंग से क्लासिक कलर-व्हील हार्मनी के आधार पर पैलेट बनाता है। ह्यू रोटेशन परसेप्चुअल OKLCH (समान अनुभूत लाइटनेस रखता है) या क्लासिक HSL में हो सकता है। दोबारा जेनरेट करने से पहले रंग लॉक किए जा सकते हैं, और पैलेट CSS variables, SCSS, Tailwind v3 config, Tailwind v4 @theme या JSON के रूप में एक्सपोर्ट होता है।

कलर पैलेट जेनरेटर का उपयोग कैसे करें

Base color (hex, rgb(), hsl() या oklch()) डालें या रैंडम के लिए Regenerate क्लिक करें।
Color harmony चुनें और तय करें कि ह्यू OKLCH में घूमे या HSL में।
जो रंग रखना चाहते हैं उन्हें लॉक करें; Regenerate तब सिर्फ़ अनलॉक रंग बदलता है।
किसी स्वैच पर क्लिक करके उसका hex मान कॉपी करें।
एक्सपोर्ट Format और Token name चुनें और कोड कॉपी करें।

उदाहरण

इनपुट

Base #ff0000, Triadic, HSL

आउटपुट

:root {
  --palette-1: #ff0000;
  --palette-2: #00ff00;
  --palette-3: #0000ff;
}

कलर पैलेट जेनरेटर का उपयोग कब करें

इसे ब्रांड, UI थीम या इलस्ट्रेशन की रंग योजनाएँ खोजने के लिए इस्तेमाल करें। हार्मनी शुरुआती बिंदु है, एक्सेसिबिलिटी जाँच नहीं: टेक्स्ट/बैकग्राउंड कंट्रास्ट अलग से जाँचें। एक रंग को 50–950 स्केल में फैलाने के लिए Color Shades Generator इस्तेमाल करें।

कलर पैलेट जेनरेटर कैसे काम करता है

हार्मनी बेस ह्यू को तय कोणों से घुमाती हैं, जबकि सैचुरेशन/क्रोमा और लाइटनेस बनी रहती हैं: complementary 0°/180°, analogous 0°/±30°/±60°, triadic 0°/120°/240°, split complementary 0°/150°/210°, tetradic 0°/60°/180°/240°, square 0°/90°/180°/270°। Monochromatic ह्यू रखता है और लाइटनेस −30, −15, 0, +15, +30 (HSL %) या ±0.15/±0.3 (OKLCH L) से बदलता है। sRGB से बाहर के OKLCH रंग क्रोमा घटाकर gamut-map किए जाते हैं। Regenerate ह्यू 0–360°, सैचुरेशन 55–85% और लाइटनेस 45–60% वाला रैंडम बेस चुनता है।

सामान्य उपयोग मामले

लोगो के रंग से ब्रांड रंग खोजना
UI थीम के लिए एक्सेंट रंग
डेटा विज़ुअलाइज़ेशन की श्रेणी के रंग
पैलेट को CSS custom properties के रूप में एक्सपोर्ट करना
Tailwind थीम सेटअप

अक्सर पूछे जाने वाले प्रश्न

ह्यू OKLCH में घुमाऊं या HSL में?

OKLCH सभी रंगों की अनुभूत लाइटनेस बराबर रखता है, जिससे ज़्यादा संतुलित पैलेट मिलते हैं। HSL कई डिज़ाइन टूल में इस्तेमाल होने वाले क्लासिक कलर व्हील से मेल खाता है, पर उसके रंगों की चमक में काफ़ी अंतर हो सकता है।