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 में पहुंचने का खतरा नहीं बनता।