CSS इकाई और रंग कनवर्टर

CSS रंगों और इकाइयों को समझना

HEX, RGB और HSL रंग प्रारूप

CSS कई रंग प्रारूपों का समर्थन करता है, प्रत्येक के अपने अनूठे फायदे हैं। <strong>HEX रंग</strong> छह-अंकीय हेक्साडेसिमल नोटेशन (जैसे, <code>#22c55e</code>) का उपयोग करते हैं और अपनी संक्षिप्तता के कारण वेब डिज़ाइन में सबसे सामान्य प्रारूप हैं। वे 00 से FF तक हेक्साडेसिमल अंकों के जोड़े के रूप में लाल, हरे और नीले चैनलों का प्रतिनिधित्व करते हैं।

<strong>RGB (Red, Green, Blue)</strong> प्रत्येक चैनल के लिए 0 से 255 तक दशमलव मानों का उपयोग करता है। प्रारूप <code>rgb(34, 197, 94)</code> अधिक पठनीय है और व्यक्तिगत चैनलों के आसान हेरफेर की अनुमति देता है। RGBA पारदर्शिता नियंत्रण के लिए अल्फा चैनल के साथ इसे विस्तारित करता है।

<strong>HSL (Hue, Saturation, Lightness)</strong> डिज़ाइनरों के लिए सबसे सहज है। ह्यू रंग चक्र पर एक डिग्री है (0-360), जबकि संतृप्ति और हल्कापन प्रतिशत हैं। इससे रंग भिन्नताएँ बनाना आसान हो जाता है — टिंट के लिए हल्कापन या जीवंतता के लिए संतृप्ति समायोजित करें।

CSS Named Colors

CSS provides 147 named colors like coral, steelblue, and rebeccapurple. While convenient for prototyping, named colors offer limited precision. Converting a CSS color name to HEX or RGB gives you exact values you can fine-tune for production use.

प्रिंट डिज़ाइन के लिए CMYK

<strong>CMYK</strong> प्रिंट का मानक रंग मॉडल है।

डिज़ाइन टूल में HSV

<strong>HSV</strong> Photoshop, Figma और Sketch का मूल रंग मॉडल है।

PX बनाम REM: CSS इकाइयाँ समझाई गईं

<strong>पिक्सेल (PX)</strong> पूर्ण इकाइयाँ हैं — 1px स्क्रीन पर हमेशा 1/96 इंच होता है। वे पिक्सेल-परफ़ेक्ट नियंत्रण प्रदान करते हैं लेकिन उपयोगकर्ता के फ़ॉन्ट-आकार वरीयताओं पर प्रतिक्रिया नहीं करते। <strong>REM</strong> इकाइयाँ रूट तत्व के फ़ॉन्ट आकार (आमतौर पर 16px) के सापेक्ष होती हैं। REM का उपयोग सुनिश्चित करता है कि जब उपयोगकर्ता अपने ब्राउज़र का डिफ़ॉल्ट फ़ॉन्ट आकार बदलते हैं तो आपके लेआउट आनुपातिक रूप से स्केल होते हैं, जिससे पहुँच में सुधार होता है।

रूपांतरण सीधा है: REM मान प्राप्त करने के लिए पिक्सेल को 16 से विभाजित करें। उदाहरण के लिए, 24px 1.5rem के बराबर होता है।

<strong>EM इकाइयाँ</strong> मूल तत्व के फ़ॉन्ट आकार के सापेक्ष हैं।

• 1rem = 16px (default browser setting)
• 1em = parent font-size (context-dependent)
• 0.75rem = 12px — common for small/caption text
• 1.25rem = 20px — common for subheadings
• 2rem = 32px — common for section headings

CSS कनवर्टर का उपयोग क्यों करें?

रंग प्रारूपों के बीच मैन्युअल रूप से रूपांतरण करना थकाऊ और त्रुटि-प्रवण है। चाहे आप CSS कस्टम प्रॉपर्टीज़ के लिए डिज़ाइनर के HEX मानों को HSL में अनुवाद कर रहे हों, या पिक्सेल-आधारित मॉकअप को REM-आधारित रिस्पॉन्सिव लेआउट में परिवर्तित कर रहे हों, स्वचालित रूपांतरण उपकरण समय बचाते हैं और गलतियों को समाप्त करते हैं।

• Instant results — paste a value and get the converted output immediately, no formulas needed.
• Copy-ready output — every result includes a one-click copy button with properly formatted CSS syntax.
• Color preview — see a live swatch of the converted color to visually confirm accuracy.
• No installation — works in any browser, on any device. No extensions, downloads, or signups.
• Developer-friendly — shareable URLs with pre-filled values for easy team collaboration.

Common CSS Conversion Workflows

• Design handoff: Figma and Sketch export colors as HEX. Convert to RGB or HSL if your codebase uses those formats.
• Dark mode generation: Take your light-mode HSL palette, adjust lightness values, and convert back to HEX.
• Accessibility checks: Convert colors to RGB to calculate contrast ratios using the WCAG luminance formula.
• Legacy migration: Convert pixel-based layouts to rem-based responsive systems during refactors.
• Cross-browser debugging: Quickly convert colors to match your source code format.

Supported Conversions