रंग परिवर्तक (HEX/RGB/HSL)

रंग के फ़ॉर्मेट — डिजिटल डिज़ाइन की भाषा

डिजिटल दुनिया में रंगों को express करने के कई तरीके हैं। जब एक designer किसी web page या app का UI बनाता है, तो उसे रंगों को precise mathematical values के रूप में define करना होता है। HEX, RGB और HSL — ये तीनों formats इसी काम के लिए हैं, लेकिन इनका नज़रिया अलग-अलग है।

HEX Color Format

HEX format वेब डिज़ाइन का सबसे क्लासिक तरीका है। #FF5733 जैसे values CSS में सबसे ज़्यादा उपयोग होते हैं।

HEX कैसे काम करता है

#RRGGBB format में:

• पहले दो digits Red channel (00-FF)
• अगले दो digits Green channel (00-FF)
• आखिरी दो digits Blue channel (00-FF)

FF hexadecimal में 255 होता है (maximum brightness), 00 मतलब 0 (no color)। इसलिए #FF0000 pure red है, #00FF00 pure green है, #0000FF pure blue है, #FFFFFF white और #000000 black।

Short form में #RGB लिखा जा सकता है जहां प्रत्येक digit double होती है — #F53 = #FF5533।

RGB Color Format

RGB format लाल, हरे और नीले रंग के intensity values को 0-255 की range में express करता है। CSS में rgb(255, 87, 51) लिखते हैं।

RGB के फायदे

RGB format mathematically intuitive है। रंग mixing की logic सरल है — दो primary colors को equal amounts में मिलाओ तो secondary color बनता है। rgb(255, 165, 0) orange है। Designers जो photo editing tools (Photoshop, GIMP) use करते हैं वे RGB से familiar होते हैं।

RGBA — Transparency के साथ

rgba(255, 87, 51, 0.5) में चौथा parameter alpha channel है जो 0.0 (completely transparent) से 1.0 (completely opaque) तक होता है। यह CSS overlays और semi-transparent elements के लिए ज़रूरी है।

HSL Color Format

HSL format designers के लिए सबसे intuitive है क्योंकि यह human perception के करीब है।

HSL के तीन parameters:

• H (Hue): रंग का प्रकार — 0° से 360° तक। 0°/360° = red, 120° = green, 240° = blue
• S (Saturation): रंग की तीव्रता — 0% (grey) से 100% (vivid color)
• L (Lightness): रोशनी — 0% (black) से 100% (white), 50% = normal

HSL के व्यावहारिक फायदे

HSL का सबसे बड़ा फायदा है कि आप programmatically color variations आसानी से बना सकते हैं। एक button के लिए normal, hover, और active states:

/* Normal */
background: hsl(210, 70%, 50%);
/* Hover - बस lightness बदलो */
background: hsl(210, 70%, 40%);
/* Disabled - बस saturation कम करो */
background: hsl(210, 20%, 50%);

CSS में रंग formats का practical उपयोग

CSS में तीनों formats valid हैं। चुनाव context पर निर्भर करता है:

• Design systems और component libraries: HSL best है क्योंकि color scales programmatically generate होती हैं
• Brand colors और static values: HEX common है और copy-paste में आसान
• Dynamic colors JavaScript से: RGB या HSL, जो calculate करना ज़्यादा आसान हो
• Transparency needed हो: RGBA या HSLA

Modern CSS में color-mix() और CSS custom properties के साथ HSL colors और भी powerful हो गए हैं।