HEX, RGB, HSL में क्या अंतर है?

HEX #RRGGBB प्रारूप की हेक्साडेसिमल नोटेशन है जो CSS में सबसे आम रूप से उपयोग होती है। RGB लाल (0-255), हरा (0-255), नीला (0-255) के संयोजन से रंग व्यक्त करता है। HSL ह्यू (Hue, 0-360), संतृप्ति (Saturation, 0-100%), प्रकाश (Lightness, 0-100%) से व्यक्त करता है जो मानवीय अंतर्ज्ञान के सबसे करीब है।

OKLCH क्या है और इसका उपयोग क्यों किया जाता है?

OKLCH एक अवधारणात्मक रूप से एकसमान (perceptually uniform) आधुनिक CSS रंग स्थान है। पहले के HSL में समान संतृप्ति/प्रकाश होने पर भी रंग के अनुसार चमक अलग दिखती थी, OKLCH इस समस्या को हल करके सुसंगत पैलेट बनाने में लाभकारी है। यह CSS Color Level 4 मानक में शामिल है।

अल्फ़ा (पारदर्शिता) मान का उपयोग कैसे करें?

अल्फ़ा मान 0 (पूर्ण पारदर्शी) से 1 (पूर्ण अपारदर्शी) के बीच का मान है जो रंग की पारदर्शिता दर्शाता है। CSS में rgba(59, 130, 246, 0.5) जैसे उपयोग किया जाता है, और HEX में #3B82F680 जैसे अंत में 2 अंक जोड़े जाते हैं। ओवरले, शैडो, बैकग्राउंड आदि में उपयोग किया जाता है।

वेब एक्सेसिबिलिटी के लिए रंग चयन मानदंड क्या है?

WCAG 2.1 दिशानिर्देशों के अनुसार, टेक्स्ट और बैकग्राउंड के बीच ल्यूमिनेंस कंट्रास्ट अनुपात सामान्य टेक्स्ट के लिए 4.5:1 और बड़े टेक्स्ट के लिए 3:1 या अधिक होना चाहिए। रंग चुनते समय बैकग्राउंड रंग के साथ कंट्रास्ट की जांच करना महत्वपूर्ण है ताकि दृष्टि बाधित लोग भी पढ़ सकें।

डिज़ाइन टूल के रंग कोड को CSS में कैसे लागू करें?

Figma, Sketch आदि डिज़ाइन टूल से कॉपी किया गया HEX कोड इस टूल में दर्ज करें तो RGB, HSL आदि CSS में उपयोग योग्य प्रारूपों में स्वचालित रूपांतरित हो जाता है। CSS वेरिएबल्स से प्रबंधित करें तो थीम बदलते समय कुशल है, और HSL प्रारूप में चमक/संतृप्ति समायोजन आसान है।

कलर पिकर - HEX RGB HSL HSV OKLCH कनवर्टर | मुफ़्त ऑनलाइन

रंग चुनें

RGB

रंग मान

HEX

#3B82F6

RGB

rgb(59, 130, 246)

HSL

hsl(217, 91%, 60%)

रंग पैलेट

चुनने और कॉपी करने के लिए क्लिक करें

base

slate

gray

zinc

neutral

stone

red

orange

amber

yellow

lime

green

emerald

teal

cyan

sky

blue

indigo

violet

purple

fuchsia

pink

rose

रंग प्रारूप

HEX

#RRGGBB प्रारूप। CSS में सबसे अधिक उपयोग किया जाता है

RGB

लाल, हरा, नीला (0-255)

HSL

रंग, संतृप्ति, चमक। सहज रंग समायोजन

HSV/HSB

रंग, संतृप्ति, मान। ग्राफिक उपकरणों में उपयोग किया जाता है

OKLCH

अवधारणात्मक रूप से एकसमान आधुनिक CSS रंग स्थान

RGBA/HSLA

अल्फा (पारदर्शिता) चैनल शामिल है

Color Picker क्या है?

Color Picker एक ऑनलाइन टूल है जो विभिन्न रंग मॉडल के बीच कोड बदल सकता है और दृश्य रूप से वांछित रंग चुन सकता है। HEX, RGB, HSL, HSV, OKLCH आदि प्रमुख रंग प्रारूपों का समर्थन करता है और सहज स्लाइडर और पैलेट के माध्यम से रंगों को खोजने और कोड को तुरंत कॉपी करने की सुविधा देता है।

HEX, RGB, HSL, HSV, OKLCH 5 रंग प्रारूपों का परस्पर रूपांतरण
सहज रंग स्लाइडर और रंग क्षेत्र चयन
अल्फ़ा (पारदर्शिता) चैनल समायोजन समर्थन
एक क्लिक में रंग कोड कॉपी
रैंडम रंग उत्पन्न करने की सुविधा
बेसिक/एडवांस्ड कलर पैलेट उपलब्ध

उपयोग करने का तरीका

1
रंग चुनें
रंग स्लाइडर को ड्रैग करें या रंग क्षेत्र में क्लिक करके अपना इच्छित रंग चुनें। या सीधे HEX कोड आदि भी दर्ज कर सकते हैं।
2
प्रारूप देखें
चुना गया रंग HEX, RGB, HSL, HSV, OKLCH आदि सभी प्रारूपों में स्वचालित रूपांतरित होकर प्रदर्शित होता है।
3
पारदर्शिता समायोजन
अल्फ़ा टैब में पारदर्शिता को 0~100% सीमा में समायोजित करके अर्ध-पारदर्शी रंग बनाए जा सकते हैं।
4
कोड कॉपी करें
आवश्यक रंग प्रारूप के मान पर क्लिक करें तो यह क्लिपबोर्ड में स्वचालित कॉपी हो जाता है। CSS, डिज़ाइन टूल आदि में तुरंत पेस्ट करें।

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

उपयोगी टिप्स

HSL प्रारूप में केवल प्रकाश (L) समायोजित करके एक ही रंग के हल्के/गहरे रूपांतर आसानी से बनाए जा सकते हैं, जो थीम रंग कार्य के लिए लाभकारी है
रैंडम रंग सुविधा से प्रेरणा लें और फिर रंग स्लाइडर से सूक्ष्म समायोजन करें तो रचनात्मक पैलेट बनाए जा सकते हैं
CSS custom property (वेरिएबल) के साथ उपयोग करें तो डार्क मोड/लाइट मोड रंग स्विचिंग सुविधाजनक है
कलर पैलेट में बार-बार उपयोग होने वाले रंग पर क्लिक करें तो तेज़ी से कोड कॉपी कर सकते हैं
OKLCH प्रारूप का उपयोग करें तो संतृप्ति और चमक अवधारणात्मक रूप से सुसंगत रंग प्रणाली डिज़ाइन की जा सकती है