Convert colors between RGB, HEX, and HSL — type in any field and the rest update instantly.
Hue / Saturation% / Lightness%
Every color on a screen can be written in more than one way, and different tools expect different formats. A web designer writing CSS usually needs a HEX code like #7C5CFC, a print or graphics program often works in RGB (red, green, blue values from 0 to 255), and some design tools prefer HSL (hue, saturation, lightness) because it's easier to reason about — for example, increasing lightness always makes a color closer to white, no matter what the base hue is. This converter keeps all three formats in sync at once, so you never have to do the math yourself or look up a conversion formula.
Type into any field — the HEX box, any of the three RGB number boxes, or use the native color picker swatch — and everything else updates immediately, including the live color preview at the top. This is useful when you've been given a color in one format (say, a brand HEX code from a designer) and need it in another format for a different tool, or when you're fine-tuning a color and want to see the RGB and HSL values shift as you adjust HEX, or vice versa.
HEX is the most common format in CSS and web design tools — it's compact and unambiguous. RGB is the format most image editing software and some APIs expect, and it maps directly to how screens actually produce color by mixing red, green, and blue light. HSL is often the easiest format for humans to adjust by hand, since the three values map cleanly to "what color" (hue), "how vivid" (saturation), and "how bright" (lightness) — which is why many color pickers in design software use HSL sliders even if the final output is saved as HEX or RGB.
This converter is handy in a lot of everyday situations: matching a brand's exact color across a website, a printed flyer, and a presentation slide; picking a color visually with the swatch picker and immediately getting its HEX code to paste into CSS; or checking what a designer's HEX code looks like in RGB before plugging it into software that only accepts that format. Since the swatch preview, HEX field, RGB fields, and HSL fields all stay perfectly in sync, there's never a risk of a typo causing the wrong color to end up in your final project.
स्क्रीन पर हर रंग को एक से ज़्यादा तरीकों से लिखा जा सकता है, और अलग-अलग tools अलग-अलग format चाहते हैं। एक web designer को CSS में आमतौर पर HEX code चाहिए होता है जैसे #7C5CFC, print या graphics प्रोग्राम अक्सर RGB में काम करता है (red, green, blue की values 0 से 255 तक), और कुछ design tools HSL (hue, saturation, lightness) पसंद करते हैं क्योंकि इसे समझना आसान होता है — जैसे lightness बढ़ाने से कोई भी रंग हमेशा सफ़ेद के करीब हो जाता है, चाहे base hue कुछ भी हो। यह converter तीनों formats को हमेशा sync में रखता है, ताकि आपको खुद calculation करने या formula ढूंढने की ज़रूरत न पड़े।
किसी भी field में टाइप करें — HEX box, तीन RGB number boxes में से कोई भी, या ऊपर वाले color swatch picker से सीधे चुनें — बाकी सब तुरंत अपडेट हो जाएगा, साथ ही ऊपर live color preview भी। यह तब उपयोगी है जब आपको किसी एक format में रंग मिला हो (जैसे designer से एक brand HEX code) और किसी दूसरे tool के लिए दूसरे format में चाहिए हो, या जब आप कोई रंग ठीक कर रहे हों और HEX बदलने पर RGB-HSL में बदलाव देखना चाहते हों।
HEX सबसे आम format है CSS और web design tools में — यह छोटा और स्पष्ट होता है। RGB वह format है जो ज़्यादातर image editing software और कुछ APIs चाहते हैं, और यह सीधे दिखाता है कि स्क्रीन कैसे red, green, blue light मिलाकर रंग बनाती है। HSL अक्सर हाथ से adjust करने के लिए सबसे आसान format होता है, क्योंकि तीनों values साफ़-साफ़ बताती हैं "कौन सा रंग" (hue), "कितना गहरा" (saturation), और "कितना उजला" (lightness) — इसीलिए कई design tools के color picker HSL sliders इस्तेमाल करते हैं, भले ही आख़िर में output HEX या RGB में save हो।
यह converter रोज़मर्रा की कई स्थितियों में काम आता है: किसी brand का exact color website, printed flyer, और presentation slide तीनों में मिलाना; swatch picker से visually कोई रंग चुनकर तुरंत उसका HEX code पाना ताकि CSS में paste किया जा सके; या किसी designer के HEX code का RGB में कैसा दिखता है यह जांचना, उस software में डालने से पहले जो सिर्फ़ वही format स्वीकार करता है। चूंकि swatch preview, HEX field, RGB fields, और HSL fields हमेशा बिल्कुल sync में रहते हैं, कभी कोई typo गलत रंग को आपके final project में पहुंचने का खतरा नहीं बनता।
Q. What is a HEX color code? | HEX रंग कोड क्या है?
A HEX code is a 6-character code (like #7C5CFC) that represents a color using base-16 values for red, green and blue. | HEX कोड एक 6-अक्षर का कोड है (जैसे #7C5CFC) जो red, green और blue के लिए base-16 values का उपयोग करके एक रंग को represent करता है।
Q. What range of values does RGB use? | RGB किस range की values उपयोग करता है?
Each of the red, green and blue channels ranges from 0 to 255, giving over 16 million possible colors. | Red, green और blue में से हर channel 0 से 255 तक होता है, जिससे 1.6 करोड़ से अधिक संभावित रंग बनते हैं।
Q. What do the H, S and L values in HSL mean? | HSL में H, S और L values का क्या मतलब है?
Hue (0–360°) is the base color, Saturation (0–100%) is how vivid it is, and Lightness (0–100%) is how close it is to black or white. | Hue (0–360°) base color है, Saturation (0–100%) यह बताता है कि रंग कितना vivid है, और Lightness (0–100%) यह बताता है कि यह black या white के कितना करीब है।
Q. Can I use 3-character shorthand HEX codes like #fff? | क्या मैं #fff जैसे 3-अक्षर shorthand HEX codes उपयोग कर सकता हूँ?
Yes — the HEX field accepts the 3-character shorthand and automatically expands it to the full 6-character value. | हाँ — HEX field 3-अक्षर का shorthand स्वीकार करता है और इसे अपने आप पूरे 6-अक्षर के value में expand कर देता है।
Q. Does this tool support CMYK or Pantone values? | क्या यह टूल CMYK या Pantone values को support करता है?
No — it currently converts only between HEX, RGB and HSL, which cover almost all web and screen-design needs. | नहीं — यह फ़िलहाल केवल HEX, RGB और HSL के बीच convert करता है, जो अधिकतर web और screen-design की ज़रूरतों को कवर करता है।
Q. Why did my HEX code not update anything? | मेरा HEX code कुछ update क्यों नहीं कर रहा?
A HEX value must be a valid 3 or 6-character combination of 0–9 and A–F; anything else is ignored until it becomes valid. | HEX value 0–9 और A–F का सही 3 या 6-अक्षर combination होना चाहिए; इसके अलावा कुछ भी तब तक ignore होता है जब तक यह valid न हो जाए।
Q. Can I pick a color visually instead of typing values? | क्या मैं values टाइप करने के बजाय visually कोई रंग चुन सकता हूँ?
Yes — click the color swatch next to the HEX field to open your browser's native color picker. | हाँ — browser के native color picker को खोलने के लिए HEX field के बगल वाले color swatch पर क्लिक करें।
Q. Is my chosen color saved or uploaded anywhere? | क्या चुना गया रंग कहीं save या upload होता है?
No — all conversion happens instantly inside your browser; nothing is sent to a server or stored after you close the tab. | नहीं — सारा conversion आपके browser के भीतर तुरंत होता है; टैब बंद करने पर कुछ भी server को नहीं भेजा जाता या save नहीं रहता।
Q. Which format should I use in my CSS? | मुझे अपने CSS में कौन सा format उपयोग करना चाहिए?
HEX is the most common and compact choice for CSS, though RGB and HSL are equally valid and sometimes easier to adjust programmatically. | CSS के लिए HEX सबसे common और compact choice है, हालांकि RGB और HSL भी equally valid हैं और इन्हें programmatically adjust करना कभी-कभी आसान होता है।
Q. Can I copy a specific format directly? | क्या मैं कोई specific format सीधे copy कर सकता हूँ?
Yes — use the "Copy", "Copy RGB" or "Copy HSL" buttons to copy that exact format to your clipboard. | हाँ — उस exact format को clipboard में copy करने के लिए "Copy", "Copy RGB" या "Copy HSL" बटन उपयोग करें।
Q. Why are the HSL fields read-only? | HSL fields read-only क्यों हैं?
HSL values are calculated automatically from the current RGB/HEX color, so they always stay in sync without needing manual entry. | HSL values मौजूदा RGB/HEX रंग से अपने आप calculate होती हैं, इसलिए manual entry की ज़रूरत के बिना वे हमेशा sync में रहती हैं।
Q. Does this tool work on mobile devices? | क्या यह टूल mobile devices पर काम करता है?
Yes — the layout and native color picker both work on modern mobile browsers. | हाँ — layout और native color picker दोनों modern mobile browsers पर काम करते हैं।
Q. Is this converter free to use? | क्या यह converter उपयोग करने के लिए मुफ़्त है?
Yes — it's completely free, with no signup, login or usage limits. | हाँ — यह पूरी तरह मुफ़्त है, बिना किसी signup, login या usage limit के।