डिज़ाइन सिस्टम टोकन ऑथरिंग
ब्रांड HEX मानों को OKLCH में बदलें ताकि आपके टोकन रैंप में हर शेड का अनुभूति-आधारित लाइटनेस स्टेप समान हो। OKLCH आउटपुट को सीधे अपने CSS में पेस्ट करें — किसी प्रीप्रोसेसर की ज़रूरत नहीं।
Color Picker & Converter
दृश्य रूप से चुनें या कोई भी मान पेस्ट करें — HEX, RGB, HSL, OKLCH और OKLAB सिंक में रहते हैं। WCAG 2.2 कंट्रास्ट चेकर और OKLCH-आधारित पैलेट जनरेटर शामिल हैं। पूरी तरह आपके ब्राउज़र में चलता है।
Color Picker & Converter — TL;DR
दृश्य रूप से चुनें या कोई भी मान पेस्ट करें — HEX, RGB, HSL, OKLCH और OKLAB सिंक में रहते हैं। WCAG 2.2 कंट्रास्ट चेकर और OKLCH-आधारित पैलेट जनरेटर शामिल हैं। पूरी तरह आपके ब्राउज़र में चलता है।
अपना hex मान (जैसे #ff5722) HEX फ़ील्ड में पेस्ट करें — RGB पंक्ति तुरंत अपडेट हो जाएगी। इसी तरह, RGB फ़ील्ड में rgb(255 87 34) पेस्ट करें और HEX, HSL, OKLCH और OKLAB सभी सिंक हो जाएंगे। हर समर्थित फॉर्मेट में रूपांतरण द्विदिशात्मक है।
OKLCH एक CSS Color Module Level 4 कलर स्पेस है जो अनुभूति-आधारित लाइटनेस (L), क्रोमा (C), और ह्यू (h) का उपयोग करता है — HSL की तरह, लेकिन अनुभूति में एकसमान। समान L मान वाले दो OKLCH रंग समान रूप से चमकीले दिखते हैं, चाहे ह्यू अलग हों। यह डिज़ाइन टोकन, जेनरेट किए गए पैलेट और एक्सेसिबल कलर रैंप को HSL की तुलना में कहीं अधिक पूर्वानुमेय बनाता है। सभी एवरग्रीन ब्राउज़र (Chrome 111+, Safari 15.4+, Firefox 113+) इसका समर्थन करते हैं।
कलर मान कभी आपके डिवाइस को नहीं छोड़ते। DevTools → Network खोलें और आप देखेंगे कि रूपांतरण, पिकिंग, पैलेट जनरेशन या कंट्रास्ट जाँच के दौरान शून्य आउटबाउंड अनुरोध हैं।
HEX
RGB
HSL
OKLCH
OKLAB
नामित
पैलेट
WCAG 2.2 कंट्रास्ट
टेक्स्ट
बैकग्राउंड
—
प्रीव्यू
बड़ा हेडिंग नमूना
बॉडी टेक्स्ट नमूना — फुर्तीली भूरी लोमड़ी आलसी कुत्ते के ऊपर से कूद जाती है।
वास्तविक वर्कफ़्लो के लिए डिज़ाइन किया गया
डिज़ाइन सिस्टम से लेकर एक्सेसिबिलिटी ऑडिट तक — हर फॉर्मेट और जाँच जिसकी आपको ज़रूरत है, एक ही जगह।
छह कलर स्पेस
HEX (3 / 4 / 6 / 8 अंक), RGB(A), HSL(A), OKLCH, OKLAB और CSS नामित रंगों के बीच राउंड-ट्रिप करें। आउटपुट स्ट्रिंग्स CSS Color Module Level 4 सिंटैक्स से मेल खाती हैं — उन्हें सीधे अपनी स्टाइलशीट में पेस्ट करें।
WCAG 2.2 कंट्रास्ट चेकर
किन्हीं दो रंगों के बीच कंट्रास्ट अनुपात देखें, AA (4.5 : 1) और AAA (7 : 1) के लिए एक-क्लिक पास/फेल बैज के साथ, सामान्य और बड़े टेक्स्ट आकार दोनों पर। गणना W3C संदर्भ से मेल खाती है: sRGB लीनियराइज़ेशन, सापेक्ष ल्यूमिनेन्स, फिर (L1+0.05)/(L2+0.05)।
EyeDropper — किसी भी पिक्सेल का नमूना लें
अपनी स्क्रीन पर किसी भी रंग का नमूना लेने के लिए eyedropper पर क्लिक करें — डिज़ाइन, स्क्रीनशॉट, फ़ोटो, यहाँ तक कि अन्य ब्राउज़र टैब भी। Chromium ब्राउज़रों पर नेटिव EyeDropper API का उपयोग करता है।
OKLCH-आधारित पैलेट
9-स्टेप टिंट्स और शेड्स के साथ-साथ कॉम्प्लीमेंट्री, ट्रायाडिक और एनालॉगस हार्मनीज़ जेनरेट करें — OKLCH में निकाले गए ताकि हर स्टेप अनुभूति के अनुसार समान रूप से अंतरित हो (HSL के विपरीत, जहाँ लाइटनेस अत्यधिक बदलती है)।
डिज़ाइन से प्राइवेसी
हर रूपांतरण आपके डिवाइस पर JavaScript में चलता है। कुछ भी अपलोड, लॉग, या किसी तीसरे पक्ष को नहीं भेजा जाता — खुद सत्यापित करना चाहते हैं तो DevTools → Network खोलें।
गति के लिए बना
शुद्ध JavaScript, कोई फ्रेमवर्क रनटाइम नहीं। कोल्ड लोड 50 KB gzipped से कम है; पाँच साल पुराने लैपटॉप पर रूपांतरण और पैलेट जनरेशन एक मिलीसेकंड से कम में पूरे होते हैं।
कलर पिकर का उपयोग कैसे करें
शुरू करने के चार तरीके, हर फॉर्मेट सिंक में।
-
1
दृश्य रूप से चुनें
शेड चुनने के लिए सैचुरेशन/वैल्यू वर्ग के अंदर ड्रैग करें, बेस रंग बदलने के लिए नीचे ह्यू बार स्लाइड करें, और पारदर्शिता के लिए अल्फा स्लाइडर का उपयोग करें। दाईं ओर हर फॉर्मेट तुरंत अपडेट होता है।
-
2
कोई भी मान पेस्ट करें
मेल खाने वाले इनपुट में HEX (
#4f46e5), RGB (rgb(79 70 229)), HSL (hsl(244 76% 59%)), OKLCH (oklch(53% 0.22 277)) या यहाँ तक कि एक CSS नामित रंग (tomato) पेस्ट करें — पिकर और अन्य सभी फॉर्मेट सिंक हो जाते हैं। -
3
Eyedropper से नमूना लें
अपनी स्क्रीन पर किसी भी पिक्सेल को कैप्चर करने के लिए eyedropper बटन पर क्लिक करें — दूसरा टैब, स्क्रीनशॉट, फ़ोटो, आइकन। Chrome, Edge और Opera पर नेटिव EyeDropper API का उपयोग करता है।
-
4
कॉपी करें या कंट्रास्ट जाँचें
किसी भी फॉर्मेट के बगल में कॉपी आइकन पर क्लिक करके उसे अपने क्लिपबोर्ड पर डालें। या यह जाँचने के लिए WCAG 2.2 कंट्रास्ट सेक्शन तक स्क्रॉल करें कि आपका फ़ोरग्राउंड / बैकग्राउंड संयोजन सामान्य और बड़े टेक्स्ट आकार पर AA या AAA पास करता है या नहीं।
डिज़ाइनरों, डेवलपर्स और एक्सेसिबिलिटी ऑडिटर्स के लिए बना
एककलर टूल जो चार सामान्य वर्कफ़्लो के लिए उपयुक्त है।
WCAG एक्सेसिबिलिटी ऑडिट
फ़ोरग्राउंड / बैकग्राउंड जोड़े डालें और कंट्रास्ट अनुपात तथा AA / AAA बैज पढ़ें। शिप होने से पहले विफल हो रहे संयोजन पकड़ें — W3C-अनिवार्य 4.5 : 1 सामान्य / 7 : 1 उन्नत सीमाओं को पूरा करता है।
फ्रंट-एंड CSS रूपांतरण
डिज़ाइनर मॉकअप से एक HEX है लेकिन Tailwind कॉन्फ़िग के लिए HSL या आधुनिक स्टाइलशीट के लिए OKLCH चाहिए? एक बार पेस्ट करें, किसी भी फॉर्मेट में कॉपी करें। आउटपुट स्ट्रिंग्स वैध CSS Color Module Level 4 सिंटैक्स हैं।
पैलेट अन्वेषण
एक बेस रंग चुनें और तुरंत नौ अनुभूति के अनुसार अंतरित टिंट्स और शेड्स के साथ-साथ कॉम्प्लीमेंट्री, ट्रायाडिक और एनालॉगस हार्मनीज़ देखें — OKLCH में जेनरेट किए गए ताकि हर स्टेप समान रूप से चमकीला दिखे।
100% निजी — आपके ब्राउज़र में चलता है
कलर मान कभी आपके डिवाइस को नहीं छोड़ते। DevTools → Network खोलें और आप देखेंगे कि रूपांतरण, पिकिंग, पैलेट जनरेशन या कंट्रास्ट जाँच के दौरान शून्य आउटबाउंड अनुरोध हैं।
- हर रूपांतरण (HEX ↔ RGB ↔ HSL ↔ OKLCH ↔ OKLAB) आपकी मशीन पर JavaScript के रूप में चलता है — फॉर्मूले पेज सोर्स में दिखाई देते हैं।
- EyeDropper API केवल वही रंग लौटाता है जिन पर आप स्पष्ट रूप से क्लिक करते हैं; ब्राउज़र अनुमति संभालता है और पेज को कभी भी मनमाने पिक्सेल देखने नहीं देता।
- कोई लॉगिन नहीं, कलर मानों पर कोई टेलीमेट्री नहीं, कोई तीसरे पक्ष का कलर API नहीं। साइट बॉक्स से बाहर GDPR-अनुपालक है।
संबंधित गाइड
डिज़ाइनरों, डेवलपर्स और एक्सेसिबिलिटी टीमों के लिए हाथ से चुने गए ट्यूटोरियल।
-
OKLCH in CSS — A Practical Guide for 2026
Why OKLCH replaces HSL for design systems: perceptual lightness, predictable chroma, wide-gamut support.
-
WCAG 2.2 Contrast Ratios — How They're Calculated and What "AA" vs "AAA" Means
From sRGB linearization to relative luminance — every step of the contrast formula, with worked examples.
अक्सर पूछे जाने वाले
मैं HEX को RGB में कैसे बदलूँ?
अपना hex मान (जैसे #ff5722) HEX फ़ील्ड में पेस्ट करें — RGB पंक्ति तुरंत अपडेट हो जाएगी। इसी तरह, RGB फ़ील्ड में rgb(255 87 34) पेस्ट करें और HEX, HSL, OKLCH और OKLAB सभी सिंक हो जाएंगे। हर समर्थित फॉर्मेट में रूपांतरण द्विदिशात्मक है।
OKLCH क्या है और मुझे इसका उपयोग क्यों करना चाहिए?
OKLCH एक CSS Color Module Level 4 कलर स्पेस है जो अनुभूति-आधारित लाइटनेस (L), क्रोमा (C), और ह्यू (h) का उपयोग करता है — HSL की तरह, लेकिन अनुभूति में एकसमान। समान L मान वाले दो OKLCH रंग समान रूप से चमकीले दिखते हैं, चाहे ह्यू अलग हों। यह डिज़ाइन टोकन, जेनरेट किए गए पैलेट और एक्सेसिबल कलर रैंप को HSL की तुलना में कहीं अधिक पूर्वानुमेय बनाता है। सभी एवरग्रीन ब्राउज़र (Chrome 111+, Safari 15.4+, Firefox 113+) इसका समर्थन करते हैं।
क्या WCAG कंट्रास्ट परिणाम विश्वसनीय है?
हाँ। हम WCAG 2.2 §1.4.3 के एल्गोरिदम का उपयोग करते हैं: प्रत्येक sRGB चैनल को लीनियराइज़ करें, सापेक्ष ल्यूमिनेन्स (0.2126·R + 0.7152·G + 0.0722·B) की गणना करें, फिर (L_lighter + 0.05) / (L_darker + 0.05)। AA सामान्य टेक्स्ट के लिए 4.5 : 1 पर और बड़े टेक्स्ट (18 pt+ या 14 pt+ बोल्ड) के लिए 3 : 1 पर पास होता है। AAA क्रमशः 7 : 1 और 4.5 : 1 पर पास होता है।
क्या मैं छवियों या अन्य ऐप्स से रंगों का नमूना ले सकता हूँ?
हाँ — ब्राउज़र के अंतर्निहित EyeDropper API को लॉन्च करने के लिए Eyedropper बटन पर क्लिक करें। आप स्क्रीन पर कहीं भी किसी भी पिक्सेल का नमूना ले सकते हैं: दूसरा ब्राउज़र टैब, Figma डिज़ाइन, वीडियो फ्रेम, यहाँ तक कि स्क्रीनशॉट भी। वर्तमान में Chrome, Edge और Opera पर समर्थित; Firefox और Safari शालीनता से फॉलबैक करते हैं (बटन निष्क्रिय रहता है)।
क्या कुछ भी आपके सर्वर पर भेजा जाता है?
नहीं। पिकर, हर रूपांतरण, पैलेट जनरेटर और कंट्रास्ट चेकर सब आपके ब्राउज़र में चलते हैं। कोई भी कलर मान, छवि नमूने, या टेक्स्ट कभी प्रसारित नहीं होते। आप DevTools → Network खोल सकते हैं और सत्यापित कर सकते हैं कि उपयोग के दौरान शून्य आउटबाउंड अनुरोध हैं।