রঙ রূপান্তরকারী
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 ডিগ্রি), এবং saturation ও lightness বা brightness হলো শতাংশ। এটি HSL এবং HSV-কে একই hue-এর হালকা বা গাঢ় শেড তৈরির মতো কাজের জন্য আরো সহজবোধ্য করে তোলে।
এই ফরম্যাটগুলোর মধ্যে রূপান্তরের জন্য সুনির্দিষ্ট গণিত প্রয়োজন। W3C CSS Color Module Level 4 স্পেসিফিকেশন সেই অ্যালগরিদম নথিভুক্ত করে যা ব্রাউজারগুলো যেকোনো CSS রঙকে একটি sRGB ত্রিকে পরিণত করতে ব্যবহার করে। সূত্রগুলো ডিটার্মিনিস্টিক: একটি নির্দিষ্ট ইনপুট সর্বদা একই আউটপুট তৈরি করে, তাই মানগুলো রাউন্ড বা ক্লাম্প না করা পর্যন্ত রূপান্তর লসলেস। বেশিরভাগ রঙ পিকার এবং ডিজাইন সরঞ্জাম অভ্যন্তরীণভাবে এই একই সূত্র ব্যবহার করে।
কেন এই Color Converter ব্যবহার করবেন?
ডিজাইন সরঞ্জামগুলো এক ফরম্যাটে রঙ রপ্তানি করে, আপনার CSS অন্যটি চায়, এবং আপনি যে API কল করছেন সেটি তৃতীয় একটি প্রত্যাশা করে। রূপান্তর কোড লেখা বা সঠিক সূত্র খোঁজার পরিবর্তে, একটি মান পেস্ট করুন এবং একসাথে সব ফরম্যাট পান।
Color Converter ব্যবহারের ক্ষেত্র
রঙ ফরম্যাট রেফারেন্স
নিচের টেবিলে পাঁচটি সবচেয়ে সাধারণ রঙ ফরম্যাট তালিকাভুক্ত করা হয়েছে, প্রতিটি ফরম্যাটে একই নীল রঙ (#6366F1) দেখানো হয়েছে। HEX এবং RGB হলো CSS এবং JavaScript-এ সবচেয়ে বেশি সমর্থিত। থিমিংয়ের জন্য HSL পছন্দ করা হয় কারণ lightness এবং saturation সামঞ্জস্য করা সহজ। 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); }