कलर पैलेट जेनरेटर
डिज़ाइन सिस्टम, Tailwind CSS और डिज़ाइन टोकन के लिए प्रोफेशनल कलर स्केल जेनरेट करें
एल्गोरिदम
कंट्रास्ट लेवल
शेड काउंट
कलर पैलेट जेनरेटर के बारे में
कलर पैलेट जेनरेटर क्या है?
एक कलर पैलेट जेनरेटर एक बेस कलर से प्रोफेशनल कलर स्केल बनाता है। यह कई शेड्स (आमतौर पर 50-950) जेनरेट करता है जो डिज़ाइन सिस्टम में एक साथ सामंजस्यपूर्ण रूप से काम करते हैं, आपके पूरे एप्लिकेशन में स्थिरता सुनिश्चित करते हैं।
50-950 स्केल का उपयोग कैसे करें?
50-950 स्केल 11 शेड्स प्रदान करता है जहां 50 सबसे हल्का और 950 सबसे गहरा है। आमतौर पर, शेड 500 या 600 आपके बेस कलर का प्रतिनिधित्व करता है। बैकग्राउंड और सूक्ष्म तत्वों के लिए हल्के शेड्स (50-400) का उपयोग करें, और टेक्स्ट, बॉर्डर और जोर के लिए गहरे शेड्स (600-950) का उपयोग करें।
OKLCH क्या है?
OKLCH एक आधुनिक कलर स्पेस है जो परसेप्चुअली यूनिफॉर्म कलर प्रदान करता है। HSL के विपरीत, OKLCH सुनिश्चित करता है कि समान लाइटनेस वैल्यू वाले कलर मानव आंख को समान रूप से उज्ज्वल दिखाई देते हैं, जो इसे एक्सेसिबल और विज़ुअली बैलेंस्ड कलर पैलेट जेनरेट करने के लिए आदर्श बनाता है।
Tailwind CSS के लिए कैसे एक्सपोर्ट करें?
रेडी-टू-यूज़ कॉन्फ़िगरेशन प्राप्त करने के लिए "Tailwind CSS" एक्सपोर्ट ऑप्शन का उपयोग करें। जेनरेट किए गए कोड को अपनी tailwind.config.js फ़ाइल में theme.extend.colors के तहत कॉपी करें। Tailwind CSS v4 के लिए, CSS वेरिएबल्स के साथ "@theme" एक्सपोर्ट फ़ॉर्मेट का उपयोग करें।
CSS Variables का उपयोग कैसे करें?
CSS Variables (Custom Properties) आपको एक बार कलर डिफाइन करने और उन्हें अपनी पूरी स्टाइलशीट में पुन: उपयोग करने की अनुमति देते हैं। "CSS Variables" के रूप में एक्सपोर्ट करें और जेनरेट किए गए कोड को अपनी ग्लोबल CSS फ़ाइल में जोड़ें। फिर अपनी स्टाइल में var(--primary-500) का उपयोग करके कलर का संदर्भ लें।
Como gerar paleta para dark mode?
Para dark mode, escolha uma cor base mais escura ou use o algoritmo "Dark Mode Ready". Este algoritmo gera tons otimizados para fundos escuros, garantindo que os tons mais claros tenham contraste suficiente. Você também pode usar o Preview UI para testar sua paleta em modo escuro.
Qual a diferença entre OKLCH e HSL?
HSL (Hue, Saturation, Lightness) é um espaço de cores mais antigo onde cores com o mesmo valor de luminosidade podem parecer diferentes em brilho. OKLCH é perceptualmente uniforme, garantindo que cores com o mesmo valor de luminosidade apareçam igualmente brilhantes, resultando em paletas mais harmoniosas e acessíveis.
Como garantir acessibilidade nas cores?
Use a aba "Contraste" para verificar se suas combinações de cores atendem aos padrões WCAG AA (4.5:1) ou AAA (7:1). A ferramenta mostra automaticamente quais tons são seguros para texto branco ou preto, e fornece recomendações para garantir que seu design seja acessível para todos os usuários.
Quantos tons devo usar no meu design system?
A escala padrão de 11 tons (50-950) é ideal para a maioria dos design systems, oferecendo flexibilidade suficiente sem sobrecarregar. Para projetos menores, 9 tons podem ser suficientes. Para sistemas complexos com muitas variações, 11 tons fornecem granularidade adequada para todos os casos de uso.
Posso usar essas paletas comercialmente?
Sim! As paletas geradas são 100% livres para uso comercial e pessoal. Você tem total propriedade das cores geradas e pode usá-las em qualquer projeto, incluindo produtos comerciais, sites, aplicativos e materiais de marketing sem restrições.