RevealTheme logo

कलर कन्वर्टर (HEX/RGB/HSL)

रंगों को HEX, RGB और HSL फ़ॉर्मेट के बीच बदलें। किसी रंग को विज़ुअल रूप से चुनें या मानों को मैन्युअल रूप से दर्ज करें।

HEX
#535beb
RGB
rgb(83, 91, 235)
HSL
hsl(237, 79%, 62%)

इस टूल का उपयोग कैसे करें

  1. 1

    Click the color swatch to open your operating system's color picker and choose a color visually.

  2. 2

    Or type a 6-digit HEX value (such as #535beb, with or without the leading #) into the text field.

  3. 3

    Read the matching rgb(R, G, B) and hsl(H, S%, L%) strings in the result cards below.

  4. 4

    Copy whichever format you need straight into your CSS or design file.

कलर कन्वर्टर (HEX/RGB/HSL) क्या है?

HEX, RGB और HSL एक ही रंग को व्यक्त करने के तीन तरीके हैं। HEX (#RRGGBB) CSS और डिज़ाइन टूल में सबसे आम है। RGB (rgb(R,G,B)) चैनलों को संख्यात्मक रूप से अलग करता है। HSL (hsl(H,S%,L%)) लोगों के लिए अधिक सहज है: ह्यू (hue) रंग है, सैचुरेशन तीव्रता है और लाइटनेस (lightness) चमक है। पैलेट डिज़ाइन करते समय HSL का उपयोग करें; इम्प्लीमेंटेशन के लिए इसे HEX में बदलें।

सामान्य उपयोग के मामले

  • Translating a brand HEX code from a style guide into the rgb() values a legacy stylesheet or email template requires.

  • Grabbing the HSL form of a color so you can nudge its lightness or saturation while keeping the same hue for a palette.

  • Checking the exact RGB channels of a color picked from a screenshot or mockup before writing it into CSS.

  • Confirming what a designer's HEX swatch becomes in RGB for a canvas, SVG, or charting library that wants numeric channels.

  • Teaching or learning how hexadecimal color notation maps to decimal RGB and to the HSL model.

  • Quickly sampling a color visually with the picker and reading all three CSS-ready notations at once.

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

मुझे HEX के बजाय HSL का उपयोग कब करना चाहिए?
डिज़ाइन करते समय: HSL आपको लाइटनेस या सैचुरेशन को स्वतंत्र रूप से समायोजित करने देता है। फिर कोड के लिए इसे HEX में बदलें।
OKLCH और आधुनिक कलर स्पेस के बारे में क्या?
OKLCH परसेप्चुअल रूप से एकसमान है और एक्सेसिबिलिटी के लिए बेहतर है। यह CSS Color Level 4 (सभी आधुनिक ब्राउज़र) में समर्थित है।

संबंधित टूल

CSS Box Shadow जनरेटर

CSS में box-shadow मान दृश्य रूप से बनाएँ। रियल टाइम में पूर्वावलोकन करें और जनरेट किया गया CSS कॉपी करें।

CSS ग्रेडिएंट जेनरेटर

लीनियर और रेडियल CSS ग्रेडिएंट बनाएँ। रंगों को दृश्यात्मक रूप से चुनें और जेनरेट किया गया CSS कॉपी करें।

Cubic Bezier एक्सेलरेशन कर्व जेनरेटर

CSS के लिए cubic-bezier एक्सेलरेशन (easing) कर्व बनाएँ। मानक प्रीसेट शामिल हैं।

कलर पैलेट जनरेटर

किसी भी बेस रंग से सामंजस्यपूर्ण कलर पैलेट जनरेट करें। कॉम्प्लिमेंटरी, एनालॉगस, ट्रायाडिक और मोनोक्रोमैटिक स्कीम का समर्थन करता है।

CSS Border Radius जनरेटर

CSS में जटिल border-radius मान दृश्य रूप से बनाएँ। प्रत्येक कोने का स्वतंत्र नियंत्रण।

CSS Clamp() जनरेटर

clamp() के साथ फ़्लूइड, रेस्पॉन्सिव CSS मान जनरेट करें। viewport रेंज के अनुसार न्यूनतम और अधिकतम आकारों के बीच सहजता से स्केल करें।

अपडेट के लिए सब्सक्राइब करें

हम आपका ईमेल नहीं बेचते। हम स्पैम नहीं करते।

© 2026 RevealTheme. All rights reserved.