कैसे इस्तेमाल करें
- Color डालें — #0f766e, rgb(15 118 110), hsl(175 77% 26%), oklch(…) — या color picker से चुनें।
- सूची से जरूरी format copy करें।
- Background color set करके contrast ratio और WCAG AA/AAA result देखें।
- Scale में किसी shade पर click करके उसे उपयोग करें।
विकल्पों की जानकारी
- HEX / RGB
- Screen colors को red, green और blue 0–255 में दिखाता है। #rrggbbaa और rgb(… / 50%) transparency भी रखते हैं।
- HSL / HSV
- Hue, saturation और lightness या value। Color को हाथ से हल्का या गहरा बनाने में उपयोगी।
- OKLCH
- CSS Color 4 का perceptual color space। Lightness बदलने पर hue और perceived colorfulness स्थिर रहती है, इसलिए palettes और dark themes के लिए अच्छा है।
- CMYK
- केवल reference conversion। असली print color printer profile पर निर्भर करता है; exact values के लिए printer से पूछें।
- Contrast ratio
- WCAG 2.2 में normal text के लिए 4.5:1 और large text के लिए 3:1 AA; AAA में क्रमशः 7:1 और 4.5:1 चाहिए।
उदाहरण
#0f766e यानी rgb(15 118 110), hsl(175 77% 26%) और oklch(51.1% 0.086 186.4)। सफ़ेद बैकग्राउंड पर इसका कॉन्ट्रास्ट अनुपात लगभग 5.5:1 है, जो सभी टेक्स्ट साइज़ के लिए WCAG AA पास करता है।
हर फ़ॉर्मैट में आम रंग
CSS के नाम वाले रंग और उनके मान। यहाँ CMYK एक सीधा गणितीय रूपांतरण है; पेशेवर प्रिंटिंग के लिए अपने प्रिंटर की कलर प्रोफ़ाइल के CMYK मान इस्तेमाल करें।
| CSS नाम | HEX | RGB | HSL | CMYK |
|---|---|---|---|---|
| red | #ff0000 | rgb(255 0 0) | hsl(0 100% 50%) | 0%, 100%, 100%, 0% |
| orange | #ffa500 | rgb(255 165 0) | hsl(39 100% 50%) | 0%, 35%, 100%, 0% |
| gold | #ffd700 | rgb(255 215 0) | hsl(51 100% 50%) | 0%, 16%, 100%, 0% |
| green | #008000 | rgb(0 128 0) | hsl(120 100% 25%) | 100%, 0%, 100%, 50% |
| teal | #008080 | rgb(0 128 128) | hsl(180 100% 25%) | 100%, 0%, 0%, 50% |
| blue | #0000ff | rgb(0 0 255) | hsl(240 100% 50%) | 100%, 100%, 0%, 0% |
| navy | #000080 | rgb(0 0 128) | hsl(240 100% 25%) | 100%, 100%, 0%, 50% |
| purple | #800080 | rgb(128 0 128) | hsl(300 100% 25%) | 0%, 100%, 0%, 50% |
| hotpink | #ff69b4 | rgb(255 105 180) | hsl(330 100% 71%) | 0%, 59%, 29%, 0% |
| brown | #a52a2a | rgb(165 42 42) | hsl(0 59% 41%) | 0%, 75%, 75%, 35% |
| gray | #808080 | rgb(128 128 128) | hsl(0 0% 50%) | 0%, 0%, 0%, 50% |
कौन-सा फ़ॉर्मैट इस्तेमाल करें
HEX CSS और डिज़ाइन टूल में रंग लिखने का सबसे छोटा तरीका है: लाल, हरे और नीले के लिए दो-दो हेक्स अंक।
RGB वही जानकारी दशमलव में है, और rgb(255 0 0 / 50%) पारदर्शिता जोड़ता है।
HSL ह्यू, सैचुरेशन और लाइटनेस बताता है, जिससे सिर्फ़ आख़िरी संख्या बदलकर उसी रंग के हल्के या गहरे शेड बनाना आसान हो जाता है।
OKLCH एक नया CSS फ़ॉर्मैट है जिसमें लाइटनेस के बराबर कदम आँख को बराबर अलग दिखते हैं — एक्सेसिबल रंग पैलेट के लिए उपयोगी।
अक्सर पूछे जाने वाले सवाल
Text के लिए अच्छा contrast ratio क्या है?
Body text के लिए कम से कम 4.5:1 (WCAG AA)। White पर pure black 21:1 और common #767676 grey 4.54:1 है।
CMYK value Photoshop से अलग क्यों है?
Photoshop specific press और paper के ICC profile से convert करता है। यह tool plain mathematical formula देता है, estimate के लिए ठीक लेकिन print proof के लिए नहीं।
HSL और OKLCH में क्या फर्क है?
HSL RGB का simple rearrangement है, जबकि OKLCH equal lightness को आँखों में समान brightness रखने के लिए बनाया गया है।
क्या आज CSS में OKLCH उपयोग कर सकता हूँ?
हाँ। oklch() सभी current major browsers में काम करता है।
प्राइवेसी
यह टूल पूरी तरह आपके ब्राउज़र में चलता है। आपकी फ़ाइलें और टेक्स्ट आपके डिवाइस पर ही प्रोसेस होते हैं और हमारे सर्वर पर कभी अपलोड नहीं होते।