ToolDeck

রঙ প্যালেট জেনারেটর

যেকোনো বেস রঙ থেকে পরিপূরক, সাদৃশ্যপূর্ণ, ত্রিপদ ও চতুর্পদ রঙ প্যালেট তৈরি করুন

একটি উদাহরণ চেষ্টা করুন

বেস রঙ

রঙ স্কিম

তৈরি হওয়া প্যালেট

রঙ প্যালেট কী?

রঙ প্যালেট হলো একটি নির্দিষ্ট সংখ্যক রঙের সমষ্টি যা একটি ডিজাইনে একসাথে কাজ করার জন্য বেছে নেওয়া হয়। যখন আপনি কোনো ব্র্যান্ড, ওয়েবসাইট বা চিত্রণের জন্য একটি একক বেস রঙ বেছে নেন, তখন আপনার এমন সহচর রঙ দরকার হয় যা তার পাশে মানানসই। রঙ প্যালেট তৈরির প্রক্রিয়া রঙ তত্ত্বের নিয়ম প্রয়োগ করে সেই পছন্দ স্বয়ংক্রিয় করে — বিশেষত স্ট্যান্ডার্ড HSL কালার হুইলের জ্যামিতিক সম্পর্কের ভিত্তিতে।

HSL (Hue, Saturation, Lightness) কালার হুইল ৩৬০ ডিগ্রির একটি বৃত্তে রঙগুলোকে সাজায়। লাল ০ ডিগ্রিতে, সবুজ ১২০ ডিগ্রিতে এবং নীল ২৪০ ডিগ্রিতে অবস্থিত। প্রতিটি রঙ সামঞ্জস্য স্কিম বেস রঙ থেকে নির্দিষ্ট কোণীয় দূরত্বে হিউ বেছে নেওয়ার মাধ্যমে কাজ করে। উদাহরণস্বরূপ, পরিপূরক জুটি ব্যবহার করে ১৮০ ডিগ্রি দূরে দুটি রঙ। সাদৃশ্যপূর্ণ সেট উভয় পাশে ৩০ ডিগ্রির মধ্যে রঙ বেছে নেয়। এই জ্যামিতিক নিয়মগুলো সুষম সমন্বয় তৈরি করে কারণ বেছে নেওয়া হিউগুলো একটি অঞ্চলে জড়ো না হয়ে হুইলের চারদিকে ছড়িয়ে পড়ে।

এই টুলটি যেকোনো hex রঙ ইনপুট হিসেবে নেয়, সেটিকে HSL-এ রূপান্তরিত করে, নির্বাচিত স্কিম দ্বারা নির্ধারিত কোণে হিউ ঘোরায় এবং ফলাফল আবার hex-এ রূপান্তরিত করে। এটি ছয়টি স্কিম সমর্থন করে: পরিপূরক, সাদৃশ্যপূর্ণ, ত্রিপদ, বিভক্ত-পরিপূরক, চতুর্পদ এবং একরঙা। প্রতিটি স্কিম ২ থেকে ৫টি পর্যন্ত আলাদা সংখ্যক আউটপুট রঙ তৈরি করে।

কেন এই রঙ প্যালেট জেনারেটর ব্যবহার করবেন?

পরীক্ষা-নিরীক্ষার মাধ্যমে একসাথে কাজ করা রঙ বেছে নেওয়া ধীর ও অনির্ভরযোগ্য। একটি প্যালেট জেনারেটর তাৎক্ষণিকভাবে রঙ তত্ত্বের নিয়ম প্রয়োগ করে, যেকোনো শুরুর বিন্দু থেকে গাণিতিকভাবে সুষম ফলাফল দেয়।

তাৎক্ষণিক প্যালেট তৈরি
একটি বেস রঙ এবং স্কিমের ধরন বেছে নিন, এবং প্যালেট সঙ্গে সঙ্গে দেখা যাবে। কোনো ফর্ম সাবমিট নেই, কোনো লোডিং স্ক্রিন নেই। বেস রঙ পরিবর্তন করলে আউটপুট রিয়েল টাইমে আপডেট হয়।
🎨
ছয়টি সামঞ্জস্য স্কিম
পরিপূরক, সাদৃশ্যপূর্ণ, ত্রিপদ, বিভক্ত-পরিপূরক, চতুর্পদ বা একরঙা থেকে বেছে নিন। প্রতিটি স্কিম উচ্চ-কনট্রাস্ট জুটি থেকে সূক্ষ্ম একক-হিউ গ্র্যাডিয়েন্ট পর্যন্ত ভিন্ন দৃশ্যগত প্রভাব তৈরি করে।
🔒
গোপনীয়তা সুরক্ষিত
সব রঙের গণনা আপনার ব্রাউজারে চলে। কোনো রঙের তথ্য কোনো সার্ভারে পাঠানো হয় না। পেজ একবার লোড হলে টুলটি অফলাইনেও কাজ করে।
📋
এক-ক্লিক এক্সপোর্ট
এক ক্লিকে পৃথক hex কোড বা পুরো প্যালেট কপি করুন। সরাসরি CSS, Figma, Tailwind কনফিগ, বা hex মান গ্রহণ করে এমন যেকোনো ডিজাইন টুলে পেস্ট করুন।

রঙ প্যালেট জেনারেটরের ব্যবহারের ক্ষেত্র

UI থিম তৈরি
নতুন অ্যাপ তৈরি করা ফ্রন্টএন্ড ডেভেলপাররা একটি ব্র্যান্ড রঙ দিয়ে শুরু করতে পারেন এবং প্রাইমারি, সেকেন্ডারি ও অ্যাকসেন্ট টোকেনের জন্য সম্পূর্ণ প্যালেট তৈরি করতে পারেন। ত্রিপদ বা চতুর্পদ স্কিম বাটন, লিঙ্ক, অ্যালার্ট ও ব্যাকগ্রাউন্ডের জন্য যথেষ্ট বৈচিত্র্য তৈরি করে।
ডিজাইন সিস্টেম রঙ টোকেন
ডিজাইন সিস্টেম ইঞ্জিনিয়াররা একটি একক ব্র্যান্ড হিউয়ের জন্য লাইটনেস স্কেল তৈরি করতে একরঙা প্যালেট ব্যবহার করেন, তারপর প্রতিটি ধাপকে একটি নামযুক্ত টোকেনে (যেমন blue-100 থেকে blue-900) ম্যাপ করেন।
ডেটা ভিজুয়ালাইজেশন
ডেটা ইঞ্জিনিয়ার ও বিশ্লেষকদের চার্ট সিরিজের জন্য আলাদা রঙ দরকার হয় যা পরস্পরের সাথে সাংঘর্ষিক নয়। সাদৃশ্যপূর্ণ বা ত্রিপদ প্যালেট ৩-৬টি সিরিজের জন্য যথেষ্ট পার্থক্য দেয়, একই সাথে চার্টটি দৃশ্যগতভাবে সুসংগত রাখে।
মার্কেটিং ল্যান্ডিং পেজ
ক্যাম্পেইন পেজ তৈরি করা ডিজাইনাররা ব্র্যান্ডের প্রাইমারি রঙ থেকে শুরু করেন এবং লোগোর সাথে সাংঘর্ষিক না হয়ে CTA বাটন ও হাইলাইটেড সেকশনের জন্য অ্যাকসেন্ট রঙ খুঁজে পেতে বিভক্ত-পরিপূরক স্কিম ব্যবহার করেন।
অ্যাক্সেসিবিলিটি জুটি
WCAG সম্মতি পরীক্ষা করা QA ইঞ্জিনিয়াররা তৈরি হওয়া প্যালেটের রঙ জুড়ে দেন এবং কনট্রাস্ট চেকারে পরীক্ষা করেন। পরিপূরক বা বিভক্ত-পরিপূরক স্কিম থেকে শুরু করলে প্রায়ই উচ্চ লুমিন্যান্স কনট্রাস্টের জুটি পাওয়া যায়।
রঙ তত্ত্ব শেখা
ডিজাইন অধ্যয়নরত শিক্ষার্থীরা একই বেস রঙে সবগুলো ছয় স্কিমের মধ্যে টগল করতে পারেন এবং দেখতে পারেন প্রতিটি জ্যামিতি কীভাবে হুইলের চারদিকে হিউ বিতরণ করে। দৃশ্যগত আউটপুট বিমূর্ত কোণগুলোকে বাস্তব করে তোলে।

রঙ সামঞ্জস্য স্কিমের তুলনা

প্রতিটি সামঞ্জস্য স্কিম HSL হুইলে বেস রঙ থেকে হিউ ঘূর্ণনের কোণের ভিত্তিতে রঙ বেছে নেয়। নিচের টেবিলে প্রতিটি স্কিম, এটি যত সংখ্যক রঙ তৈরি করে, ঘূর্ণনের কোণ এবং যে ডিজাইন প্রসঙ্গে এটি সবচেয়ে ভালো কাজ করে তা তালিকাভুক্ত করা হয়েছে।

স্কিমরঙের সংখ্যাহিউ কোণসবচেয়ে উপযুক্ত
Complementary2180High contrast, call-to-action buttons
Analogous3-30, 0, +30Harmonious, low-tension backgrounds
Triadic30, 120, 240Balanced variety, dashboards
Split-Complementary30, 150, 210Softer contrast than complementary
Tetradic (Rectangle)40, 90, 180, 270Rich palettes, complex UIs
Monochromatic5Same hue, varied lightnessSubtle, single-brand pages

HSL কালার হুইল ঘূর্ণন কীভাবে কাজ করে

এই টুলের সমস্ত প্যালেট তৈরি HSL কালার মডেলের উপর নির্ভর করে। এর তিনটি অক্ষ বোঝা আপনাকে অনুমান করতে সাহায্য করবে যে প্রতিটি স্কিমের অধীনে একটি বেস রঙ কীভাবে রূপান্তরিত হবে।

Hue (০-৩৬০)
ডিগ্রিতে কালার হুইলের অবস্থান। ০ হলো লাল, ৬০ হলো হলুদ, ১২০ হলো সবুজ, ১৮০ হলো সায়ান, ২৪০ হলো নীল, ৩০০ হলো ম্যাজেন্টা। প্যালেট স্কিম স্যাচুরেশন ও লাইটনেস অপরিবর্তিত রেখে এই মানটি ঘোরায়।
Saturation (০-১০০%)
রঙটি কতটা তীব্র। ১০০% সম্পূর্ণ স্যাচুরেটেড; ০% ধূসরের একটি শেড। প্যালেট স্কিম বেস স্যাচুরেশন অক্ষুণ্ণ রাখে যাতে সব তৈরি রঙ একই তীব্রতা ভাগ করে নেয়।
Lightness (০-১০০%)
রঙটি কতটা উজ্জ্বল। ০% হলো কালো, ৫০% হলো বিশুদ্ধ হিউ, ১০০% হলো সাদা। একরঙা স্কিম টোনাল স্কেল তৈরি করতে লাইটনেস পরিবর্তন করে; অন্য সব স্কিম লাইটনেস স্থির রাখে।

কোড উদাহরণ

HSL রূপান্তর ও হিউ ঘূর্ণন ব্যবহার করে প্রোগ্রামগতভাবে রঙ প্যালেট তৈরি করুন।

JavaScript
// Generate a complementary color by rotating hue 180 degrees
function hexToHsl(hex) {
  let r = parseInt(hex.slice(1,3), 16) / 255;
  let g = parseInt(hex.slice(3,5), 16) / 255;
  let b = parseInt(hex.slice(5,7), 16) / 255;
  const max = Math.max(r,g,b), min = Math.min(r,g,b);
  let h = 0, s = 0, l = (max + min) / 2;
  if (max !== min) {
    const d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    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)];
}

function hslToHex(h, s, l) {
  s /= 100; l /= 100;
  const a = s * Math.min(l, 1 - l);
  const f = n => {
    const k = (n + h / 30) % 12;
    return Math.round(255 * (l - a * Math.max(-1, Math.min(k - 3, 9 - k, 1))));
  };
  return '#' + [f(0), f(8), f(4)].map(v => v.toString(16).padStart(2, '0')).join('');
}

const base = '#6366f1';
const [h, s, l] = hexToHsl(base);
const comp = hslToHex((h + 180) % 360, s, l);
console.log(comp); // → "#f1ee63"
Python
import colorsys

def hex_to_hsl(hex_color: str):
    r, g, b = (int(hex_color[i:i+2], 16) / 255 for i in (1, 3, 5))
    h, l, s = colorsys.rgb_to_hls(r, g, b)
    return round(h * 360), round(s * 100), round(l * 100)

def hsl_to_hex(h: int, s: int, l: int) -> str:
    r, g, b = colorsys.hls_to_rgb(h / 360, l / 100, s / 100)
    return '#{:02x}{:02x}{:02x}'.format(round(r * 255), round(g * 255), round(b * 255))

def complementary(hex_color: str) -> str:
    h, s, l = hex_to_hsl(hex_color)
    return hsl_to_hex((h + 180) % 360, s, l)

def triadic(hex_color: str) -> list[str]:
    h, s, l = hex_to_hsl(hex_color)
    return [hex_color, hsl_to_hex((h + 120) % 360, s, l), hsl_to_hex((h + 240) % 360, s, l)]

print(complementary('#6366f1'))  # → #f1ee63
print(triadic('#6366f1'))        # → ['#6366f1', '#66f163', '#f16366']
Go
package main

import (
	"fmt"
	"math"
)

func hexToHSL(hex string) (float64, float64, float64) {
	var r, g, b uint8
	fmt.Sscanf(hex, "#%02x%02x%02x", &r, &g, &b)
	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, 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 h * 60, s * 100, l * 100
}

func hslToHex(h, s, l float64) string {
	s /= 100; l /= 100
	a := s * math.Min(l, 1-l)
	f := func(n float64) uint8 {
		k := math.Mod(n+h/30, 12)
		return uint8(255 * (l - a*math.Max(-1, math.Min(math.Min(k-3, 9-k), 1))))
	}
	return fmt.Sprintf("#%02x%02x%02x", f(0), f(8), f(4))
}

func main() {
	h, s, l := hexToHSL("#6366f1")
	comp := hslToHex(math.Mod(h+180, 360), s, l)
	fmt.Println(comp) // → #f1ee63
}

প্রায়শই জিজ্ঞাসিত প্রশ্ন

পরিপূরক এবং বিভক্ত-পরিপূরকের মধ্যে পার্থক্য কী?
পরিপূরক কালার হুইলে ঠিক ১৮০ ডিগ্রি দূরে দুটি রঙ ব্যবহার করে, সর্বোচ্চ হিউ কনট্রাস্ট তৈরি করে। বিভক্ত-পরিপূরক সরাসরি বিপরীতকে বেস থেকে ১৫০ ও ২১০ ডিগ্রিতে দুটি রঙ দিয়ে প্রতিস্থাপন করে, কম দৃশ্যগত উত্তেজনায় শক্তিশালী কনট্রাস্ট দেয়। UI ডিজাইনে বিভক্ত-পরিপূরকের সাথে কাজ করা সহজ কারণ কোনো অ্যাকসেন্ট রঙই সরাসরি বেসের বিপরীতে নয়।
একটি UI প্যালেটে কতটি রঙ থাকা উচিত?
বেশিরভাগ ডিজাইন সিস্টেম ৩-৫টি মূল হিউ ব্যবহার করে: একটি প্রাইমারি, একটি সেকেন্ডারি, একটি নিউট্রাল এবং এক বা দুটি অ্যাকসেন্ট। প্রতিটি মূল হিউয়ের তারপর একটি লাইটনেস স্কেল থাকে (১০০ থেকে ৯০০)। মূল হিউগুলোর জন্য ত্রিপদ বা চতুর্পদ স্কিম দিয়ে শুরু করুন, তারপর প্রতিটির জন্য একরঙা স্কেল তৈরি করুন।
আমি কি এই প্যালেটগুলো Tailwind CSS-এর সাথে ব্যবহার করতে পারি?
হ্যাঁ। hex মানগুলো কপি করুন এবং আপনার tailwind.config.js বা tailwind.config.ts ফাইলের colors অবজেক্টে যোগ করুন। একরঙা স্কেলের জন্য, Tailwind-এর নামকরণ রীতির সাথে মিল রাখতে প্রতিটি শেডকে একটি সংখ্যাযুক্ত কীতে (৫০, ১০০, ২০০ ইত্যাদি) ম্যাপ করুন।
কিছু তৈরি রঙ কেন নিস্তেজ বা ঘোলাটে দেখায়?
যদি আপনার বেস রঙে কম স্যাচুরেশন বা চরম লাইটনেস থাকে (০% বা ১০০%-এর খুব কাছে), ঘোরানো হিউগুলোও মৃদু দেখাবে। জেনারেটর বেস রঙের স্যাচুরেশন ও লাইটনেস মান অক্ষুণ্ণ রাখে। উজ্জ্বল প্যালেটের জন্য ৫০%-এর বেশি স্যাচুরেশন এবং ৩০% থেকে ৭০%-এর মধ্যে লাইটনেস সহ একটি বেস বেছে নিন।
HSL এবং HSV/HSB-এর মধ্যে পার্থক্য কী?
HSL ও HSV উভয়ই হিউকে বৃত্তাকার অক্ষ হিসেবে ব্যবহার করে, কিন্তু উজ্জ্বলতাকে আলাদাভাবে সংজ্ঞায়িত করে। HSL-এ, লাইটনেস ৫০% হলো বিশুদ্ধ হিউ এবং ১০০% হলো সাদা। HSV (HSB নামেও পরিচিত)-এ, ভ্যালু ১০০% হলো বিশুদ্ধ হিউ এবং স্যাচুরেশন কমানো ছাড়া সাদায় পৌঁছানোর কোনো উপায় নেই। বেশিরভাগ প্যালেট জেনারেটর HSL ব্যবহার করে কারণ এর লাইটনেস অক্ষ আমরা কীভাবে রঙের উজ্জ্বলতা অনুভব করি তার সাথে আরও স্বজ্ঞাতভাবে সামঞ্জস্যপূর্ণ।
রঙ সামঞ্জস্য স্কিম অ্যাক্সেসিবিলিটির সাথে কীভাবে সম্পর্কিত?
রঙ সামঞ্জস্য এবং WCAG কনট্রাস্ট আলাদা বিষয়। পরিপূরক জুটিতে সর্বোচ্চ হিউ কনট্রাস্ট রয়েছে, কিন্তু এটি টেক্সটের পাঠযোগ্যতার জন্য পর্যাপ্ত লুমিন্যান্স কনট্রাস্টের নিশ্চয়তা দেয় না। প্যালেট তৈরির পরে, WCAG AA (সাধারণ টেক্সটের জন্য ৪.৫:১ অনুপাত)-এর বিপরীতে প্রতিটি ফোরগ্রাউন্ড/ব্যাকগ্রাউন্ড জুটি পরীক্ষা করুন। একই লাইটনেসের রঙ হিউ সম্পর্ক নির্বিশেষে ব্যর্থ হবে।
HSL কি CSS hsl() ফাংশনের মতো?
হ্যাঁ। CSS hsl() ফাংশন তিনটি আর্গুমেন্ট নেয়: ডিগ্রিতে হিউ (০-৩৬০), শতাংশ হিসেবে স্যাচুরেশন এবং শতাংশ হিসেবে লাইটনেস। CSS Color Level 4 স্ল্যাশ-বিভক্ত আলফা মানও গ্রহণ করে: hsl(240 60% 50% / 0.8)। এই জেনারেটর যে HSL মডেল ব্যবহার করে তা CSS স্পেসিফিকেশনের সাথে হুবহু মিলে, তাই আপনি সরাসরি আপনার স্টাইলশিটে হিউ, স্যাচুরেশন ও লাইটনেস মান পেস্ট করতে পারেন।