# कलर पिकर ऑनलाइन

> HSV, HSL और पारंपरिक RYB रंग चक्र, तैयार रंग सामंजस्य और HEX, RGB, HSL, OKLCH व CMYK में रूपांतरण। नज़दीकी Tailwind टोकन भी। मुफ़्त, इंस्टॉल की ज़रूरत नहीं।

URL: https://acrafto.com/hi/color-picker-online/  
Updated: 2026-09-23

Tools are interactive browser apps; there is no public API, no endpoints to call and no server-side processing. To use a tool, open its HTML page in a browser.

चक्र पर एक रंग चुनें, संतृप्ति और चमक वाली प्लेट पर उसे फ़ाइन-ट्यून करें, और उसे अपने प्रोजेक्ट में इस्तेमाल होने वाले हर फ़ॉर्मेट में पढ़ें, `#RRGGBB` से लेकर `oklch()` तक। यह टूल वे चीज़ें भी करता है जो बाकी कलर पिकर छोड़ देते हैं: तीन तरह के रंग चक्र जिनमें पारंपरिक चित्रकार वाला RYB भी शामिल है, हार्मनी नियम जो खुद पैलेट बना देते हैं, पारदर्शिता (अल्फा) और पूरी पैलेट को एक क्लिक में CSS वेरिएबल, SCSS या JSON के रूप में एक्सपोर्ट करने की सुविधा। सब कुछ आपके ब्राउज़र में ही कैलकुलेट होता है।

## RYB या RGB? एक नहीं, तीन रंग चक्र

**व्हील मोड** स्विच चक्र पर रंगों के बंटवारे को बदल देता है:

- **HSV** और **HSL** डिजिटल चक्र हैं। रंग वैसे ही बँटे हैं जैसे स्क्रीन पर रोशनी उन्हें मिलाती है। ये स्क्वेयर प्लेट के व्यवहार में अलग हैं: HSV में सबसे चमकीला कोना शुद्ध रंग होता है, जबकि HSL शुद्ध रंगों को बीच की चमक पर रखता है और उनके ऊपर सफ़ेद।
- **RYB (चित्रकार वाला)** रंगों को उसी क्रम में रखता है जैसे चित्रकार सीखते हैं: लाल, पीला और नीला प्राथमिक रंग, और बीच में नारंगी, हरा और बैंगनी (देखें [RYB रंग मॉडल](https://en.wikipedia.org/wiki/RYB_color_model), अंग्रेज़ी में)। फ़र्क़ सबसे ज़्यादा हार्मनी में दिखता है। RYB चक्र पर लाल का पूरक रंग **हरा** है और नीले का पूरक **नारंगी**, यानी वही क्लासिक जोड़े जो चित्रकला में सिखाए जाते हैं। डिजिटल चक्र लाल को सायन के साथ जोड़ता है। अगर सामान्य कलर पिकर की “पूरक” पैलेट कभी आपको गलत लगी हो, तो वजह यही है।

## रंग हार्मनी: पैलेट जो खुद बन जाती है

**रंग सामंजस्य** फ़ील्ड में कोई नियम चुनें। चक्र साथी रंगों को चिह्नित करता है और नीचे तैयार पैलेट दिखती है:

- **पूरक:** एक विपरीत रंग। सबसे तेज़ कंट्रास्ट, मुख्य ब्रांड रंग के साथ एक अकेले एक्सेंट के लिए ठीक।
- **स्प्लिट-पूरक:** पूरक रंग के दोनों पड़ोसी। कंट्रास्ट लगभग उतना ही तेज़, पर बैलेंस करना आसान।
- **त्रिकोणीय:** चक्र पर बराबर दूरी के तीन रंग। जीवंत और फिर भी स्थिर, जब एक रंग हावी रहे और बाकी दो को संयम से इस्तेमाल करें।
- **चतुष्कोणीय (वर्ग):** चार रंग। इलस्ट्रेशन और चार्ट के लिए भरपूर स्कीम, ऐप के इंटरफ़ेस में बैलेंस करना मुश्किल।
- **सदृश:** सबसे नज़दीकी पड़ोसी रंग। बैकग्राउंड और ग्रेडिएंट के लिए शांत मिश्रण।
- **एकवर्णी:** अलग-अलग चमक में एक ही रंग। बटन की स्थितियों (होवर, एक्टिव, डिसेबल्ड) के लिए सबसे सुरक्षित विकल्प।

पूरी पैलेट को अपने चुने फ़ॉर्मेट में एक क्लिक में कॉपी करें: सादा **HEX**, **RGB**, **HSL**, **OKLCH**, पेस्ट के लिए तैयार **CSS वेरिएबल** (`--color-1: …`), **SCSS वेरिएबल** या कोड के लिए **JSON**। पैलेट के रंग उन लोगों के लिए भी कंट्रास्ट बनाए रखते हैं या नहीं जिन्हें रंग पहचानने में दिक्कत होती है, यह स्क्रीनशॉट लेकर [ग्रेस्केल में बदलने](https://acrafto.com/hi/chhavi-ko-grayscale-mein-badlen-online/) के बाद झट से पता चल जाता है।

## HEX, RGB, HSL, OKLCH और CMYK का रूपांतरण: कुछ भी डालें, सब कुछ पाएं

इनपुट फ़ील्ड लगभग हर रंग लिखावट स्वीकार करते हैं: `#f80`, `#ff8800`, पारदर्शिता वाला आठ अंकों का हेक्स, `rgb()` और `rgba()`, `hsl()`, `hwb()`, `lch()`, `oklch()`, `oklab()`, `cmyk()`, `0xFF8800` और `rebeccapurple` जैसे नामी CSS रंग। जो भी डालें, सात मेल खाते आउटपुट मिलते हैं: **HEX, RGB, HSL, HSV, LCH, OKLCH और CMYK**, हर एक के साथ अपना कॉपी बटन।

प्रिव्यू के नीचे **अपारदर्शिता (अल्फा)** स्लाइडर आउटपुट को पारदर्शी रूपों में बदल देता है: `#RRGGBBAA`, `rgba()` और `hsla()`। प्रिव्यू चेकरबोर्ड पर बनता है, इसलिए पारदर्शिता तुरंत नज़र आ जाती है।

## किसी भी रंग का सबसे नज़दीकी Tailwind CSS टोकन

प्रिव्यू के नीचे दो लेबल रंग का नाम बताते हैं: **सबसे नज़दीकी नामी CSS रंग** (तेज़ प्रोटोटाइप के लिए काम का) और **सबसे नज़दीकी Tailwind टोकन**, जैसे `orange-500`। इस तरह आप अपने डिज़ाइन सिस्टम में ही रहते हैं और अलग से वैल्यू बनाने की ज़रूरत नहीं पड़ती। लेबल पर क्लिक करके उसे कॉपी करें।

यह उस सवाल का जवाब देता है जो हर डिज़ाइन हैंडऑफ़ में आता है: डिज़ाइनर ने हेक्स कोड भेजा, कौन-सी Tailwind क्लास इससे सबसे मेल खाती है? मैच Tailwind CSS 4 की डिफ़ॉल्ट पैलेट के मुकाबले निकाला जाता है (देखें [Tailwind की डॉक्यूमेंटेशन](https://tailwindcss.com/docs/colors), अंग्रेज़ी में), इसलिए टोकन को सीधे क्लास नाम में इस्तेमाल किया जा सकता है।

## कौन सा रंग फ़ॉर्मेट इस्तेमाल करें?

| फ़ॉर्मेट | पूरा नाम | कब इस्तेमाल करें |
| :--- | :--- | :--- |
| **HEX** | Hexadecimal | **वेब के लिए डिफ़ॉल्ट।** छोटा, हर जगह सपोर्टेड, कॉपी करना आसान। आठ अंक पारदर्शिता जोड़ते हैं। |
| **RGB** | Red, Green, Blue | **स्क्रीन ऐसे ही सोचती हैं।** तीन लाइट चैनल, 0 से 255 तक। ज़्यादातर API और कैनवस कोड इसी की उम्मीद रखते हैं। |
| **HSL** | Hue, Saturation, Lightness | **आंख से बदलाव के लिए।** “थोड़ा हल्का” या “कम गहरा” यानी बस एक नंबर बदलना। |
| **HSV** | Hue, Saturation, Value | **ग्राफ़िक सॉफ़्टवेयर।** Photoshop और GIMP के कलर पिकर का आधार यही मॉडल है। |
| **LCH** | Lightness, Chroma, Hue | **नज़र में एक जैसी दूरी।** नंबर में बराबर कदम आंख को भी बराबर कदम जैसे दिखते हैं, जबकि HSL में यह सिर्फ़ दिखावा है। |
| **OKLCH** | OK Lightness, Chroma, Hue | **CSS की आधुनिक पसंद।** LCH में नीले रंगों में आने वाली गड़बड़ी ठीक करता है। सभी मौजूदा ब्राउज़र सपोर्ट करते हैं और डिज़ाइन टोकन के लिए ठीक है। |
| **CMYK** | Cyan, Magenta, Yellow, Key | **प्रिंट के लिए दिशा।** प्रिंटर से बात करने के लिए अनुमानित रूपांतरण, आख़िरी वैल्यू उसकी कलर प्रोफ़ाइल तय करती है। |

OKLCH पुराने मॉडल से ज़्यादा नज़र में एक जैसा क्यों है, यह Oklab स्पेस बनाने वाले Björn Ottosson अपने [मूल लेख](https://bottosson.github.io/posts/oklab/) में बताते हैं (अंग्रेज़ी में)। सिंटैक्स और ब्राउज़र सपोर्ट [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/oklch) पर मिलता है (अंग्रेज़ी में)। प्रिंट मॉडल कैसे काम करता है, यह [विकिपीडिया के CMYK लेख](https://hi.wikipedia.org/wiki/%E0%A4%B8%E0%A5%80_%E0%A4%8F%E0%A4%AE_%E0%A4%B5%E0%A4%BE%E0%A4%88_%E0%A4%95%E0%A5%87_%E0%A4%B5%E0%A4%B0%E0%A5%8D%E0%A4%A3_%E0%A4%AA%E0%A5%8D%E0%A4%B0%E0%A4%A4%E0%A4%BF%E0%A4%B0%E0%A5%82%E0%A4%AA) में समझाया गया है।

## समय बचाने वाली छोटी चीज़ें

- **इतिहास खुद सेव हो जाता है।** आख़िरी 24 रंग पेज रीफ़्रेश के बाद भी रहते हैं। ये सिर्फ़ आपके ब्राउज़र के स्टोरेज में रहते हैं, कहीं भेजे नहीं जाते।
- **आईड्रॉपर।** जिन ब्राउज़र में EyeDropper API मिलता है (Chrome और Edge), वहां स्क्रीन पर कहीं से भी, यहां तक कि ब्राउज़र विंडो के बाहर से भी रंग चुना जा सकता है। फोटो या लोगो फ़ाइल से रंग चाहिए तो [इमेज कलर पिकर](https://acrafto.com/hi/online-color-picker-tool/) इस्तेमाल करें।
- **कीबोर्ड कंट्रोल।** चक्र और संतृप्ति वाली प्लेट, दोनों ऐरो-की पर प्रतिक्रिया देते हैं, इसलिए रंग को छोटे-छोटे कदमों में ठीक किया जा सकता है।
- **प्रीसेट** आम बेस रंग देते हैं, जब बस एक तेज़ शुरुआत चाहिए।

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

### OKLCH को HEX में कैसे बदलें?

`oklch()` वैल्यू को OKLCH फ़ील्ड में डालें, बाकी सभी आउटपुट, HEX सहित, तुरंत अपडेट हो जाते हैं। यह उल्टा भी चलता है: HEX डालें और उसके बराबर `oklch()` पढ़ें। एक बात ध्यान रखें: OKLCH sRGB के दायरे से बाहर के रंग भी बता सकता है, और वे रंग sRGB जितना दिखा सकता है उतने में सीमित कर दिए जाते हैं। इसलिए बहुत गहरा `oklch()` वाइड-गैमट डिस्प्ले पर अपने HEX रूप जैसा नहीं दिखेगा।

### क्या प्रोडक्शन CSS में oklch() इस्तेमाल करना सुरक्षित है?

हां। Chrome, Edge, Firefox और Safari के सभी मौजूदा वर्शन `oklch()` को सपोर्ट करते हैं, और यह डिज़ाइन टोकन के लिए लोकप्रिय लिखावट बन चुका है (Tailwind CSS 4 अपनी पूरी पैलेट इसी में तय करता है)। बहुत पुराने ब्राउज़र के लिए, उससे पहले वाली लाइन में HEX फ़ॉलबैक रखें। यह टूल आपको दोनों वैल्यू देता है।

### RYB चक्र पर जाने से हार्मनी क्यों बदल जाती है?

क्योंकि "विपरीत" क्या है, यह इस पर निर्भर करता है कि चक्र पर रंग कैसे बँटे हैं। RYB चक्र पिगमेंट के प्राथमिक रंगों को बराबर फैलाता है, इसलिए पूरक जोड़े वही बनते हैं जो चित्रकार जानते हैं: लाल और हरा, नीला और नारंगी, पीला और बैंगनी। HSV और HSL चक्र रंगों को रोशनी के मिश्रण के हिसाब से बांटते हैं, इसलिए वे लाल को सायन के साथ जोड़ते हैं। कोई भी गलत नहीं है: RYB पारंपरिक कला शिक्षा से मेल खाता है, HSV और HSL स्क्रीन के काम करने के तरीके से।

### क्या प्रिंट के लिए CMYK वैल्यू पर भरोसा किया जा सकता है?

इन्हें अनुमान मानें। असली प्रिंट रूपांतरण प्रिंटर, कागज़ और स्याही के [ICC प्रोफ़ाइल](https://en.wikipedia.org/wiki/ICC_profile) (अंग्रेज़ी में) पर निर्भर करता है। वही RGB रंग कोटेड और बिना कोटेड कागज़ पर अलग दिखता है। यहां की वैल्यू मानक फ़ॉर्मूले से निकाली जाती हैं, जो आपको करीब ले आता है, पर आख़िरी प्रूफ़ प्रिंट शॉप का काम है।

### Firefox या Safari में आईड्रॉपर बटन कहां है?

यह जानबूझकर छिपाया गया है। जिस [EyeDropper API](https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API) (MDN, अंग्रेज़ी में) पर यह बटन टिका है, वह फ़िलहाल सिर्फ़ Chromium पर बने ब्राउज़र (Chrome, Edge, Opera) में मिलता है। टूल की बाकी सुविधाएं हर जगह काम करती हैं, सिर्फ़ स्क्रीन से रंग चुनना नहीं। अगर इमेज से रंग चाहिए, तो [इमेज कलर पिकर](https://acrafto.com/hi/online-color-picker-tool/) इस्तेमाल करें, जो हर ब्राउज़र में काम करता है।

### क्या मेरा रंग इतिहास निजी रहता है?

हां। इतिहास आपके ब्राउज़र के localStorage में, आपके डिवाइस पर ही रहता है। जो भी चुनें, पेस्ट करें या कॉपी करें, वह कहीं नहीं भेजा जाता। पूरा टूल ब्राउज़र में जावास्क्रिप्ट की तरह चलता है, जिसे डेवलपर टूल्स के नेटवर्क टैब में देखकर खुद जांचा जा सकता है।

## Other languages

- Čeština (cs): [Barevné kolo](https://acrafto.com/cs/barevne-kolo/) ([Markdown](https://acrafto.com/cs/barevne-kolo/index.md))
- Slovenčina (sk): [Online výber farieb](https://acrafto.com/sk/online-vyber-farieb/) ([Markdown](https://acrafto.com/sk/online-vyber-farieb/index.md))
- English (en): [Color Picker](https://acrafto.com/en/color-picker-online/) ([Markdown](https://acrafto.com/en/color-picker-online/index.md))
- Deutsch (de): [Farbwähler](https://acrafto.com/de/farbwahl-online-farbrad-konverter/) ([Markdown](https://acrafto.com/de/farbwahl-online-farbrad-konverter/index.md))
- Français (fr): [Sélecteur de couleur](https://acrafto.com/fr/selecteur-couleur-en-ligne/) ([Markdown](https://acrafto.com/fr/selecteur-couleur-en-ligne/index.md))
- Español (es): [Selector de colores online](https://acrafto.com/es/selector-de-colores-online/) ([Markdown](https://acrafto.com/es/selector-de-colores-online/index.md))
- Italiano (it): [Selettore colori](https://acrafto.com/it/selettore-colori-online/) ([Markdown](https://acrafto.com/it/selettore-colori-online/index.md))
- Português (pt): [Color Picker Online](https://acrafto.com/pt/color-picker-online-roda-cores-conversor-hex-rgb-lch/) ([Markdown](https://acrafto.com/pt/color-picker-online-roda-cores-conversor-hex-rgb-lch/index.md))
- Nederlands (nl): [Kleurkiezer](https://acrafto.com/nl/online-kleurkiezer/) ([Markdown](https://acrafto.com/nl/online-kleurkiezer/index.md))
- Polski (pl): [Color Picker Online](https://acrafto.com/pl/color-picker-online-konwerter-kolorow/) ([Markdown](https://acrafto.com/pl/color-picker-online-konwerter-kolorow/index.md))
- Română (ro): [Selector de culori](https://acrafto.com/ro/selector-culori-online/) ([Markdown](https://acrafto.com/ro/selector-culori-online/index.md))
- Magyar (hu): [Online színválasztó](https://acrafto.com/hu/szinvalaszto-online/) ([Markdown](https://acrafto.com/hu/szinvalaszto-online/index.md))
- Ελληνικά (el): [Color picker online](https://acrafto.com/el/online-color-picker-chromatikos-trochos/) ([Markdown](https://acrafto.com/el/online-color-picker-chromatikos-trochos/index.md))
- Български (bg): [Цветово колело](https://acrafto.com/bg/onlain-izbirach-na-cvetove/) ([Markdown](https://acrafto.com/bg/onlain-izbirach-na-cvetove/index.md))
- Hrvatski (hr): [Kotač boja](https://acrafto.com/hr/online-birac-boja-pretvornik/) ([Markdown](https://acrafto.com/hr/online-birac-boja-pretvornik/index.md))
- Slovenščina (sl): [Izbirnik barv](https://acrafto.com/sl/izbirnik-barv-splet/) ([Markdown](https://acrafto.com/sl/izbirnik-barv-splet/index.md))
- Eesti (et): [Värvivalija](https://acrafto.com/et/varvivalija-online/) ([Markdown](https://acrafto.com/et/varvivalija-online/index.md))
- Latviešu (lv): [Krāsu ritenis](https://acrafto.com/lv/krasu-atlasitajs-tiessaiste/) ([Markdown](https://acrafto.com/lv/krasu-atlasitajs-tiessaiste/index.md))
- Lietuvių (lt): [Spalvų parinkiklis](https://acrafto.com/lt/spalvu-parinkiklis-internetu/) ([Markdown](https://acrafto.com/lt/spalvu-parinkiklis-internetu/index.md))
- Svenska (sv): [Färgväljare](https://acrafto.com/sv/fargv%C3%A4ljare-online/) ([Markdown](https://acrafto.com/sv/fargv%C3%A4ljare-online/index.md))
- Dansk (da): [Farvevælger og farvehjul](https://acrafto.com/da/farvevaelger-online-farvehjul-konverter/) ([Markdown](https://acrafto.com/da/farvevaelger-online-farvehjul-konverter/index.md))
- Suomi (fi): [Värinvalitsin online](https://acrafto.com/fi/varinvalitsin-online/) ([Markdown](https://acrafto.com/fi/varinvalitsin-online/index.md))
- Norsk (no): [Fargehjul og fargevelger](https://acrafto.com/no/online-fargevelger-hex-rgb-lch/) ([Markdown](https://acrafto.com/no/online-fargevelger-hex-rgb-lch/index.md))
- Українська (uk): [Вибір кольору онлайн](https://acrafto.com/uk/kolir-picker-onlayn/) ([Markdown](https://acrafto.com/uk/kolir-picker-onlayn/index.md))
- Русский (ru): [Цветовой круг](https://acrafto.com/ru/onlain-vybor-tsveta/) ([Markdown](https://acrafto.com/ru/onlain-vybor-tsveta/index.md))
- Српски (sr): [Točak boja](https://acrafto.com/sr/online-izbirac-boja/) ([Markdown](https://acrafto.com/sr/online-izbirac-boja/index.md))
- Македонски (mk): [Избирач на бои](https://acrafto.com/mk/izbirac-boi-online/) ([Markdown](https://acrafto.com/mk/izbirac-boi-online/index.md))
- Bosanski (bs): [Krug boja](https://acrafto.com/bs/birac-boja-online-pretvornik/) ([Markdown](https://acrafto.com/bs/birac-boja-online-pretvornik/index.md))
- Shqip (sq): [Zgjedhës ngjyrash](https://acrafto.com/sq/zgjedhes-ngjyrash-online-konvertues/) ([Markdown](https://acrafto.com/sq/zgjedhes-ngjyrash-online-konvertues/index.md))
- Türkçe (tr): [Renk seçici](https://acrafto.com/tr/online-renk-secici/) ([Markdown](https://acrafto.com/tr/online-renk-secici/index.md))
- 日本語 (ja): [カラーピッカー](https://acrafto.com/ja/online-color-picker/) ([Markdown](https://acrafto.com/ja/online-color-picker/index.md))
- 한국어 (ko): [컬러 피커](https://acrafto.com/ko/online-color-picker/) ([Markdown](https://acrafto.com/ko/online-color-picker/index.md))
- العربية (ar): [منتقي الألوان](https://acrafto.com/ar/muntaky-al-alwan-online/) ([Markdown](https://acrafto.com/ar/muntaky-al-alwan-online/index.md))
- Bahasa Indonesia (id): [Pemilih warna](https://acrafto.com/id/pemilih-warna-online/) ([Markdown](https://acrafto.com/id/pemilih-warna-online/index.md))
- Tiếng Việt (vi): [Bánh xe màu](https://acrafto.com/vi/chon-mau-online/) ([Markdown](https://acrafto.com/vi/chon-mau-online/index.md))
- ไทย (th): [วงล้อสี](https://acrafto.com/th/online-color-picker/) ([Markdown](https://acrafto.com/th/online-color-picker/index.md))
- עברית (he): [גלגל צבעים](https://acrafto.com/he/online-color-picker-hex-rgb-lch/) ([Markdown](https://acrafto.com/he/online-color-picker-hex-rgb-lch/index.md))