सभी सामान्य फॉर्मेट्स के बीच कलर कन्वर्ट करें
डिज़ाइनर्स, डेवलपर्स और मार्केटर्स अक्सर अलग-अलग टूल्स के बीच कलर्स का इस्तेमाल करते हैं: CSS को HEX या HSL चाहिए, ब्रांड गाइड में RGB और CMYK होता है, और डिज़ाइन ऐप्स HSB दिखाते हैं। यह कलर कनवर्टर इनमें से किसी भी फॉर्मेट में कलर लेता है और उसे एक साथ बाकी सभी फॉर्मेट्स में दिखाता है, जिन्हें आप एक क्लिक में कॉपी कर सकते हैं। यह एक्सेसिबिलिटी के लिए टेक्स्ट कंट्रास्ट भी चेक करता है और टिंट्स (tints) व शेड्स (shades) का स्केल भी बनाता है।
फीचर्स
- कोई भी इनपुट फॉर्मेट: HEX (3, 4, 6 या 8 डिजिट), RGB/RGBA, HSL/HSLA, HSV/HSB, CMYK, प्लेन नंबर ट्रिपल्स और CSS कलर नेम्स।
- सभी आउटपुट एक साथ: HEX, RGB, HSL, HSV और CMYK, हर एक के साथ कॉपी बटन।
- ट्रांसपेरेंसी सपोर्ट — HEX8, RGBA और HSLA में अल्फा (alpha) वैल्यूज़ सुरक्षित रहती हैं।
- नेटिव कलर पिकर ताकि आप देखकर कलर चुन सकें।
- WCAG कंट्रास्ट चेकर जो नॉर्मल और बड़े टेक्स्ट के लिए AA रिज़ल्ट्स के साथ, सफेद और काले रंग के मुकाबले कंट्रास्ट चेक करता है।
- टिंट्स और शेड्स 10% से 90% लाइटनेस तक; लोड करने के लिए किसी भी स्वैच (swatch) पर क्लिक करें।
कलर फॉर्मेट्स की जानकारी
- HEX — हेक्साडेसिमल में
#RRGGBB, वेब डिज़ाइन में सबसे आम फॉर्मेट। एक वैकल्पिक चौथा पेयर (pair) ट्रांसपेरेंसी सेट करता है। - RGB — 0 से 255 तक लाल, हरा और नीला; स्क्रीन्स असल में इसी तरह कलर्स बनाती हैं।
- HSL — ह्यू (hue - कलर व्हील पर पोज़िशन), सैचुरेशन (saturation - तीव्रता) और लाइटनेस (lightness)। इसे मैन्युअली एडजस्ट करना आसान है: एक ही कलर का हल्का या गहरा वर्ज़न पाने के लिए सिर्फ लाइटनेस बदलें।
- HSV / HSB — ह्यू (hue), सैचुरेशन (saturation) और वैल्यू (value - ब्राइटनेस), जिसका इस्तेमाल डिज़ाइन टूल्स के ज़्यादातर कलर पिकर्स करते हैं।
- CMYK — सियान (cyan), मैजेंटा (magenta), येलो (yellow) और की (key - ब्लैक) इंक का प्रतिशत, जो प्रिंटिंग में इस्तेमाल होता है।
उदाहरण
आसमानी नीला #0EA5E9 असल में rgb(14, 165, 233), hsl(199, 89%, 48%), hsv(199, 94%, 91%) और लगभग cmyk(94%, 29%, 0%, 9%) होता है। सफेद रंग के साथ इसका कंट्रास्ट लगभग 2.8:1 है — जो बड़ी हेडिंग और आइकन के लिए तो ठीक है, लेकिन बॉडी टेक्स्ट के लिए बहुत कम है, जिसके लिए 4.5:1 की जरूरत होती है। काले रंग पर यह लगभग 7.6:1 तक पहुँच जाता है, जो आसानी से पास हो जाता है।
रंगों के साथ काम करने के टिप्स
- HSL में पैलेट बनाएँ। एक समान बटन स्टेट्स, बैकग्राउंड और बॉर्डर बनाने के लिए ह्यू (hue) और सैचुरेशन (saturation) को फिक्स रखें और सिर्फ लाइटनेस (lightness) बदलें।
- कंट्रास्ट पहले ही चेक कर लें। सफेद बैकग्राउंड पर टेक्स्ट के लिए कई ब्रांड कलर बहुत हल्के होते हैं; टेक्स्ट के लिए स्केल से गहरे शेड का इस्तेमाल करें और एक्सेंट (accents) के लिए ओरिजिनल कलर का।
- मतलब समझाने के लिए सिर्फ रंग पर निर्भर न रहें — कलर विज़न की समस्या वाले लोगों के लिए आइकन या लेबल भी जोड़ें।
- प्रिंट में रंग अलग दिख सकते हैं। चमकीले RGB रंग, खासकर गहरे नीले और हरे रंग, CMYK में अक्सर फीके दिखते हैं।
इमेजेज़ के साथ भी काम कर रहे हैं? इमेज कनवर्टर JPG, PNG और WebP के बीच फॉर्मेट बदलता है। CSS के लिए किसी छोटी इमेज या आइकन को एन्कोड करने के लिए, Base64 का इस्तेमाल करें।