मुफ़्त ऑनलाइन कलर पैलेट जनरेटर

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

• कोई हार्मनी मोड चुनें (Analogous, Complementary, Triadic आदि) या इसे Random पर रखें।
• जनरेट करें पर क्लिक करें या नए पैलेट के लिए स्पेस दबाएँ।
• किसी रंग को लॉक करने के लिए लॉक आइकन पर क्लिक करें ताकि वह दोबारा जनरेट करते समय बना रहे।
• HEX कोड को क्लिपबोर्ड पर कॉपी करने के लिए उस पर क्लिक करें।
• CSS कस्टम प्रॉपर्टीज़ पाने या इमेज के रूप में डाउनलोड करने के लिए CSS कॉपी करें का उपयोग करें।

रंग सिद्धांत और हार्मनी मोड

यह जनरेटर रंग सिद्धांत पर आधारित 7 हार्मनी मोड का समर्थन करता है। सदृश (Analogous) पैलेट कलर व्हील पर एक-दूसरे के 30° के भीतर के रंगों का उपयोग करते हैं · ये शांत और सुसंगत लगते हैं। पूरक (Complementary) पैलेट अधिकतम कंट्रास्ट के लिए 180° दूरी वाले रंगों को जोड़ते हैं। त्रिकोणीय (Triadic) पैलेट तीन समान दूरी वाले रंगों (120° अंतर) का उपयोग करते हैं जिससे जीवंत विविधता मिलती है। स्प्लिट-कॉम्प्लिमेंटरी एक बेस रंग और उसके पूरक के आसपास के दो रंगों को लेता है · बोल्ड पर अधिक सूक्ष्म। एकवर्णी (Monochromatic) पैलेट केवल एक ह्यू की हल्कापन और संतृप्ति बदलते हैं · सुरुचिपूर्ण और मिनिमल। वर्ग (Square) 90° दूरी पर चार रंगों का उपयोग करता है जिससे संतुलित और रंगीन पैलेट बनता है।

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

मैं इन रंगों का उपयोग अपने प्रोजेक्ट में कैसे करूँ?

पेस्ट के लिए तैयार CSS कस्टम प्रॉपर्टीज़ पाने हेतु "CSS कॉपी करें" पर क्लिक करें। आप व्यक्तिगत HEX कोड पर क्लिक करके उन्हें कॉपी कर सकते हैं, या पूरे पैलेट को PNG इमेज के रूप में निर्यात करके Figma या Canva जैसे डिज़ाइन टूल में उपयोग कर सकते हैं।

एक पैलेट में कितने रंग होने चाहिए?

अधिकांश डिज़ाइन 3-5 रंगों के साथ सबसे अच्छा काम करते हैं: एक प्राथमिक रंग, एक द्वितीयक रंग, एक एक्सेंट, और 1-2 तटस्थ रंग। अपने पैलेट का विस्तार करने के लिए "+ रंग जोड़ें" बटन का उपयोग करें या कम रंगों के साथ जनरेट करके रंग हटाएँ।

क्या मैं पसंद के रंग लॉक कर सकता हूँ?

हाँ! किसी भी रंग स्वैच पर लॉक आइकन क्लिक करें। नए पैलेट जनरेट करते समय लॉक किए गए रंग अपनी जगह पर रहते हैं जबकि अनलॉक वाले रैंडम हो जाते हैं। यह किसी विशेष ब्रांड रंग के इर्द-गिर्द पैलेट बनाने के लिए बढ़िया है।

हार्मनी मोड क्या हैं?

हार्मनी मोड रंग सिद्धांत के संबंधों के आधार पर पैलेट बनाते हैं। Analogous शांत पैलेट के लिए पास-पास के ह्यू का उपयोग करता है। Complementary मजबूत कंट्रास्ट के लिए विपरीत ह्यू का उपयोग करता है। Triadic, Split-Complementary, और Square कलर व्हील के चारों ओर ह्यू को समान रूप से वितरित करते हैं। Monochromatic एक ह्यू रखता है और हल्कापन बदलता है · साफ़, मिनिमल डिज़ाइनों के लिए उत्तम।

Color palette generator क्या है?

Color palette generator ऐसे रंगों का सेट चुनता है जो color theory के नियमों के आधार पर दृश्य रूप से एक साथ काम करते हैं। आप उसे एक शुरुआती संकेत देते हैं (एक base color, एक harmony mode, या पूर्ण randomness), और वह तीन से पाँच hexadecimal codes लौटाता है जो color wheel पर सोचे-समझे स्थानों पर बैठते हैं। Output CSS variables, Figma file, ब्रांड गाइडलाइन या स्लाइड डेक में डालने के लिए तैयार है।

आधुनिक web tools रंगों को hexadecimal (#2b7190), RGB (43, 113, 144), HSL (199, 54%, 37%) या OKLCH (51.3% 0.066 233.4) में व्यक्त करते हैं। Hex सबसे ज़्यादा copy-paste करने योग्य है; HSL हाथ से बदलने में सबसे सहज है (गहरे variant के लिए lightness कम करें); OKLCH (CSS Color 4 में introduced, 2023 से browsers में supported) perceptually uniform है, जो design tokens के लिए महत्वपूर्ण है। यह टूल डिफ़ॉल्ट रूप से hex emit करता है और आपको variables और OKLCH-friendly hue stepping के लिए CSS custom properties कॉपी करने देता है।

सारा generation आपके browser में होता है। Harmony modes HSL hue rotation के माध्यम से एक base color से compute होते हैं, फिर वापस hex में बदलते हैं। Lock button आपके पसंदीदा को बनाए रखता है जब बाकी palette फिर से shuffle होती है। Space key page छोड़े बिना एक नया generation शुरू करता है, जो exploration को तेज़ बनाता है।

Generator ke andar kya hai

ऊपरी bar generation बदलने वाले तीन knobs को समूहित करता है: एक Generate बटन जो नई palette बनाता है, सात harmony rules (Random, Analogous, Complementary, Triadic, Split-Complementary, Monochromatic, Square) वाला एक Mode dropdown, और गैर-यादृच्छिक modes को seed करने के लिए एक Base color picker. Add Color बटन palette को डिफ़ॉल्ट पाँच swatches से आगे बढ़ाता है, उन design systems के लिए उपयोगी जिन्हें अधिक tones चाहिए।

हर swatch अपना hex code एक गहरी pill पर दिखाता है जो किसी भी background पर पढ़ने योग्य रहती है। Hex पर click करके उसे कॉपी करें। Lock पर click करके swatch को भविष्य की generations में freeze करें, इसी तरह आप एक brand color के चारों ओर palette बनाते हैं: brand lock करें, फिर से generate करें, तीन मेल खाते साथी पाएँ। हर swatch के अंदर action bar lock, copy और remove icons को 32-pixel touch targets के भीतर रखता है ताकि Lighthouse का target-size नियम पूरा हो।

Palette के नीचे, CSS Variables export block आपके वर्तमान रंगों के साथ :root custom properties के रूप में लाइव अपडेट होता है। Export Image बटन palette को एक छुपे canvas के माध्यम से PNG में serialize करता है, जो design reviews में साझा करने या moodboard पर pin करने के लिए सुविधाजनक है। Keyboard shortcut Space तुरंत regenerate करता है, बिना किसी focus बदलाव के।

Itihaas aur prishthbhumi

Isaac Newton सफ़ेद रोशनी को विभाजित करते हैं (1666)

Isaac Newton के 1666 के Cambridge में prism प्रयोगों ने दिखाया कि सफ़ेद रोशनी रंगों के एक निरंतर spectrum से बनी है। Opticks (1704) में, उन्होंने एक सात-रंग वाला wheel बनाया जिसमें red, orange, yellow, green, blue, indigo और violet इस तरह रखे थे कि diametrically विपरीत रंग सुरीले complementaries बनाएँ। हर आधुनिक color wheel इसी एक diagram से उपजा है।

Goethe ka color theory (1810)

Johann Wolfgang von Goethe की 1810 की Theory of Colours ने Newton की भौतिकी को मानवीय अनुभूति के पहलू में पुनः ढाला। Goethe पहले व्यक्ति थे जिन्होंने afterimages, simultaneous contrast और लाल की मनोवैज्ञानिक गर्मी बनाम नीले की ठंडक को व्यवस्थित रूप से वर्णित किया। उनके काम ने Turner, Schopenhauer और color psychology के पूरे क्षेत्र को प्रभावित किया जो आज art schools पढ़ाती हैं।

Johannes Itten harmony नियमों को औपचारिक करते हैं (1961)

Bauhaus शिक्षक Johannes Itten ने 1961 में The Art of Color (Kunst der Farbe) प्रकाशित की। उनका बारह-तीली color wheel और सात contrasts (hue, value, temperature, complementary, simultaneous, saturation, extension) art और design schools में मानक पाठ्यक्रम बने। इस टूल में harmony modes (Analogous, Complementary, Triadic, Split-Complementary, Square) सीधे Itten के अध्यायों से आते हैं।

Pantone Matching System (1963)

M. Harris and Sons नामक commercial printer के Pantone में Lawrence Herbert ने 1963 में Pantone Matching System शुरू किया। Chip book ने designers और printers को एक साझा संख्यात्मक संदर्भ दिया, ताकि एक brand color paper stocks, screens और कपड़ों पर पुनरुत्पादित होकर भी बचा रहे। 2000 में शुरू हुआ Color of the Year अब fashion, interiors और web design में palette के रुझान तय करता है।

Web-safe palette और 216 रंग (1996)

जब शुरुआती web पर 8-bit displays का दबदबा था, Lynda Weinman ने 1996 में Mac और Windows के बीच एक जैसा rendering सुनिश्चित करने के लिए 216-color web-safe palette संहिताबद्ध की। 24-bit color के व्यापक हो जाने पर (लगभग 2000) palette अप्रचलित हो गई, लेकिन उसने जो hex syntax लोकप्रिय किया (#RRGGBB) वही CSS, HTML और design tools में रंग लिखने का प्रमुख तरीक़ा बना हुआ है।

OKLCH और perceptually uniform color (2020)

Bjoern Ottosson के 2020 के OKLab पेपर ने एक perceptually uniform color space प्रस्तुत किया जिसमें HSL की lightness असंगतियाँ नहीं हैं। CSS Color Level 4 (Chrome 111, Safari 15.4, Firefox 113 से browsers) ने oklch() syntax जोड़ा। Design tokens, सुलभ color contrast और palette generation का भविष्य तेज़ी से OKLCH में बस रहा है, क्योंकि perceptual uniformity का मतलब है कि एक ही L value वाले दो रंग वाकई बराबर चमकीले दिखते हैं।

Praayogik workflows

एक रंग से ब्रांड पहचान बनाना

Base color को अपने ब्रांड के hex पर set करें, पहला swatch lock करें, mode को Analogous या Split-Complementary पर बदलें, और Generate तब तक click करें जब तक चार साथी रंग सही न लगें। CSS variables कॉपी करें और उन्हें अपने design system tokens में paste करें। नतीजा theory-समर्थित harmonies के साथ आपके ब्रांड पर टिकी एक palette है।

Dark mode pairs design karna

अपने dark mode background को base के रूप में लेकर एक Monochromatic palette चुनें। पाँच swatches आपको graduated lightness में background, surface, divider, secondary text और primary text देते हैं। Light mode के लिए, एक हल्के base के साथ एक अलग Monochromatic palette generate करें। दोनों palettes prefers-color-scheme के माध्यम से जुड़कर बिना अस्थायी जोड़तोड़ के अधिकांश theming आवश्यकताओं को पूरा करती हैं।

Data visualization के लिए रंग चुनना

श्रेणीगत data (bar charts, pie segments) के लिए, Triadic या Square palettes आपको तीन या चार स्पष्ट hues देती हैं जो एक व्यस्त chart पर अलग-अलग दिखते हैं। अनुक्रमिक data (heatmaps, choropleth maps) के लिए, hue स्थिर रखते हुए lightness बदलने के लिए Monochromatic का उपयोग करें। Chart background के विरुद्ध contrast जाँचें; Vega-Lite जैसे data-viz tools पड़ोसी श्रेणियों के बीच कम से कम 3:1 की अपेक्षा रखते हैं।

Accessibility-first palette का मसौदा

एक palette generate करें, फिर हर pair को contrast checker (WebAIM, Tanaguru) में paste करें। Background पर body text के लिए कम से कम 4.5:1 (WCAG AA) चाहिए। बड़े text या UI components के लिए, 3:1 सीमा है। यदि palette विफल हो, नई बनाएँ या brand swatch lock करके बाकी को compliant set खोजने के लिए फिर से shuffle होने दें।

Mood-board अन्वेषण

दर्जनों यादृच्छिक palettes के बीच घूमने के लिए Space बार-बार दबाएँ। जब कोई आपकी नज़र में आए, सबसे अच्छा swatch lock करें, Analogous पर बदलें, और उस पर आधारित विविधताएँ खोजने के लिए generate करते रहें। Space-bar loop click करने से तेज़ है, जो आपको प्रवाह तोड़े बिना right-brain exploration mode में रहने देता है।

Print-to-screen color मिलान

जब आपके पास एक मुद्रित संदर्भ (एक Pantone chip या एक कपड़े का swatch) हो, सबसे क़रीबी digital समतुल्य eyedrop करें और उसे Base color के रूप में उपयोग करें। Harmony modes फिर आपके संदर्भ के चारों ओर फैल जाते हैं। ध्यान दें कि print CMYK है और screen RGB है, इसलिए सटीक मेल असंभव है; लक्ष्य ऐसी palette है जो उसी ब्रांड के रूप में पढ़ने के लिए पर्याप्त क़रीबी हो।

Aam khataarey

WCAG contrast स्वतः नहीं होता

एक theory-सुंदर palette फिर भी accessibility विफल कर सकती है। Pastel-on-pastel जोड़े (हल्के गुलाबी पर हल्का पीला) सुहावने लगते हैं लेकिन उनका contrast 2:1 से कम होता है। प्रस्तावित text-on-background जोड़ों को हमेशा WCAG checker में जाँचें। यदि palette को body text के लिए काम करना है, पहले contrast आवश्यकता के चारों ओर बनाएँ, harmony बाद में।

Color blindness 8% पुरुषों को प्रभावित करती है

Red-green deuteranopia color vision deficiency का सबसे आम रूप है, जो लगभग 8% पुरुषों और 0.5% महिलाओं को प्रभावित करता है। एक deuteranopic दर्शक के लिए red-green Complementary palette एक भूरा सा धब्बा बन जाती है। श्रेणीगत color (charts, status badges, traffic lights) के लिए, रंग को आकार, label या pattern के साथ जोड़ें, और Stark या Sim Daltonism जैसे simulator में जाँचें।

HSL perceptually uniform नहीं है

HSL में, 50% lightness पर yellow उसी 50% lightness पर blue से बहुत अधिक brighter दिखता है। HSL मॉडल सभी hues को संख्यात्मक रूप से बराबर मानता है, लेकिन मानवीय आँखें नहीं। Generator hue rotation के लिए आंतरिक रूप से HSL में काम करता है, इसलिए समान S और L वाले दो swatches का अभी भी ध्यान देने योग्य रूप से अलग perceptual weight हो सकता है। Perceptually संतुलित palettes के लिए, OKLCH-aware tools (Leonardo, Open Color) पर बदलें।

sRGB और Display P3 के बीच gamut अंतर

आधुनिक Apple displays (2015 के iMacs से, 2016 के MacBook Pros से, iPhone 7 के बाद से सभी) Display P3 का उपयोग करते हैं, जो sRGB से व्यापक color gamut है। Display P3 पर जीवंत दिखता एक saturated red वही hex एक पुराने sRGB-only monitor पर render होने पर फीका लग सकता है। हर जगह एक समान दिखने वाले brand colors के लिए, sRGB के छोटे gamut के भीतर रहें।

Hex codes डिफ़ॉल्ट रूप से alpha नहीं रखते

तीन-digit (#abc) और छह-digit (#aabbcc) hex अपारदर्शी हैं। आठ-digit hex (#aabbcc80, जहाँ 80 50% alpha है) CSS Color 4 और आधुनिक browsers में समर्थित है पर पुराने tooling में नहीं। यदि आपको पारदर्शिता चाहिए, इसके बजाय rgba() या hsla() का उपयोग करें, या अपारदर्शी रंगों पर टिकें और parent की opacity को blending सँभालने दें।

Color picker calibration का बहाव

एक uncalibrated monitor एक संदर्भ से कई Delta-E इकाइयाँ दूर drift कर सकता है, जिसका मतलब है कि आपकी screen पर साफ़ दिखती palette किसी और की screen पर गंदी या over-saturated लग सकती है। Brand-critical कार्य के लिए, Spyder या i1Display डिवाइस से calibrate करें। अधिकांश web design के लिए, screen की भिन्नता टाली नहीं जा सकती; ऐसे रंग चुनें जो मध्य सीमा में काम करें।

Gopniyata aur data handling

सब कुछ आपके browser में चलता है। Harmony गणित JavaScript है, canvas export स्थानीय है, और Clipboard API को उपयोगकर्ता के gesture की ज़रूरत होती है। हम आपके hex codes कहीं नहीं भेजते, यह track नहीं करते कि आप कौन सी palettes बनाते हैं, और cookies या localStorage में कुछ भी संग्रहीत नहीं करते। पेज reload करें और पिछली palette चली गई।

एक बार पेज load हो जाने पर, generator offline काम करता है। आप इसे एक उड़ान पर, corporate proxy के अंदर या air-gapped environment में उपयोग कर सकते हैं। नेटवर्क को छूने वाली एकमात्र क्रिया वैकल्पिक Export Image है, जो एक blob URL के माध्यम से डाउनलोड करती है, और डाउनलोड स्वयं आपके रंगों को कहीं भी संचारित नहीं करता।

यह generator कब इस्तेमाल नहीं करना चाहिए

Semantic tokens के साथ design system स्थापित करना

Design systems को paired light और dark mode मानों, contrast गारंटी और नामित scale steps के साथ नामित, semantic tokens (color-primary-500, color-error, color-warning) चाहिए। एक समर्पित टूल (Material Color Tool, Open Color, Adobe Leonardo) या एक token-management system (Style Dictionary, Tokens Studio) का उपयोग करें। यह generator exploration के लिए है, system design के लिए नहीं।

Print color management (CMYK, Pantone)

Offset printing के लिए CMYK color separations को पेशेवर tools (Adobe Illustrator का swatch panel, Pantone Connect) चाहिए। RGB-to-CMYK रूपांतरण नुकसानदेह है और ink-coverage सीमाएँ महत्वपूर्ण हैं। यदि आपकी palette बड़े पैमाने पर print होगी, शुरू से ही printer के color spec के साथ काम करें, screen-only hex generator से नहीं।

Body text के लिए सुलभ palettes बनाना

वे palettes जो हर pairing में WCAG AA या AAA contrast की गारंटी देती हों, उनके लिए contrast-first टूल जैसे Tanaguru Contrast-Finder, Adobe Leonardo या APCA-आधारित tools का उपयोग करें। यह generator harmony नियमों का पालन करता है, contrast नियमों का नहीं, इसलिए एक सुंदर Analogous palette में 1.5:1 का text-to-background जोड़ा हो सकता है जो accessibility विफल करता है।

Animations और color interpolation

Gradient stops या color animations के लिए, आपको OKLCH या LCH में एक perceptually uniform interpolation चाहिए, कच्चा HSL या hex नहीं। CSS gradient interpolation डिफ़ॉल्ट sRGB पर मटमैले midpoints उत्पन्न करता है (yellow और blue के बीच प्रसिद्ध gray midpoint). Animated transitions के लिए color-interpolation tools (Erin Kissane का chroma.js, oklch.com) का उपयोग करें।

Aur sawaal

मुझे hex बनाम RGB बनाम HSL कब इस्तेमाल करना चाहिए?

Hex सबसे संक्षिप्त और सबसे अधिक copy होने वाला है, design hand-offs के लिए बढ़िया। RGB code में गणना करने के लिए सबसे आसान है (हर channel 0-255). HSL हाथ से बदलने के लिए सबसे आसान है: रंग बदलने के लिए hue, variants के लिए lightness बदलें। आधुनिक CSS के लिए, OKLCH design systems के लिए सबसे भविष्य-सुरक्षित है क्योंकि यह perceptually uniform है।

मुझे कौन सा harmony mode चुनना चाहिए?

शांत, सुसंगत palettes (interfaces, blogs) के लिए Analogous से शुरू करें। उच्च-contrast call-to-action जोड़ों के लिए Complementary उपयोग करें। Triadic और Square charts या चंचल ब्रांडों के लिए जीवंत श्रेणीगत palettes देते हैं। Monochromatic dark-mode और tonal design systems के लिए सबसे अच्छा है। Split-Complementary 'bold but not jarring' का सबसे सुरक्षित विकल्प है।

मैं accessibility कैसे जाँचूँ?

हर text-on-background जोड़े को WebAIM Contrast Checker, Tanaguru या APCA Contrast Tool में paste करें। Body text के लिए कम से कम 4.5:1 (WCAG AA), large text और UI components के लिए 3:1, prose-heavy reading apps के लिए 7:1 (WCAG AAA) के लिए लक्ष्य रखें। श्रेणीगत उपयोग के लिए color-blindness simulators (Stark, Sim Daltonism) से जाँचें।

क्या मैं Figma या Sketch में export कर सकता हूँ?

Copy CSS आपको ready-to-paste custom properties देता है। Figma और Sketch दोनों hex codes को अपने color picker के माध्यम से सीधे import करते हैं। Export Image बटन आपको moodboards या screenshots के लिए उपयुक्त PNG देता है। Tokens-friendly export (W3C Design Token Community Group format) के लिए, hex codes copy करें और उन्हें Tokens Studio या Style Dictionary में अनुकूलित करें।

एक palette में कितने रंग होने चाहिए?

अधिकांश websites और apps के लिए तीन से पाँच: एक प्राथमिक brand color, एक accent या secondary, text के लिए एक neutral, और एक या दो उपयोगी neutrals (border, background). बड़े design systems 9 से 12 नामित tokens (primary, secondary, success, warning, error, info, और neutrals) का उपयोग करते हैं। टूल पाँच से शुरू होता है पर Add Color उसे बढ़ाता है।

OKLCH क्या है और क्या मुझे उसे इस्तेमाल करना चाहिए?

OKLCH एक perceptually uniform color space है जिसे 2023 में CSS में जोड़ा गया। HSL के विपरीत, समान L value वाले दो OKLCH रंग वाकई समान चमकीले दिखते हैं। Design systems और सुसंगत tonal scales के लिए यह नई best practice है। Browser समर्थन वर्तमान संस्करणों में सार्वभौमिक है (Chrome 111+, Safari 15.4+, Firefox 113+). पुराने browsers में shaalin fallback के लिए, oklch() के साथ एक sRGB hex value भी भेजें।

संबंधित टूल