Palette

Color Palette Generator

OKLCH-आधारित ब्रांड पैलेट। एक बेस चुनें, हर क्लासिक हार्मनी और 50–950 टोनल स्केल पाएं। लॉक करें, री-रोल करें, CSS / Tailwind v4 / SCSS / JSON के रूप में एक्सपोर्ट करें।

Color Palette Generator — TL;DR

OKLCH-आधारित ब्रांड पैलेट। एक बेस चुनें, हर क्लासिक हार्मनी और 50–950 टोनल स्केल पाएं। लॉक करें, री-रोल करें, CSS / Tailwind v4 / SCSS / JSON के रूप में एक्सपोर्ट करें।

हमारा Color Picker & Converter एक समय में एक रंग के लिए है — चुनें / convert / कॉपी करें। यह टूल पैलेट के लिए है: एक बेस रंग डालें, एक झटके में पूरा brand-ready सिस्टम (हार्मनीज़ + टोनल स्केल) पाएं। यह एक शर्ट खरीदने और पूरी अलमारी पाने जैसा फ़र्क है।

HSL hues को असमान रूप से रखता है (60° पर पीला 240° पर नीले से कहीं ज़्यादा चमकीला लगता है, भले ही lightness मान समान हो)। HSL में triadic पैलेट का एक स्वैच दूसरों से ध्यान देने योग्य रूप से अधिक चमकीला या मंद होता है। OKLCH perceptually uniform है — समान OKLCH lightness वाले तीन स्वैच एक जैसी चमक वाले दिखते हैं। इसीलिए हर आधुनिक डिज़ाइन सिस्टम (Apple HI, Tailwind v4, IBM Carbon) हार्मनीज़ और स्केल के लिए OKLCH पर शिफ्ट हो रहा है।

आपके ब्रांड रंग कभी आपका डिवाइस नहीं छोड़ते। DevTools → Network खोलें और आप किसी भी ऑपरेशन के दौरान शून्य outbound requests देखेंगे।

टिप: अनलॉक्ड स्वैच री-रोल करने के लिए Space दबाएँ।

टोनल स्केल (50 → 950)
CSS
Tailwind v4
SCSS
JSON

डिज़ाइन सिस्टम के लिए बना है, सिर्फ़ सुंदर तस्वीरों के लिए नहीं

OKLCH हार्मनीज़, टोनल स्केल, लॉक-एंड-रीरोल, design-token एक्सपोर्ट — और कुछ छोटे टच जो इसे इस्तेमाल करने में सच में मज़ेदार बनाते हैं।

छह OKLCH हार्मनीज़

Complementary, analogous, triadic, tetradic, split-complementary, monochromatic — सभी OKLCH में गणना किए गए ताकि तीन saturated bright रंगों का triadic पैलेट समान रूप से चमकीला बना रहे। कोई HSL गंदलापन नहीं।

50 → 950 टोनल स्केल

अपना ब्रांड रंग डालें, OKLCH curve पर lightness चलाकर बनाया गया Tailwind-shape 50, 100, 200, … 900, 950 टोनल स्केल पाएं। Chroma चरम पर compress होता है ताकि रंग sRGB gamut में बने रहें।

लॉक + री-रोल (Coolors-स्टाइल)

किसी भी स्वैच को पिन करें (lock आइकन) और चुनी गई हार्मनी के भीतर बाकी को बदलने के लिए री-रोल दबाएँ (या बस Space दबाएँ)। तेज़ी से iterate करें, जो पसंद हो उसे रखें।

चार production-grade एक्सपोर्ट

CSS custom properties (--brand-500), Tailwind v4 @theme block, SCSS map, और JSON design tokens Style Dictionary / Figma Tokens के लिए तैयार। साथ ही 1200×200 PNG स्वैच स्ट्रिप।

WCAG कंट्रास्ट एक नज़र में

हर स्वैच काले या सफ़ेद में से बेहतर के विरुद्ध अपना WCAG कंट्रास्ट अनुपात दिखाता है, साथ में AA / AAA / fail बैज। एक्सेसिबिलिटी समस्याओं को शिप होने से पहले पहचानें।

डिज़ाइन से ही गोपनीयता

हर बाइट आपके डिवाइस पर रहता है। OKLCH गणित, हार्मनी जनरेशन, स्केल derivation, PNG एक्सपोर्ट सब JavaScript के रूप में लोकल चलते हैं। DevTools → Network खोलें और शून्य outbound requests सत्यापित करें।

ब्रांड पैलेट कैसे बनाएँ

एक बेस रंग से पूरा design-token-ready पैलेट तक चार चरण।

  1. 1

    अपना ब्रांड बेस रंग डालें

    रंग बॉक्स पर क्लिक करें, एक HEX पेस्ट करें, या प्रेरणा के लिए रैंडम बेस दबाएँ। टूल पूरे पैलेट को इसी रंग पर केंद्रित करता है — हार्मनी स्वैच और 11-चरण टोनल स्केल दोनों।

  2. 2

    एक हार्मनी चुनें

    डिफ़ॉल्ट Analogous है — बेस के 30° के भीतर तीन रंग, शांत ब्रांड पैलेट के लिए परफेक्ट। कंट्रास्ट उच्चारण के लिए Complementary। editorial / playful ब्रांड के लिए Triadic / Tetradic। टोनल one-hue सिस्टम के लिए Monochromatic। सभी OKLCH में गणना किए गए ताकि वे समान रूप से चमकीले बने रहें।

  3. 3

    खुश होने तक लॉक + री-रोल करें

    जो स्वैच रखना चाहते हैं उस पर lock आइकन क्लिक करें, फिर हार्मनी के भीतर बाकी को बदलने के लिए Space दबाएँ (या री-रोल दबाएँ)। तेज़ी से iterate करें। अगर आप एक exact मान सेट करना चाहते हैं तो किसी भी स्वैच के HEX फ़ील्ड पर क्लिक करके सीधे संपादित करें।

  4. 4

    design tokens के रूप में एक्सपोर्ट करें

    CSS आउटपुट (custom properties), Tailwind v4 (@theme block), SCSS map, या JSON design tokens कॉपी करें। या डिज़ाइन brief में डालने के लिए तैयार 1200×200 स्वैच स्ट्रिप के लिए PNG डाउनलोड करें दबाएँ।

ब्रांड डिज़ाइनरों + design-systems टीमों के लिए बना है

चार सामान्य परिदृश्य जहां privacy-first OKLCH पैलेट टूल Figma में हाथ से hex codes ट्यून करने को मात देता है।

नई ब्रांड पहचान स्प्रिंट

आपके पास एक ब्रांड रंग है, आपको उसके चारों ओर एक सिस्टम चाहिए। HEX डालें, Analogous चुनें, जब तक दो supporting रंग न मिल जाएँ री-रोल करें, तीनों लॉक करें। टोनल स्केल व्यू पर स्विच करें, Tailwind @theme block कॉपी करें, नई परियोजना के app.css में पेस्ट करें। कुल समय: 5 मिनट।

मौजूदा Tailwind प्रोजेक्ट में ब्रांड जोड़ना

डिफ़ॉल्ट Tailwind indigo आपका ब्रांड नहीं है। आपका ब्रांड #5B3FCD है। इसे डालें, एक 11-चरण टोनल स्केल पाएं जो Tailwind के spacing को बिल्कुल मिरर करता है। @theme block कॉपी करें — हर bg-brand-500 / text-brand-700 बस काम करता है।

लॉन्च से पहले एक्सेसिबिलिटी जाँचना

हर स्वैच अपना WCAG कंट्रास्ट अनुपात + AA/AAA बैज दिखाता है। जाँचें कि brand-500 सफ़ेद के विरुद्ध AA हिट करता है, और brand-100 brand-900 टेक्स्ट के साथ बैकग्राउंड tint के रूप में पठनीय रहता है। समस्या स्वैचों को व्यक्तिगत रूप से री-रोल करके ठीक करें।

Multi-brand डिज़ाइन सिस्टम

एजेंसियाँ / multi-brand कंपनियाँ N समानांतर डिज़ाइन सिस्टम बनाए रखती हैं, हर एक का आकार समान लेकिन ब्रांड hue अलग। हर ब्रांड के लिए वही हार्मनी + टोनल-स्केल वर्कफ़्लो उपयोग करें, हर एक को JSON tokens के रूप में एक्सपोर्ट करें, Style Dictionary में डालें। एक जैसा आकार, अलग पहचान।

100% निजी — आपके ब्राउज़र में चलता है

आपके ब्रांड रंग कभी आपका डिवाइस नहीं छोड़ते। DevTools → Network खोलें और आप किसी भी ऑपरेशन के दौरान शून्य outbound requests देखेंगे।

  • OKLCH गणित, हार्मनी जनरेशन, टोनल-स्केल derivation, WCAG कंट्रास्ट गणना, और PNG एक्सपोर्ट सब आपकी मशीन पर JavaScript के रूप में चलते हैं — कोई server-side rendering नहीं, कोई third-party API नहीं।
  • PNG एक्सपोर्ट एक लोकल canvas उपयोग करता है; स्वैच इमेज पूरी तरह ब्राउज़र memory में जनरेट होती है और Blob के रूप में डाउनलोड होती है — कुछ भी नेटवर्क पार नहीं करता।
  • कोई लॉगिन नहीं, रंग मानों पर कोई telemetry नहीं। हम सिर्फ़ cookie-consent स्थिति के लिए एक कुकी और भाषा वरीयता के लिए एक कुकी का उपयोग करते हैं।

संबंधित गाइड

OKLCH पैलेट, ब्रांड रंग सिस्टम, और design tokens पर हाथ से चुनी गई पठन सामग्री।

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

इसमें और एक सामान्य कलर पिकर में क्या अंतर है?

हमारा Color Picker & Converter एक समय में एक रंग के लिए है — चुनें / convert / कॉपी करें। यह टूल पैलेट के लिए है: एक बेस रंग डालें, एक झटके में पूरा brand-ready सिस्टम (हार्मनीज़ + टोनल स्केल) पाएं। यह एक शर्ट खरीदने और पूरी अलमारी पाने जैसा फ़र्क है।

OKLCH क्यों, HSL क्यों नहीं?

HSL hues को असमान रूप से रखता है (60° पर पीला 240° पर नीले से कहीं ज़्यादा चमकीला लगता है, भले ही lightness मान समान हो)। HSL में triadic पैलेट का एक स्वैच दूसरों से ध्यान देने योग्य रूप से अधिक चमकीला या मंद होता है। OKLCH perceptually uniform है — समान OKLCH lightness वाले तीन स्वैच एक जैसी चमक वाले दिखते हैं। इसीलिए हर आधुनिक डिज़ाइन सिस्टम (Apple HI, Tailwind v4, IBM Carbon) हार्मनीज़ और स्केल के लिए OKLCH पर शिफ्ट हो रहा है।

'टोनल स्केल (50 → 950)' का क्या मतलब है?

यह Tailwind-स्टाइल ब्रांड-कलर स्केल है: indigo-50 (सबसे हल्का), indigo-100, indigo-200, … indigo-900, indigo-950 (सबसे गहरा)। अपना ब्रांड रंग डालें और टूल एक निश्चित curve पर OKLCH lightness चलाकर सभी 11 चरण स्वचालित रूप से जनरेट करता है। परिणाम किसी भी Tailwind पैलेट टोकन के लिए drop-in रिप्लेसमेंट है, आपके ब्रांड hue में।

मैं एक स्वैच लॉक करके सिर्फ़ बाकी को कैसे री-रोल करूँ?

किसी भी स्वैच के टॉप-लेफ्ट में lock आइकन पर क्लिक करें — वह वहीं रहेगा। फिर चुनी गई हार्मनी के भीतर हर अनलॉक्ड स्वैच बदलने के लिए री-रोल दबाएँ या Space दबाएँ। इसी तरह आप एक शानदार पैलेट खोजते हैं: जिस ब्रांड रंग पर पहले से प्रतिबद्ध हैं उसे पिन करें, और उसके आसपास variations तलाशें।

क्या कुछ भी आपके server पर भेजा जाता है?

नहीं। OKLCH गणित, हार्मनी जनरेशन, टोनल-स्केल derivation, contrast-ratio गणना, PNG एक्सपोर्ट, हर clipboard कॉपी — सब आपके डिवाइस पर JavaScript में चलते हैं। DevTools → Network खोलें और आप शून्य outbound requests देखेंगे। अपने ब्रांड रंग, आंतरिक design tokens, NDA-locked पैलेट पेस्ट करें — कुछ भी आपके लैपटॉप से बाहर नहीं जाता।