DevToys Web Pro iconDevToys Web Proब्लॉग
हमें रेट करें:
ब्राउज़र एक्सटेंशन आज़माएँ:

रंग सामंजस्य जनरेटर

  • आधार
    स्कीम
    Base + opposite (180°)
    #3B82F6base
    rgb(59, 130, 246)
    hsl(217, 91%, 60%)
    #F6AF3Ccomplement (180°)
    rgb(246, 175, 60)
    hsl(37, 91%, 60%)
    तकनीकी विवरण

    कलर हार्मोनीज़ जनरेटर कैसे काम करता है

    यह टूल क्या करता है

    कलर हार्मोनीज़ जनरेटर एक ही बेस ह्यू से गणितीय रूप से संबंधित रंग सेट निकालता है: complementary, analogous, triadic, tetradic, square, split-complementary, monochromatic, और shades। हर पैलेट को HEX, RGB, और HSL वैल्यूज़ के साथ रेंडर किया जाता है, जिन्हें आप एक क्लिक में कॉपी करके सीधे CSS या डिज़ाइन टोकन्स में उपयोग कर सकते हैं।

    डेवलपर्स के सामान्य उपयोग मामले

    डिज़ाइनर अलग-अलग हार्मोनी नियमों के तहत ब्रांड ह्यू कैसे बदलता है, यह देखकर ब्रांड पैलेट के प्रोटोटाइप बनाते हैं। फ्रंटएंड डेवलपर प्राथमिक ब्रांड रंग से बटन, अलर्ट, और बैज के लिए एक्सेंट रंग तय करते हैं। डेटा विज़ इंजीनियर ऐसे कैटेगोरिकल रंग सेट चुनते हैं जो इरादतन लगें, लेकिन फिर भी अलग-अलग पहचाने जा सकें। प्रोडक्ट मैनेजर समर्पित डिज़ाइन टूलिंग के बिना ही डिज़ाइन प्रस्तावों की समीक्षा करते समय पैलेट विकल्पों की तुलना करते हैं।

    डेटा फ़ॉर्मैट्स, टाइप्स, या वैरिएंट्स

    आठ स्कीमें उपलब्ध हैं: Complementary (base + 180°), Analogous (base ± 30°), Triadic (3 colors 120° apart), Tetradic (rectangular 4-color), Square (4 colors 90° apart), Split-complementary (base + ±150°), Monochromatic (same hue at varying lightness 10–90%), और Shades (same hue, dark to light)। प्रत्येक रंग में उसके HEX, RGB, और HSL रिप्रेज़ेंटेशन के साथ एक रोल लेबल भी शामिल होता है।

    सामान्य समस्याएँ और किनारी मामले

    अत्यधिक desaturated या लगभग ग्रेस्केल बेस रंगों से निकली हार्मोनीज़ अलग-अलग स्कीमों में भी एक जैसी दिखती हैं — इसलिए किसी saturated बेस से शुरू करें। बहुत saturated बेस को triadic या tetradic स्कीमों के साथ मिलाने पर बहुत तेज़, संतुलित करना मुश्किल पैलेट बन सकते हैं; UI उपयोग के लिए saturation कम करने पर विचार करें। हार्मोनीज़ से निकली कुछ जोड़ियाँ WCAG कॉन्ट्रास्ट में फेल हो सकती हैं — रिलीज़ करने से पहले Color Contrast टूल में टेक्स्ट/बैकग्राउंड जोड़ियों को हमेशा सत्यापित करें।

    यह टूल बनाम कोड कब उपयोग करें

    आइडिएशन, त्वरित एक्सप्लोरेशन, और डिज़ाइन रिव्यू के लिए ब्राउज़र टूल का उपयोग करें। कोड में, chroma.js, colord, या culori जैसी लाइब्रेरीज़ आपको प्रोग्रामेटिक रूप से हार्मोनीज़ कंप्यूट करने, उन्हें डिज़ाइन-टोकन बिल्ड पाइपलाइनों में इंटीग्रेट करने, और अधिक समान दिखने वाले पैलेट के लिए Oklch जैसे perceptually uniform कलर स्पेसेज़ के साथ हार्मोनी गणित को संयोजित करने देती हैं।