Color Converter — HEX, RGB, HSL ऑनलाइन _

color conversion म्हणजे काय?

तुमचा ब्राउझर रेंडर करणारा प्रत्येक रंग शेवटी एक sRGB triple आहे — लाल, हिरव्या आणि निळ्या चॅनलसाठी 0 ते 255 दरम्यान तीन संख्या, आणि एक पर्यायी alpha. CSS Color Level 4 specification अनेक मजकूर फॉर्मॅट परिभाषित करते जे त्याच triple वर round-trip करतात, आणि perceptually-uniform OKLCH space. हे साधन त्या कोणत्याही एकाला वाचते, सर्वांमध्ये रूपांतरित करते, आणि दुसऱ्या रंगाशी WCAG 2.1 कॉन्ट्रास्ट गुणोत्तर दाखवते.

color conversion कसे कार्य करते?

रूपांतरण म्हणजे सुव्यवस्थित linear आणि non-linear transforms ची मालिका. प्रत्येक टप्पा तुमच्या ब्राउझरमध्ये चालतो — कोणतेही इनपुट आमच्या सर्व्हरपर्यंत पोहोचत नाही:

1. तुमचे इनपुट पार्स केले जाते. साधन 3, 4, 6 किंवा 8-डिजिट HEX, rgb()/rgba()/hsl()/hsla()/hsv()/hwb() चे functional forms जुन्या comma syntax किंवा आधुनिक slash-alpha syntax मध्ये, किंवा 150 नामित CSS रंगांपैकी कोणताही (rebeccapurple सह) आपोआप ओळखते.
2. पार्स केलेला रंग canonical sRGB मध्ये normalise केला जातो — चार floats {r, g, b, a} प्रत्येक 0–1 श्रेणीत. हा एकमेव सत्य स्त्रोत आहे ज्यातून प्रत्येक आउटपुट फॉर्मॅट काढला जातो.
3. HEX प्रत्येक चॅनलला त्याच्या 0–255 byte value मध्ये गोल करून आणि hex digits जोडून येतो. RGB / RGBA तेच bytes प्रिंट करतात. HSL आणि HSV मानक W3C cylindrical-coordinate algorithms लागू करतात; HWB HSV मधून hue, min(r, g, b) मधून whiteness आणि 1 - max(r, g, b) मधून blackness काढतो.
4. CMYK एक naive approximation आहे — k = 1 - max(r, g, b), नंतर residual channels मधून c, m, y. स्क्रीन पूर्वावलोकनासाठी योग्य आहे पण प्रिंटसाठी नाही: वास्तविक CMYK आउटपुटला ICC profile आवश्यक आहे जे हे साधन हेतुपुरस्सर एम्बेड करत नाही.
5. OKLCH css-color-4 forward path पाळतो: sRGB linearised होतो, LMS matrix ने गुणाकार होतो, cube-root काढला जातो, LMS-to-OKLab matrix ने गुणाकार होतो, आणि शेवटी rectangular OKLab ला polar OKLCH मध्ये रूपांतरित केले जाते. OKLCH perceptually uniform आहे, ज्यामुळे मानवी डोळ्यांना संतुलित दिसणाऱ्या palettes डिझाइन करण्यासाठी हे योग्य space आहे.

हा color converter का वापरावा?

• गोपनीयता: प्रत्येक रूपांतरण plain JavaScript वापरून तुमच्या ब्राउझरमध्ये चालते. तुम्ही पेस्ट केलेला रंग तुमच्या डिव्हाइसवरून कधीही बाहेर जात नाही — अप्रकाशित ब्रँड कामासाठी, अंतर्गत design systems साठी आणि NDA अंतर्गत client mocks साठी हे महत्त्वाचे आहे.
• डिझायनर-ते-डेव्हलपर handoff: Figma मधील HEX पेस्ट करा आणि Tailwind config साठी rgb() string, CSS custom property साठी hsl() string किंवा आधुनिक palette साठी oklch() string वाचा — एकाच ठिकाणी प्रत्येक फॉर्मॅट, टॅब्स दरम्यान कॉपी-पेस्टिंग नाही.
• WCAG अचूकता: कॉन्ट्रास्ट तपासणी अचूक WCAG 2.1 relative-luminance formula आणि साधारण व मोठ्या मजकुरासाठी प्रकाशित AA (4.5 / 3.0) आणि AAA (7.0 / 4.5) thresholds वापरते. दिलेले गुणोत्तर manual calculators शी 0.01 च्या आत जुळते.
• Dark-mode आणि palette derivation: HSL आणि OKLCH lightness ला एकाच channel म्हणून दाखवतात, त्यामुळे matched dark-mode tokens काढण्यासाठी किंवा एकाच seed पासून 10-step palette ramp तयार करण्यासाठी brand colour वर किंवा खाली सरकवणे सोपे आहे.

color conversion चे सामान्य उपयोग काय आहेत?

वेब डेव्हलपमेंट, डिझाइन आणि अॅक्सेसिबिलिटी कामात रंग रूपांतरण दिसते:

• Design systems: brand HEX ला CSS custom-property scale साठी matched HSL आणि OKLCH tokens मध्ये रूपांतरित करणे, नंतर प्रत्येक token combination पेज बॅकग्राउंडविरुद्ध WCAG AA pass करते हे तपासणे.
• Accessibility audits: वास्तविक product screen मधील foreground आणि background जोडी पेस्ट करणे आणि एकाच नजरेत साधारण-वजन आणि मोठ्या-वजन मजकुरासाठी कॉन्ट्रास्ट गुणोत्तर आणि AA/AAA verdicts वाचणे.
• Cross-tool round-trips: screenshot picker (HEX) मधून रंग काढणे, येथे पेस्ट करणे आणि hsl() किंवा oklch() string थेट Tailwind, Figma tokens किंवा CSS-in-JS theme मध्ये कॉपी करणे.

color conversion उदाहरण कसे दिसते?

प्रसिद्ध rebeccapurple विचारात घ्या. named-colour lookup ते #663399 मध्ये सोडवते. RGB रूपांतरण rgb(102, 51, 153) देते. HSL रूपांतरण hsl(270, 50%, 40%) देते — एक violet hue, अर्धी-saturated, चार-दहावी उज्ज्वल. कॉन्ट्रास्ट साधनाने शुद्ध पांढऱ्याविरुद्ध तो रंग तपासल्यास 7.39 जवळ गुणोत्तर येते, जे साधारण मजकुरासाठी AAA (7.0) आणि मोठ्या मजकुरासाठी AAA (4.5) पास करते — एक मजबूत, accessible foreground निवड. #663399 RGB → HSL → RGB → HEX मधून round-trip केल्यास मूळ string अचूकपणे, बाइट-दर-बाइट परत येते.

कोड, डिझाइन फाइल्स किंवा screenshot मध्ये भेटणाऱ्या कोणत्याही रंगासाठी हा converter quick reference म्हणून वापरा — आणि ship करण्यापूर्वी sanity check म्हणून कॉन्ट्रास्ट तपासणी. सर्व काही locally चालते, काहीही log होत नाही, आणि रूपांतरण गणित प्रकाशित W3C आणि WCAG specifications पाळते त्यामुळे संख्या तुमचे audit tool किंवा browser devtools दाखवतील त्याच्याशी जुळतात.