कलर कनवर्टर - HEX से RGB, HSL और HSV ऑनलाइन
HEX, RGB, HSL और HSV फॉर्मेट के बीच रंग बदलें, लाइव प्रीव्यू के साथ। CSS कलर कोड कॉपी करें — मुफ्त कलर कोड कनवर्टर।
अक्सर पूछे जाने वाले प्रश्न
कलर कनवर्टर क्या है?
कलर कनवर्टर एक उपकरण है जो HEX, RGB, HSL, HSV, और CMYK जैसे विभिन्न प्रारूपों के बीच रंग मानों को परिवर्तित करता है। प्रत्येक प्रारूप रंगों को अलग तरह से दर्शाता है: HEX हेक्साडेसिमल नोटेशन (#FF5733) का उपयोग करता है, RGB लाल-हरा-नीला मान (rgb(255, 87, 51)) का उपयोग करता है, HSL ह्यू-सैचुरेशन-लाइटनेस (hsl(14, 100%, 60%)) का उपयोग करता है, और CMYK प्रिंट के लिए उपयोग होता है। यह उपकरण वेब डेवलपमेंट, डिज़ाइन और एक्सेसिबिलिटी कार्य के लिए निर्बाध रूपांतरण सक्षम करता है।
HEX, RGB और HSL में क्या अंतर है?
HEX एक कॉम्पैक्ट 6-अंकीय हेक्साडेसिमल प्रारूप (#RRGGBB) है जो आमतौर पर CSS और डिज़ाइन टूल्स में उपयोग होता है। RGB (लाल, हरा, नीला) प्रत्येक चैनल के लिए 0-255 दशमलव मान का उपयोग करता है, जो प्रोग्रामेटिक हेरफेर के लिए सहज है। HSL (ह्यू, सैचुरेशन, लाइटनेस) अधिक मानव-अनुकूल है: ह्यू रंग है (0-360 डिग्री), सैचुरेशन तीव्रता है (0-100%), और लाइटनेस चमक है (0-100%)। कॉम्पैक्ट नोटेशन के लिए HEX, गणना के लिए RGB, और रंग गुणों को दृश्य रूप से समायोजित करते समय HSL का उपयोग करें।
HSV और HSL में क्या अंतर है?
HSV (ह्यू, सैचुरेशन, वैल्यू) और HSL (ह्यू, सैचुरेशन, लाइटनेस) दोनों समान ह्यू कंपोनेंट (0-360 डिग्री) का उपयोग करते हैं, लेकिन वे चमक को कैसे दर्शाते हैं इसमें भिन्न हैं। HSV में, अधिकतम Value (V=100%) शुद्ध रंग देता है, जबकि HSL में, अधिकतम Lightness (L=100%) हमेशा सफेद में परिणत होता है। HSV ग्राफिक डिज़ाइनरों और कलर पिकर द्वारा पसंद किया जाता है क्योंकि यह पेंट मिश्रण के लिए अधिक सहजता से मैप होता है। HSL CSS के लिए बेहतर है क्योंकि लाइटनेस समायोजित करने से पूर्वानुमानित टिंट और शेड बनते हैं।
WCAG कंट्रास्ट अनुपात क्या है और यह क्यों महत्वपूर्ण है?
WCAG (वेब कंटेंट एक्सेसिबिलिटी गाइडलाइंस) कंट्रास्ट अनुपात फोरग्राउंड और बैकग्राउंड रंगों के बीच ल्यूमिनेंस अंतर को मापता है। अनुपात 1:1 (कोई कंट्रास्ट नहीं) से 21:1 (सफेद पर काला) तक होता है। एक्सेसिबिलिटी अनुपालन के लिए, सामान्य टेक्स्ट को 4.5:1 (AA) या 7:1 (AAA) की आवश्यकता होती है, जबकि बड़े टेक्स्ट (18px+ बोल्ड या 24px+) को 3:1 (AA) या 4.5:1 (AAA) की आवश्यकता होती है। उचित कंट्रास्ट सुनिश्चित करता है कि दृष्टि दोष वाले उपयोगकर्ताओं और विभिन्न प्रकाश स्थितियों में सामग्री पढ़ने योग्य हो।
कलर हार्मोनीज़ क्या हैं और मैं इन्हें कैसे उपयोग करूं?
कलर हार्मोनीज़ रंगों के संयोजन हैं जो कलर व्हील पर उनकी स्थिति के आधार पर सौंदर्यपूर्ण रूप से मनभावन होते हैं। कॉम्प्लिमेंटरी रंग एक दूसरे के विपरीत होते हैं (जैसे, नीला और नारंगी), उच्च कंट्रास्ट बनाते हैं। एनालॉगस रंग आसन्न होते हैं (जैसे, नीला, नीला-हरा, हरा), सामंजस्यपूर्ण डिज़ाइन बनाते हैं। ट्रायडिक रंग त्रिकोण बनाते हैं (जैसे, लाल, पीला, नीला), संतुलित विविधता प्रदान करते हैं। जोर देने के लिए कॉम्प्लिमेंटरी, सुसंगत डिज़ाइन के लिए एनालॉगस, और जीवंत इंटरफेस के लिए ट्रायडिक का उपयोग करें।
क्या यह कलर कनवर्टर सुरक्षित और निजी है?
हां। यह उपकरण क्लाइंट-साइड JavaScript का उपयोग करके 100% आपके ब्राउज़र में चलता है। कोई भी रंग डेटा, पैलेट, या डिज़ाइन जानकारी कभी भी किसी सर्वर पर नहीं भेजी जाती। सभी रूपांतरण, कंट्रास्ट गणना, और पैलेट जनरेशन आपके डिवाइस पर स्थानीय रूप से होते हैं। यह गोपनीय ब्रांड रंगों, क्लाइंट प्रोजेक्ट्स, या किसी भी संवेदनशील डिज़ाइन कार्य के लिए इसे सुरक्षित बनाता है।
कोड उदाहरण
// HEX to RGB
const hexToRgb = (hex) => {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
};
// RGB to HSL
const rgbToHsl = (r, g, b) => {
r /= 255; g /= 255; b /= 255;
const max = Math.max(r, g, b), min = Math.min(r, g, b);
let h, s, l = (max + min) / 2;
if (max === min) { h = s = 0; }
else {
const d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch (max) {
case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break;
case g: h = ((b - r) / d + 2) / 6; break;
case b: h = ((r - g) / d + 4) / 6; break;
}
}
return { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100) };
};
console.log(hexToRgb('#FF5733')); // { r: 255, g: 87, b: 51 }
console.log(rgbToHsl(255, 87, 51)); // { h: 11, s: 100, l: 60 }