Color Converter

विजुअल कलर पिकर के साथ HEX, RGB, HSL और HSV के बीच रंग कन्वर्ट करें

उदाहरण देखें

पिकर खोलने के लिए रंग पर क्लिक करें

या नीचे कोई भी मान संपादित करें

HEX
RGB
HSL
HSV

रंग रूपांतरण क्या है?

एक रंग कनवर्टर किसी रंग मान को एक फॉर्मेट से दूसरे में बदलता है — उदाहरण के लिए, HEX (#6366F1) से RGB (99, 102, 241) या HSL (239, 84%, 67%) में। उसी रंग को HSV (239, 59%, 95%) के रूप में भी व्यक्त किया जा सकता है। प्रत्येक प्रारूप एक भिन्न गणितीय मॉडल का उपयोग करके एक ही दृश्य रंग को एन्कोड करता है; विभिन्न उपकरण, भाषाएँ और API संदर्भ के अनुसार अलग-अलग प्रारूपों की अपेक्षा करते हैं।

HEX और RGB दोनों रंग को लाल, हरे और नीले प्रकाश के मिश्रण के रूप में दर्शाते हैं। HEX उन्हीं तीन 0-255 चैनल मानों का एक संक्षिप्त हेक्साडेसिमल प्रतिनिधित्व है जिन्हें RGB दशमलव में व्यक्त करता है। HSL (Hue, Saturation, Lightness) और HSV (Hue, Saturation, Value) उसी जानकारी को एक गोलाकार निर्देशांक प्रणाली में पुनर्व्यवस्थित करते हैं, जहाँ रंग-छाया (hue) रंग चक्र पर एक कोण है (0-360 डिग्री), और संतृप्ति व चमक प्रतिशत में होती हैं। इससे HSL और HSV एक ही रंग-छाया के हल्के या गहरे शेड बनाने जैसे कार्यों के लिए अधिक सहज हो जाते हैं।

इन प्रारूपों के बीच रूपांतरण के लिए सुपरिभाषित गणित की आवश्यकता होती है। W3C CSS Color Module Level 4 विनिर्देश उन एल्गोरिदम का दस्तावेज़ीकरण करता है जिनका उपयोग ब्राउज़र किसी भी CSS रंग को sRGB त्रिक में बदलने के लिए करते हैं। सूत्र निर्धारक हैं: एक निश्चित इनपुट सदैव एक ही आउटपुट उत्पन्न करता है, इसलिए जब तक मानों को गोल या सीमित नहीं किया जाता, रूपांतरण बिना डेटा हानि के होता है। अधिकांश रंग पिकर और डिज़ाइन उपकरण अपने आंतरिक कार्यों में इन्हीं सूत्रों पर निर्भर होते हैं।

इस Color Converter का उपयोग क्यों करें?

डिज़ाइन उपकरण रंग एक प्रारूप में निर्यात करते हैं, आपके CSS को दूसरा चाहिए, और जिस API को आप कॉल कर रहे हैं वह तीसरे की अपेक्षा करता है। रूपांतरण कोड लिखने या सही सूत्र खोजने के बजाय, एक मान पेस्ट करें और एक साथ सभी प्रारूप प्राप्त करें।

तत्काल लाइव रूपांतरण
कोई रंग टाइप करें या चुनें और HEX, RGB, HSL तथा HSV को तुरंत अपडेट होते देखें। कोई सबमिट बटन नहीं, सर्वर पर कोई अनुरोध नहीं।
🔒
पूरी तरह प्राइवेट
सारी कैलकुलेशन आपके ब्राउज़र में होती है। कोई रंग मान, उपयोग डेटा या कुकीज़ कहीं नहीं भेजे जाते।
🔀
एक साथ चारों प्रारूप
एक इनपुट HEX, RGB, HSL और HSV एक साथ उत्पन्न करता है। एक क्लिक से जो प्रारूप चाहिए उसे कॉपी करें।
📋
कोई खाता आवश्यक नहीं
पेज खोलें और रूपांतरण शुरू करें। कोई साइन-अप नहीं, कोई ईमेल नहीं, कोई दर सीमा नहीं। एक बार लोड होने के बाद ऑफ़लाइन भी कार्य करता है।

Color Converter के उपयोग के मामले

CSS विकास
एक डिज़ाइनर आपको Figma से HEX मान देता है, लेकिन आपकी कॉम्पोनेंट लाइब्रेरी थीमिंग के लिए HSL उपयोग करती है। मान बदलें और उसे अपनी CSS कस्टम प्रॉपर्टी या Tailwind कॉन्फ़िग में डालें।
Backend API एकीकरण
आपका एंडपॉइंट चार्ट निर्माण के लिए रंग RGB ऐरे के रूप में स्वीकार करता है। स्टाइल गाइड के ब्रांड HEX कोड को उन पूर्णांक त्रिकों में बदलें जो API अपेक्षा करता है।
डिज़ाइन सिस्टम रखरखाव
किसी डिज़ाइन सिस्टम का दस्तावेज़ीकरण करते समय, आपको प्रत्येक रंग टोकन त्वरित संदर्भ के लिए HEX में, Canvas रेंडरिंग के लिए RGB में, और प्रोग्रामेटिक शेड निर्माण के लिए HSL में सूचीबद्ध करना होता है।
QA और दृश्य परीक्षण
स्क्रीनशॉट के पिक्सेल रंग (जो सामान्यतः ब्राउज़र DevTools द्वारा RGB में रिपोर्ट किया जाता है) की तुलना Figma विनिर्देश के अपेक्षित HEX मान से करना। त्वरित रूपांतरण बेमेल की पुष्टि करता है या उन्हें चिह्नित करता है।
डेटा विज़ुअलाइज़ेशन
D3.js और Chart.js जैसी चार्ट लाइब्रेरी विधि के अनुसार अलग-अलग प्रारूपों में रंग स्वीकार करती हैं। एक बार रूपांतरण करें और अपने डेटासेट कॉन्फ़िगरेशन में एकसमान अंकन बनाए रखें।
रंग सिद्धांत सीखना
कंप्यूटर ग्राफ़िक्स या वेब डिज़ाइन के विद्यार्थी देख सकते हैं कि एक ही रंग HEX, RGB, HSL और HSV में किस प्रकार दर्शाया जाता है। एक चैनल बदलकर और दूसरों को बदलते देखकर यह समझ विकसित होती है कि रंग मॉडल आपस में कैसे संबंधित हैं।

रंग प्रारूप संदर्भ

नीचे दी गई तालिका पाँच सबसे सामान्य रंग प्रारूप सूचीबद्ध करती है, जिसमें एक ही इंडिगो रंग (#6366F1) प्रत्येक अंकन में दिखाया गया है। HEX और RGB CSS और JavaScript में सबसे व्यापक रूप से समर्थित हैं। HSL थीमिंग के लिए पसंदीदा है क्योंकि चमक और संतृप्ति को सीधे समायोजित करना सरल है। HSV वह मॉडल है जिसका उपयोग अधिकांश ग्राफ़िक डिज़ाइन सॉफ़्टवेयर के रंग पिकर करते हैं।

प्रारूपउदाहरण (इंडिगो)चैनलसामान्य उपयोग
HEX#6366F16 (or 3/8)CSS, design tools, brand guides
RGBrgb(99, 102, 241)3 (0–255 each)CSS, Canvas API, image processing
HSLhsl(239, 84%, 67%)3 (deg, %, %)CSS, color theming, accessibility tuning
HSVhsv(239, 59%, 95%)3 (deg, %, %)Color pickers, Photoshop, Figma
CMYKcmyk(59%, 58%, 0%, 5%)4 (0–100% each)Print design, prepress workflows

HEX बनाम RGB बनाम HSL

तीनों प्रारूप एक ही sRGB रंग स्थान का वर्णन करते हैं। अंतर यह है कि वे डेटा को किस प्रकार प्रस्तुत करते हैं, जो विभिन्न संदर्भों में पठनीयता और संचालन की सुविधा को प्रभावित करता है।

HEX
एक 6-अंकीय हेक्साडेसिमल स्ट्रिंग (या 3-अंकीय संक्षिप्त रूप)। CSS, डिज़ाइन उपकरणों और ब्रांड दिशानिर्देशों में संक्षिप्त और सर्वव्यापी। एक नज़र में पढ़ना कठिन है: #6366F1 से रंग-छाया का पता नहीं चलता। अल्फ़ा पारदर्शिता के लिए वैकल्पिक 8-अंकीय रूप (#6366F180) का समर्थन करता है।
RGB
लाल, हरे और नीले चैनलों के लिए 0 से 255 तक के तीन पूर्णांक। Canvas 2D, WebGL और अधिकांश छवि प्रसंस्करण लाइब्रेरी के लिए मूल प्रारूप। चैनल-दर-चैनल संचालन में सरल, लेकिन दिखने वाली चमक को समायोजित करने के लिए तीनों मानों को एक साथ बदलना आवश्यक होता है।
HSL
रंग-छाया (0-360 डिग्री), संतृप्ति (0-100%) और चमक (0-100%)। मानव पठनीयता के लिए निर्मित। रंग को हल्का करने के लिए L बढ़ाएँ। संतृप्ति कम करने के लिए S घटाएँ। CSS मूल रूप से hsl() अंकन का समर्थन करता है, और आधुनिक CSS color-mix() और सापेक्ष रंग सिंटैक्स इसी पर आधारित हैं।

कोड उदाहरण

सामान्य भाषाओं और परिवेशों में HEX, RGB और HSL के बीच रंग रूपांतरण। प्रत्येक उदाहरण आसान तुलना के लिए एक ही इंडिगो रंग (#6366F1) का उपयोग करता है।

JavaScript
// HEX → RGB
function hexToRgb(hex) {
  const n = parseInt(hex.replace('#', ''), 16)
  return [(n >> 16) & 255, (n >> 8) & 255, n & 255]
}
hexToRgb('#6366f1') // → [99, 102, 241]

// RGB → HSL
function rgbToHsl(r, g, b) {
  r /= 255; g /= 255; b /= 255
  const max = Math.max(r, g, b), min = Math.min(r, g, b)
  const l = (max + min) / 2
  if (max === min) return [0, 0, Math.round(l * 100)]
  const d = max - min
  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
  let h = 0
  if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6
  else if (max === g) h = ((b - r) / d + 2) / 6
  else h = ((r - g) / d + 4) / 6
  return [Math.round(h * 360), Math.round(s * 100), Math.round(l * 100)]
}
rgbToHsl(99, 102, 241) // → [239, 84, 67]
Python
import colorsys

# HEX → RGB
def hex_to_rgb(hex_str: str) -> tuple[int, int, int]:
    h = hex_str.lstrip('#')
    return tuple(int(h[i:i+2], 16) for i in (0, 2, 4))

hex_to_rgb('#6366f1')  # → (99, 102, 241)

# RGB → HSL (colorsys uses HLS order)
r, g, b = 99 / 255, 102 / 255, 241 / 255
h, l, s = colorsys.rgb_to_hls(r, g, b)
print(f"hsl({h * 360:.0f}, {s * 100:.0f}%, {l * 100:.0f}%)")
# → hsl(239, 84%, 67%)

# RGB → HSV
h, s, v = colorsys.rgb_to_hsv(r, g, b)
print(f"hsv({h * 360:.0f}, {s * 100:.0f}%, {v * 100:.0f}%)")
# → hsv(239, 59%, 95%)
Go
package main

import (
	"fmt"
	"math"
)

func hexToRGB(hex string) (int, int, int) {
	var r, g, b int
	fmt.Sscanf(hex, "#%02x%02x%02x", &r, &g, &b)
	return r, g, b
}

func rgbToHSL(r, g, b int) (int, int, int) {
	rf, gf, bf := float64(r)/255, float64(g)/255, float64(b)/255
	max := math.Max(rf, math.Max(gf, bf))
	min := math.Min(rf, math.Min(gf, bf))
	l := (max + min) / 2
	if max == min {
		return 0, 0, int(math.Round(l * 100))
	}
	d := max - min
	s := d / (2 - max - min)
	if l <= 0.5 {
		s = d / (max + min)
	}
	var h float64
	switch max {
	case rf: h = (gf - bf) / d; if gf < bf { h += 6 }
	case gf: h = (bf - rf) / d + 2
	case bf: h = (rf - gf) / d + 4
	}
	return int(math.Round(h / 6 * 360)), int(math.Round(s * 100)), int(math.Round(l * 100))
}

func main() {
	r, g, b := hexToRGB("#6366f1")
	fmt.Println(r, g, b)         // → 99 102 241
	fmt.Println(rgbToHSL(r, g, b)) // → 239 84 67
}
CSS
/* Modern CSS supports multiple color formats natively */

/* HEX notation */
.button { color: #6366f1; }

/* RGB functional notation */
.button { color: rgb(99 102 241); }

/* HSL — easier to adjust lightness and saturation */
.button { color: hsl(239 84% 67%); }

/* CSS Color Level 4: relative color syntax (Chrome 119+) */
.button-light { color: hsl(from #6366f1 h s calc(l + 20%)); }

/* color-mix() for tinting without manual conversion */
.button-muted { color: color-mix(in srgb, #6366f1 70%, white); }

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

HSL और HSV में क्या अंतर है?
दोनों रंग-छाया और संतृप्ति का उपयोग करते हैं, लेकिन वे चमक को अलग-अलग परिभाषित करते हैं। HSL में lightness का उपयोग होता है, जहाँ 50% शुद्ध रंग है, 0% काला है और 100% सफ़ेद है। HSV में value (या brightness) का उपयोग होता है, जहाँ 100% शुद्ध रंग है और 0% काला है। HSV में सफ़ेद का कोई सीधा अंतिम बिंदु नहीं है। व्यवहार में, HSL का उपयोग CSS और वेब विकास में होता है, जबकि HSV वह मॉडल है जो Photoshop और Figma जैसे डिज़ाइन सॉफ़्टवेयर के अधिकांश रंग पिकर में उपयोग होता है।
JavaScript में HEX को RGB में कैसे बदलें?
parseInt(hex, 16) से hex स्ट्रिंग को पूर्णांक में बदलें, फिर बिट शिफ्टिंग से प्रत्येक चैनल निकालें: लाल के लिए (n >> 16) & 255, हरे के लिए (n >> 8) & 255, और नीले के लिए n & 255। यह किसी भी 6-अंकीय hex स्ट्रिंग को # चिह्न के साथ या उसके बिना संभालता है। #F0F जैसे 3-अंकीय संक्षिप्त रूप के लिए, पार्स करने से पहले प्रत्येक अंक को पहले विस्तृत करें (FF00FF)।
क्या मैं CSS में HSL सीधे उपयोग कर सकता हूँ?
हाँ। सभी आधुनिक ब्राउज़र CSS में hsl() और hsla() का समर्थन करते हैं। CSS Color Level 4 के अनुसार, सिंटैक्स है hsl(239 84% 67%) जिसमें स्थान-पृथक मान हैं (अल्पविराम अभी भी स्वीकार्य हैं)। आप अल्फ़ा को चौथे पैरामीटर के रूप में भी जोड़ सकते हैं: hsl(239 84% 67% / 0.5)। Safari, Chrome, Firefox और Edge सभी इस सिंटैक्स का समर्थन करते हैं।
क्या रंग रूपांतरण में डेटा हानि होती है?
गणितीय रूप से, नहीं। HEX, RGB, HSL और HSV सभी एक ही sRGB रंग स्थान का वर्णन करते हैं और रूपांतरण उत्क्रमणीय हैं। व्यवहार में, छोटे गोलाई अंतर प्रकट हो सकते हैं क्योंकि HEX प्रति चैनल 256 चरणों तक सीमित है और HSL प्रतिशत सामान्यतः पूर्णांकों में गोल होते हैं। बार-बार आगे-पीछे रूपांतरण करने से 1-2 इकाइयों की गोलाई त्रुटियाँ जमा हो सकती हैं।
8-अंकीय HEX प्रारूप क्या है?
8-अंकीय HEX प्रारूप मानक 6-अंकीय HEX रंग में दो अल्फ़ा (पारदर्शिता) अंक जोड़ता है। उदाहरण के लिए, #6366F180 का अर्थ है वही इंडिगो रंग 50% ओपेसिटी पर (0x80 = 128, लगभग 255 का 50%)। CSS सभी आधुनिक ब्राउज़र में इस अंकन का समर्थन करता है। संक्षिप्त रूप 4 अंकों का होता है, जैसे #63F8।
मेरा रंग दूसरे मॉनिटर पर अलग क्यों दिखता है?
रंग का दिखना मॉनिटर के रंग प्रोफ़ाइल, चमक और गामा कैलिब्रेशन पर निर्भर करता है। दो स्क्रीन एक ही sRGB मान (#6366F1) को अलग-अलग प्रदर्शित कर सकती हैं यदि उनके रंग प्रोफ़ाइल भिन्न हों। रंग रूपांतरण उपकरण एक परिभाषित रंग स्थान (सामान्यतः sRGB) में कार्य करते हैं और गणितीय रूप से सही आउटपुट उत्पन्न करते हैं। अनुभवजन्य अंतर प्रदर्शन कैलिब्रेशन की समस्या है, रूपांतरण की त्रुटि नहीं।
किसी रंग का हल्का या गहरा शेड कैसे चुनें?
रंग को HSL में बदलें और L (lightness) चैनल समायोजित करें। L को 100% की ओर बढ़ाने से हल्के टिंट बनते हैं; इसे 0% की ओर घटाने से गहरे शेड बनते हैं। रंग-छाया और संतृप्ति समान रहती हैं। CSS में आप यह सीधे कर सकते हैं: hsl(239 84% 80%) hsl(239 84% 67%) का हल्का संस्करण है। आधुनिक CSS में color-mix(in srgb, #6366F1, white 30%) भी यही प्रभाव देता है बिना हाथ से रूपांतरण किए।