ToolDeck

রঙ রূপান্তরকারী

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 ডিগ্রি), এবং saturation ও lightness বা brightness হলো শতাংশ। এটি HSL এবং HSV-কে একই hue-এর হালকা বা গাঢ় শেড তৈরির মতো কাজের জন্য আরো সহজবোধ্য করে তোলে।

এই ফরম্যাটগুলোর মধ্যে রূপান্তরের জন্য সুনির্দিষ্ট গণিত প্রয়োজন। 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 কনফিগে যোগ করুন।
ব্যাকএন্ড 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 পছন্দ করা হয় কারণ lightness এবং saturation সামঞ্জস্য করা সহজ। 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 আপনাকে hue বলে না। alpha স্বচ্ছতার জন্য ঐচ্ছিক 8-সংখ্যার রূপ (#6366F180) সমর্থন করে।
RGB
লাল, সবুজ এবং নীল চ্যানেলের জন্য 0 থেকে 255 পর্যন্ত তিনটি পূর্ণসংখ্যা। Canvas 2D, WebGL এবং বেশিরভাগ ছবি প্রক্রিয়াকরণ লাইব্রেরির জন্য স্থানীয় ফরম্যাট। চ্যানেল-অনুযায়ী পরিচালনা করা সহজ, তবে অনুভূত উজ্জ্বলতা সামঞ্জস্য করতে তিনটি মান একসাথে পরিবর্তন করতে হয়।
HSL
Hue (0-360 ডিগ্রি), saturation (0-100%) এবং lightness (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-এর মধ্যে পার্থক্য কী?
উভয়ই hue এবং saturation ব্যবহার করে, তবে তারা উজ্জ্বলতা ভিন্নভাবে সংজ্ঞায়িত করে। 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%) স্পেস-পৃথক মান সহ (কমাও এখনো গ্রহণযোগ্য)। চতুর্থ প্যারামিটার হিসেবে alpha যোগ করা যায়: 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 রঙে দুটি alpha (স্বচ্ছতা) সংখ্যা যোগ করে। উদাহরণস্বরূপ, #6366F180 মানে একই নীল রঙ 50% অপেসিটিতে (0x80 = 128, মোটামুটি 255-এর 50%)। CSS সমস্ত আধুনিক ব্রাউজারে এই স্বরলিপি সমর্থন করে। সংক্ষিপ্ত রূপ হলো 4 সংখ্যা, যেমন #63F8।
কেন আমার রঙ অন্য মনিটরে ভিন্ন দেখায়?
রঙের উপস্থিতি মনিটরের রঙ প্রোফাইল, উজ্জ্বলতা এবং গামা ক্যালিব্রেশনের উপর নির্ভর করে। দুটি স্ক্রিন একই sRGB মান (#6366F1) ভিন্নভাবে প্রদর্শন করতে পারে যদি তাদের রঙ প্রোফাইল আলাদা হয়। রঙ রূপান্তর সরঞ্জাম একটি নির্দিষ্ট রঙ স্থানে (সাধারণত sRGB) কাজ করে এবং গাণিতিকভাবে সঠিক আউটপুট তৈরি করে। অনুভূত পার্থক্য হলো ডিসপ্লে ক্যালিব্রেশনের সমস্যা, রূপান্তর ত্রুটি নয়।
কোনো রঙের হালকা বা গাঢ় শেড কীভাবে বাছাই করব?
রঙটিকে HSL-এ রূপান্তর করুন এবং L (lightness) চ্যানেল সামঞ্জস্য করুন। L বাড়িয়ে 100%-এর দিকে নিলে হালকা রঙ তৈরি হয়; 0%-এর দিকে কমালে গাঢ় শেড তৈরি হয়। hue এবং saturation একই থাকে। CSS-এ আপনি সরাসরি এটি করতে পারেন: hsl(239 84% 80%) হলো hsl(239 84% 67%)-এর একটি হালকা সংস্করণ। আধুনিক CSS color-mix(in srgb, #6366F1, white 30%) ব্যবহার করেও ম্যানুয়াল রূপান্তর ছাড়াই একই ফলাফল পাওয়া যায়।