रंग कनवर्टर

Please enter a valid HEX color (e.g. var(--color-brand-green) or #FFF).

Color Converter tool color management को simplify करता है, आपको colors के बीच HEX, RGB, और HSL formats में effortlessly convert करने की अनुमति देता है। Designers और developers के लिए ideal, यह utility web और graphic design projects के across color consistency ensure करता है। Easily HEX value input करें या instant conversions पाने के लिए interactive color picker use करें।

Built by Bob Article by Lace QA by Ben Shipped

कैसे उपयोग करें

  1. 1

    Input field में HEX color code enter करें या color select करने के लिए color picker use करें।

  2. 2

    Tool automatically converted RGB और HSL values real-time में display करता है।

  3. 3

    एक single click से किसी भी converted color format को अपने clipboard पर copy करें।

संबंधित टूल्स

📏 REM to PX Converter ✨ CSS Animation Generator 📐 Unit Converter

अक्सर पूछे जाने वाले प्रश्न

Ratings & Reviews

Rate this tool

Sign in to rate and review this tool.

Loading reviews…

Color Converter क्या करता है

किसी भी standard format — HEX, RGB, HSL, या HSV — में color pick करें और Microapp Color Converter आपको हर दूसरे format में equivalent values side by side दिखाता है। Plus एक live preview swatch ताकि आप exactly देख सकें कि आप किस color के साथ काम कर रहे हैं। सब आपके browser में, instantly।

Designers और developers को formats के बीच constantly translate करना पड़ता है: brand spec HEX use करती है, आपका code opacity के साथ RGB चाहता है, design system HSL tokens करता है, आपका image editor RGBA export करता है। Hand से conversions tedious और error-prone हैं। यह always-correct version है।

इसे कैसे use करें

  1. चारों input fields (HEX, RGB, HSL, HSV) में से किसी में color value type या paste करें।
  2. दूसरे तीन fields converted equivalents के साथ instantly update होते हैं। Preview swatch actual color दिखाता है।
  3. Visual selection के लिए picker use करें — color square या hue slider drag करें, और सभी चार format outputs real time में update होते हैं।
  4. किसी भी format के बगल में "Copy" click करें ताकि इसे अपने clipboard पर डालें।
Worked example. Microapp का brand green:
HEX: #1B6B45
RGB: rgb(27, 107, 69)
HSL: hsl(150, 60%, 26%)
HSV: hsv(150, 75%, 42%)
Same color, चार formats। जो भी आपके tool से match करे use करें।

चार Formats Explained

HEX. Six hex characters red, green, और blue (दो each) represent करते हैं। #1B6B45 का मतलब है R=0x1B (27), G=0x6B (107), B=0x45 (69)। Web design के लिए सबसे common format — हर CSS file HEX से भरी है। Three-character shortcuts (#1B6) हर character को double करते हैं, लेकिन वो सिर्फ paired hex digits वाले colors के लिए काम करते हैं।

RGB. Three integers 0-255 से same red, green, blue represent करते हैं। rgb(27, 107, 69) #1B6B45 के identical है — decimal में same numbers। RGB का partial transparency के लिए alpha variant है, RGBA: rgba(27, 107, 69, 0.5) half-opaque green है।

HSL. Hue (color wheel पर 0-360 degrees), Saturation (color intensity का 0-100%), Lightness (black से white तक 0-100%)। hsl(150, 60%, 26%) का मतलब green-cyan hue, moderately saturated, fairly dark। HSL designers के लिए intuitive है — आप hue affect किए बिना Lightness lower करके "इसे darker बनाओ" adjust कर सकते हैं।

HSV. Hue, Saturation, Value (कभी-कभी HSB भी कहा जाता है)। HSL जैसा but Value brightness को black-to-pure-color represent करता है ना कि black-to-white। HSV वो है जो ज़्यादातर image editors (Photoshop, Figma) अपने color pickers में use करते हैं।

हर Format कब Use करें

यह format use करेंकब
HEXCSS, design specs, Slack messages, कहीं भी जहाँ आपको single short string चाहिए
RGB / RGBAProgrammatic color manipulation, partial transparency, colors interpolate करने वाली CSS animations
HSL / HSLATheme generation, color palettes, brand color को programmatically lighten/darken करना
HSVImage editors, color pickers, places जहाँ "value" perceived brightness पर better map करता है

Designers जो subtleties hit करते हैं

HSL Lightness vs HSV Value — वो same नहीं हैं। HSL Lightness 50% वाले दो colors brightness में बहुत different दिख सकते हैं क्योंकि HSL में Lightness black और white के बीच का midpoint है। HSV Value 50% का मतलब है "pure-saturated version से आधा bright।" "इसे 20% darker बनाओ" automate करते समय, HSL use करना HSV से hues के across ज़्यादा uniform results देता है।

Hex default में sRGB है। जब आप #1B6B45 लिखते हैं, browser इसे sRGB के रूप में interpret करता है। Modern displays अक्सर wider color gamuts (P3, AdobeRGB) रखते हैं, और CSS अब उन्हें specify करना support करती है: color(display-p3 0.106 0.420 0.270)। ज़्यादातर web work के लिए, sRGB / HEX पर stick करें; HDR या print-adjacent work के लिए, wider-gamut formats matter करते हैं।

Alpha (transparency) HEX पर apply नहीं होती। Almost. Modern CSS last 2 characters के रूप में alpha के साथ 8-character HEX support करती है: #1B6B4580 50% alpha पर brand green है। Older browsers alpha bytes ignore करते हैं। Transparency के लिए RGBA और HSLA ज़्यादा universally supported हैं।

Common Color Pitfalls

HEX में # भूलना। CSS को #1B6B45 चाहिए, 1B6B45 नहीं। Microapp converter input के लिए दोनों accept करता है लेकिन हमेशा # के साथ output करता है।

Lowercase vs uppercase HEX। Functionally identical (#1b6b45 = #1B6B45)। ज़्यादातर design systems readability के लिए uppercase पर standardize करते हैं; CSS care नहीं करती।

Converting करते समय rounding errors। HSL → HEX → HSL round-tripping integer rounding की वजह से slightly different HSL value produce कर सकता है (HEX integers हैं; HSL floats हैं)। Microapp converter internally high-precision math use करता है; आपको consistent results दिखने चाहिए, लेकिन code में आप कई round trips पर drift देख सकते हैं।

Related Tools

सिर्फ HEX to RGB convert करने के लिए, simpler Hex to RGB tool faster है। HEX value के closest named color find करने के लिए, Color Name Finder इसे identify कर सकता है। Base color के around coordinated color palette generate करने के लिए, Color Palette Generator देखें।