রঙ প্যালেট জেনারেটর
যেকোনো বেস রঙ থেকে পরিপূরক, সাদৃশ্যপূর্ণ, ত্রিপদ ও চতুর্পদ রঙ প্যালেট তৈরি করুন
বেস রঙ
রঙ স্কিম
তৈরি হওয়া প্যালেট
রঙ প্যালেট কী?
রঙ প্যালেট হলো একটি নির্দিষ্ট সংখ্যক রঙের সমষ্টি যা একটি ডিজাইনে একসাথে কাজ করার জন্য বেছে নেওয়া হয়। যখন আপনি কোনো ব্র্যান্ড, ওয়েবসাইট বা চিত্রণের জন্য একটি একক বেস রঙ বেছে নেন, তখন আপনার এমন সহচর রঙ দরকার হয় যা তার পাশে মানানসই। রঙ প্যালেট তৈরির প্রক্রিয়া রঙ তত্ত্বের নিয়ম প্রয়োগ করে সেই পছন্দ স্বয়ংক্রিয় করে — বিশেষত স্ট্যান্ডার্ড HSL কালার হুইলের জ্যামিতিক সম্পর্কের ভিত্তিতে।
HSL (Hue, Saturation, Lightness) কালার হুইল ৩৬০ ডিগ্রির একটি বৃত্তে রঙগুলোকে সাজায়। লাল ০ ডিগ্রিতে, সবুজ ১২০ ডিগ্রিতে এবং নীল ২৪০ ডিগ্রিতে অবস্থিত। প্রতিটি রঙ সামঞ্জস্য স্কিম বেস রঙ থেকে নির্দিষ্ট কোণীয় দূরত্বে হিউ বেছে নেওয়ার মাধ্যমে কাজ করে। উদাহরণস্বরূপ, পরিপূরক জুটি ব্যবহার করে ১৮০ ডিগ্রি দূরে দুটি রঙ। সাদৃশ্যপূর্ণ সেট উভয় পাশে ৩০ ডিগ্রির মধ্যে রঙ বেছে নেয়। এই জ্যামিতিক নিয়মগুলো সুষম সমন্বয় তৈরি করে কারণ বেছে নেওয়া হিউগুলো একটি অঞ্চলে জড়ো না হয়ে হুইলের চারদিকে ছড়িয়ে পড়ে।
এই টুলটি যেকোনো hex রঙ ইনপুট হিসেবে নেয়, সেটিকে HSL-এ রূপান্তরিত করে, নির্বাচিত স্কিম দ্বারা নির্ধারিত কোণে হিউ ঘোরায় এবং ফলাফল আবার hex-এ রূপান্তরিত করে। এটি ছয়টি স্কিম সমর্থন করে: পরিপূরক, সাদৃশ্যপূর্ণ, ত্রিপদ, বিভক্ত-পরিপূরক, চতুর্পদ এবং একরঙা। প্রতিটি স্কিম ২ থেকে ৫টি পর্যন্ত আলাদা সংখ্যক আউটপুট রঙ তৈরি করে।
কেন এই রঙ প্যালেট জেনারেটর ব্যবহার করবেন?
পরীক্ষা-নিরীক্ষার মাধ্যমে একসাথে কাজ করা রঙ বেছে নেওয়া ধীর ও অনির্ভরযোগ্য। একটি প্যালেট জেনারেটর তাৎক্ষণিকভাবে রঙ তত্ত্বের নিয়ম প্রয়োগ করে, যেকোনো শুরুর বিন্দু থেকে গাণিতিকভাবে সুষম ফলাফল দেয়।
রঙ প্যালেট জেনারেটরের ব্যবহারের ক্ষেত্র
রঙ সামঞ্জস্য স্কিমের তুলনা
প্রতিটি সামঞ্জস্য স্কিম HSL হুইলে বেস রঙ থেকে হিউ ঘূর্ণনের কোণের ভিত্তিতে রঙ বেছে নেয়। নিচের টেবিলে প্রতিটি স্কিম, এটি যত সংখ্যক রঙ তৈরি করে, ঘূর্ণনের কোণ এবং যে ডিজাইন প্রসঙ্গে এটি সবচেয়ে ভালো কাজ করে তা তালিকাভুক্ত করা হয়েছে।
| স্কিম | রঙের সংখ্যা | হিউ কোণ | সবচেয়ে উপযুক্ত |
|---|---|---|---|
| Complementary | 2 | 180 | High contrast, call-to-action buttons |
| Analogous | 3 | -30, 0, +30 | Harmonious, low-tension backgrounds |
| Triadic | 3 | 0, 120, 240 | Balanced variety, dashboards |
| Split-Complementary | 3 | 0, 150, 210 | Softer contrast than complementary |
| Tetradic (Rectangle) | 4 | 0, 90, 180, 270 | Rich palettes, complex UIs |
| Monochromatic | 5 | Same hue, varied lightness | Subtle, single-brand pages |
HSL কালার হুইল ঘূর্ণন কীভাবে কাজ করে
এই টুলের সমস্ত প্যালেট তৈরি HSL কালার মডেলের উপর নির্ভর করে। এর তিনটি অক্ষ বোঝা আপনাকে অনুমান করতে সাহায্য করবে যে প্রতিটি স্কিমের অধীনে একটি বেস রঙ কীভাবে রূপান্তরিত হবে।
কোড উদাহরণ
HSL রূপান্তর ও হিউ ঘূর্ণন ব্যবহার করে প্রোগ্রামগতভাবে রঙ প্যালেট তৈরি করুন।
// 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"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']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
}