Color Converter
विजुअल कलर पिकर के साथ 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 को आप कॉल कर रहे हैं वह तीसरे की अपेक्षा करता है। रूपांतरण कोड लिखने या सही सूत्र खोजने के बजाय, एक मान पेस्ट करें और एक साथ सभी प्रारूप प्राप्त करें।
Color Converter के उपयोग के मामले
रंग प्रारूप संदर्भ
नीचे दी गई तालिका पाँच सबसे सामान्य रंग प्रारूप सूचीबद्ध करती है, जिसमें एक ही इंडिगो रंग (#6366F1) प्रत्येक अंकन में दिखाया गया है। HEX और RGB CSS और JavaScript में सबसे व्यापक रूप से समर्थित हैं। HSL थीमिंग के लिए पसंदीदा है क्योंकि चमक और संतृप्ति को सीधे समायोजित करना सरल है। HSV वह मॉडल है जिसका उपयोग अधिकांश ग्राफ़िक डिज़ाइन सॉफ़्टवेयर के रंग पिकर करते हैं।
| प्रारूप | उदाहरण (इंडिगो) | चैनल | सामान्य उपयोग |
|---|---|---|---|
| HEX | #6366F1 | 6 (or 3/8) | CSS, design tools, brand guides |
| RGB | rgb(99, 102, 241) | 3 (0–255 each) | CSS, Canvas API, image processing |
| HSL | hsl(239, 84%, 67%) | 3 (deg, %, %) | CSS, color theming, accessibility tuning |
| HSV | hsv(239, 59%, 95%) | 3 (deg, %, %) | Color pickers, Photoshop, Figma |
| CMYK | cmyk(59%, 58%, 0%, 5%) | 4 (0–100% each) | Print design, prepress workflows |
HEX बनाम RGB बनाम HSL
तीनों प्रारूप एक ही sRGB रंग स्थान का वर्णन करते हैं। अंतर यह है कि वे डेटा को किस प्रकार प्रस्तुत करते हैं, जो विभिन्न संदर्भों में पठनीयता और संचालन की सुविधा को प्रभावित करता है।
कोड उदाहरण
सामान्य भाषाओं और परिवेशों में HEX, RGB और HSL के बीच रंग रूपांतरण। प्रत्येक उदाहरण आसान तुलना के लिए एक ही इंडिगो रंग (#6366F1) का उपयोग करता है।
// 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]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%)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
}/* 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); }