CSS ১৪৮টি নামকৃত রঙ নির্ধারণ করে যেগুলো ব্রাউজার সংখ্যাসূচক কোডের পরিবর্তে কীওয়ার্ড দিয়ে চেনে। একটি স্টাইলশিটে #ff6347 লেখার বদলে Tomato লিখতে পারেন। #6a5acd-এর বদলে SlateBlue লিখতে পারেন। এই নামগুলো CSS Color Level 3 (2011) এবং Level 4 (2022)-এ মানকৃত হয়েছে, CSS 2.1-এর মূল ১৭টি রঙ এবং প্রাথমিক Unix উইন্ডো সিস্টেম থেকে উত্তরাধিকারসূত্রে পাওয়া ১৪০টি X11 রঙের নামের উপর ভিত্তি করে তৈরি।
একটি রঙ নাম অনুসন্ধানকারী যেকোনো hex বা RGB মান নিয়ে সেটির সবচেয়ে কাছের নামকৃত CSS রঙটি খুঁজে বের করে। মিলানোর অ্যালগরিদম RGB স্থানে দুটি রঙের মধ্যে দূরত্ব গণনা করে, সাধারণত ইউক্লিডীয় দূরত্ব: sqrt((r1-r2)^2 + (g1-g2)^2 + (b1-b2)^2)। আপনার ইনপুট থেকে সবচেয়ে কম দূরত্বের নামকৃত রঙটি জয়ী হয়। দূরত্ব শূন্য হলে আপনার ইনপুট সেই নামের সাথে হুবহু মিলে গেছে।
পাঠযোগ্য, self-documenting CSS লিখতে চাইলে এটি গুরুত্বপূর্ণ। background-color: Tomato-এর মতো একটি নিয়ম background-color: #ff6347-এর চেয়ে দ্রুত উদ্দেশ্য প্রকাশ করে। ডিজাইন পর্যালোচনা, অ্যাক্সেসিবিলিটি অডিট বা ডকুমেন্টেশনে মৌখিকভাবে কোনো রঙ উল্লেখ করতে হলেও এটি সহায়ক। 'ওই লালচে-কমলা রঙটা' বলার বদলে 'Tomato' বলা যায়।
কেন এই রঙ নাম অনুসন্ধানকারী ব্যবহার করবেন?
নিকটতম নামকৃত রঙ হাতে খোঁজার অর্থ হলো ১৪৮-এন্ট্রির রেফারেন্স টেবিল স্ক্রল করা এবং hex মানগুলো চোখে আন্দাজ করা। এই টুলটি আপনার হয়ে দূরত্ব গণনা করে এবং সঠিক hex কোড ও দূরত্ব স্কোরসহ শীর্ষ ৫টি নিকটতম মিল ফেরত দেয়।
🔍
নাম দিয়ে যেকোনো রঙ চিহ্নিত করুন
একটি ডিজাইন ফাইল, রঙ নির্বাচনকারী বা স্ক্রিনশট থেকে hex কোড পেস্ট করুন এবং তাৎক্ষণিকভাবে নিকটতম CSS নামকৃত রঙ পান। টুলটি দূরত্ব অনুযায়ী সাজানো ৫টি মিল ফেরত দেয় যাতে আপনি সেরাটি বেছে নিতে পারেন।
🔒
প্রাইভেসি-ফার্স্ট
সমস্ত রঙ মিলানো আপনার ব্রাউজারে চলে। কোনো রঙের মান কোনো সার্ভারে পাঠানো হয় না। পেজ একবার লোড হলে টুলটি অফলাইনেও কাজ করে।
⚡
তাৎক্ষণিক ফলাফল
প্রতিটি কী-স্ট্রোকে দূরত্ব গণনা চলে। hex ইনপুটে একটি অক্ষর পরিবর্তন করলে র্যাংক করা ফলাফল কোনো বিলম্ব ছাড়াই তাৎক্ষণিকভাবে আপডেট হয়।
📋
নাম ও Hex কোড কপি করুন
যেকোনো ফলাফলে ক্লিক করে রঙের নাম বা hex মান ক্লিপবোর্ডে কপি করুন। সরাসরি CSS, Sass ভেরিয়েবল, Tailwind কনফিগ বা ডিজাইন টুলে পেস্ট করুন।
রঙ নাম অনুসন্ধানকারীর ব্যবহারের ক্ষেত্র
পাঠযোগ্য CSS রচনা
hex লিটেরালের জায়গায় নামকৃত রঙ ব্যবহারকারী ফ্রন্টেন্ড ডেভেলপাররা এমন স্টাইলশিট পান যা কোড রিভিউয়ের সময় স্ক্যান করা সহজ। নামকৃত রঙ কোনো রঙ প্রিভিউ এক্সটেনশন ছাড়াই উদ্দেশ্য প্রকাশ করে।
API রেসপন্সে লেবেল যোগ
রঙ-সম্পর্কিত API তৈরি করা ব্যাকেন্ড ইঞ্জিনিয়াররা hex কোডের পাশাপাশি মানব-পাঠযোগ্য লেবেল ফেরত দিতে পারেন। নিকটতম CSS রঙের নাম খোঁজা ব্যবহারকারীদের জন্য কাস্টম নাম অভিধান না রেখেও একটি পরিচিত রেফারেন্স পয়েন্ট দেয়।
অ্যাক্সেসিবিলিটি ডকুমেন্টেশন
রঙ কনট্রাস্ট সমস্যা নথিভুক্ত করা QA ইঞ্জিনিয়াররা বাগ রিপোর্টে নাম দিয়ে রঙ উল্লেখ করতে পারেন। 'DarkSlateGray ব্যাকগ্রাউন্ডে Crimson টেক্সট AA কনট্রাস্টে ব্যর্থ হয়' লেখা hex জুটি উদ্ধৃত করার চেয়ে স্পষ্ট।
ডেটা ভিজ্যুয়ালাইজেশন লেজেন্ড
নামকৃত রঙ দিয়ে চার্ট সিরিজ লেবেল করা ডেটা ইঞ্জিনিয়াররা এমন লেজেন্ড তৈরি করেন যা রঙের নমুনা ছাড়াও পাঠযোগ্য। মুদ্রিত বা একরঙা প্রেক্ষাপটে '#6495ed'-এর চেয়ে 'CornflowerBlue' নামটি বেশি উপযোগী।
ডিজাইন হ্যান্ডঅফ
একজন ডিজাইনার Figma বা Sketch থেকে hex মান হিসেবে রঙ শেয়ার করলে, একজন ডেভেলপার নিকটতম CSS নামটি খুঁজে বের করতে পারেন এবং Slack বা pull request মন্তব্যে নাম ধরে আলোচনা করতে পারেন।
CSS রঙ শেখা
CSS অন্বেষণ করা শিক্ষার্থীরা যেকোনো hex মান টাইপ করে আবিষ্কার করতে পারেন কোন নামকৃত রঙগুলো কাছাকাছি রয়েছে। দূরত্বের ফলাফল দেখে ১৪৮টি অন্তর্নির্মিত রঙ কীওয়ার্ড সম্পর্কে পরিচিতি তৈরি হয়।
গ্রুপ অনুযায়ী CSS নামকৃত রঙের তালিকা
CSS Color Level 4 স্পেসিফিকেশন ১৪৮টি নামকৃত রঙ কীওয়ার্ড নির্ধারণ করে। নিচের টেবিলটি সেগুলো রঙের গ্রুপ অনুযায়ী সাজিয়েছে, প্রতিটি গ্রুপের সংখ্যা ও প্রথম কয়েকটি নামসহ। এখানে তালিকাভুক্ত প্রতিটি নাম সমস্ত আধুনিক ব্রাউজারে কার্যকর একটি বৈধ CSS রঙ কীওয়ার্ড।
রঙের গ্রুপ
সংখ্যা
উদাহরণ নাম
Red / Pink
14
IndianRed, LightCoral, Salmon, DarkSalmon, Crimson, Red, +8 more
Orange
5
Coral, Tomato, OrangeRed, DarkOrange, Orange
Yellow
10
Gold, Yellow, LightYellow, LemonChiffon, PapayaWhip, Moccasin, +4 more
Green
19
GreenYellow, Chartreuse, LawnGreen, Lime, LimeGreen, SpringGreen, +13 more
Blue / Cyan
24
Aqua, Cyan, LightCyan, PaleTurquoise, Aquamarine, Turquoise, +18 more
Purple
19
Lavender, Thistle, Plum, Violet, Orchid, Fuchsia, +13 more
Brown
17
Cornsilk, BlanchedAlmond, Bisque, NavajoWhite, Wheat, BurlyWood, +11 more
Gray / White
27
White, Snow, HoneyDew, MintCream, Azure, AliceBlue, +21 more
রঙের দূরত্ব: ইউক্লিডীয় RGB বনাম অনুভূতিগত
রঙের দূরত্ব পরিমাপের পদ্ধতি নির্ধারণ করে কোন নামকৃত রঙটি নিকটতম মিল হিসেবে প্রতিবেদন করা হবে। দুটি পদ্ধতি আছে এবং একই ইনপুটের জন্য সেগুলো ভিন্ন ফলাফল দিতে পারে।
ইউক্লিডীয় RGB দূরত্ব
R, G, B-কে ত্রিমাত্রিক স্থানের অক্ষ হিসেবে বিবেচনা করে সরলরেখার দূরত্ব গণনা করে: sqrt((r1-r2)^2 + (g1-g2)^2 + (b1-b2)^2)। সরল, দ্রুত এবং এই টুলে ব্যবহৃত। বেশিরভাগ ব্যবহারিক ক্ষেত্রে ভালো কাজ করে, তবে নির্দিষ্ট সবুজ-থেকে-নীল পরিবর্তনের ক্ষেত্রে মানুষের অনুভূতির সাথে অমিল হতে পারে, কারণ মানুষের চোখ নীলের চেয়ে সবুজের প্রতি বেশি সংবেদনশীল।
CIEDE2000 (Delta E)
আন্তর্জাতিক আলোকবিদ্যা কমিশন (CIE) কর্তৃক নির্ধারিত একটি অনুভূতিগত দূরত্বের সূত্র। এটি প্রথমে রঙগুলো CIELAB রঙ স্থানে রূপান্তরিত করে, তারপর মানুষের অনুভূতির সাথে মেলাতে উজ্জ্বলতা, ক্রোমা এবং হিউ-এর জন্য সংশোধন প্রয়োগ করে। প্রান্তিক ক্ষেত্রে আরও নির্ভুল, কিন্তু গণনায় উল্লেখযোগ্যভাবে জটিল। শিল্প রঙ মিলানোর জন্য প্রয়োজনীয়; নিকটতম CSS কীওয়ার্ড খোঁজার জন্য অতিরিক্ত।
কোডের উদাহরণ
RGB স্থানে ইউক্লিডীয় দূরত্ব ব্যবহার করে প্রোগ্রাম দিয়ে নিকটতম CSS নামকৃত রঙ খুঁজুন। প্রতিটি উদাহরণ একটি hex স্ট্রিং নিয়ে CSS স্পেসিফিকেশন থেকে নিকটতম রঙের নাম ফেরত দেয়।
JavaScript
// Euclidean distance in RGB space
function nearestCssColor(hex) {
const r = parseInt(hex.slice(1, 3), 16)
const g = parseInt(hex.slice(3, 5), 16)
const b = parseInt(hex.slice(5, 7), 16)
let bestName = ''
let bestDist = Infinity
for (const [name, value] of Object.entries(cssColors)) {
const r2 = parseInt(value.slice(1, 3), 16)
const g2 = parseInt(value.slice(3, 5), 16)
const b2 = parseInt(value.slice(5, 7), 16)
const dist = Math.sqrt((r - r2) ** 2 + (g - g2) ** 2 + (b - b2) ** 2)
if (dist < bestDist) { bestDist = dist; bestName = name }
}
return bestName
}
nearestCssColor('#6366f1') // → "SlateBlue"
nearestCssColor('#1e293b') // → "DarkSlateGray"
package main
import (
"fmt"
"math"
"strconv"
)
type CSSColor struct {
Name string
R, G, B int
}
var colors = []CSSColor{
{"Crimson", 220, 20, 60},
{"SlateBlue", 106, 90, 205},
{"Tomato", 255, 99, 71},
// ... full list
}
func hexToRGB(hex string) (int, int, int) {
r, _ := strconv.ParseInt(hex[1:3], 16, 64)
g, _ := strconv.ParseInt(hex[3:5], 16, 64)
b, _ := strconv.ParseInt(hex[5:7], 16, 64)
return int(r), int(g), int(b)
}
func nearest(hex string) string {
r, g, b := hexToRGB(hex)
best := ""
bestDist := math.MaxFloat64
for _, c := range colors {
d := math.Sqrt(float64((r-c.R)*(r-c.R) + (g-c.G)*(g-c.G) + (b-c.B)*(b-c.B)))
if d < bestDist {
bestDist = d
best = c.Name
}
}
return best
}
func main() {
fmt.Println(nearest("#6366f1")) // → SlateBlue
}
সচরাচর জিজ্ঞাসা
CSS কতটি নামকৃত রঙ সমর্থন করে?
CSS Color Level 4 ১৪৮টি নামকৃত রঙ কীওয়ার্ড নির্ধারণ করে। এর মধ্যে রয়েছে মূল ১৭টি CSS 2.1 রঙ (যেমন black, white, red, blue), CSS 3-এ যুক্ত ১৪০টি X11 রঙের নাম, এবং CSS 4-এ CSS লেখক Eric Meyer-এর কন্যার স্মরণে যুক্ত RebeccaPurple কীওয়ার্ড। সব ১৪৮টি নাম case-insensitive এবং প্রতিটি আধুনিক ব্রাউজারে কাজ করে।
রঙ নাম অনুসন্ধানকারী এবং রঙ কনভার্টারের মধ্যে পার্থক্য কী?
একটি রঙ কনভার্টার রঙকে একটি ফরম্যাট থেকে অন্যটিতে রূপান্তরিত করে: hex থেকে RGB, HSL থেকে hex, RGB থেকে CMYK। একটি রঙ নাম অনুসন্ধানকারী ভিন্ন কাজ করে। এটি ১৪৮টি CSS নামকৃত রঙ খোঁজে এবং আপনার ইনপুট থেকে সবচেয়ে কম দূরত্বের রঙটি ফেরত দেয়। আউটপুট হলো একটি কীওয়ার্ড (যেমন Tomato বা SlateBlue), কোনো সংখ্যাসূচক উপস্থাপনা নয়।
রঙ মিলানোর জন্য ইউক্লিডীয় RGB দূরত্ব কতটা নির্ভুল?
ইউক্লিডীয় RGB দূরত্ব বেশিরভাগ রঙ অনুসন্ধানে সঠিক ফলাফল দেয়। সবুজ-নীল পরিসরে অপ্রত্যাশিত মিল তৈরি হতে পারে কারণ মানুষের চোখ নীলের চেয়ে সবুজ বেশি তীব্রভাবে অনুভব করে, কিন্তু RGB মডেল তিনটি চ্যানেলকে সমানভাবে বিবেচনা করে। নিকটতম CSS কীওয়ার্ড খোঁজার মতো ওয়েব ডেভেলপমেন্টের কাজে এই পার্থক্য ব্যবহারিকভাবে খুব কমই গুরুত্বপূর্ণ হয়।
JavaScript-এ কি CSS রঙের নাম ব্যবহার করা যায়?
হ্যাঁ। CSS.supports() API, canvas 2D কনটেক্সট এবং SVG fill/stroke অ্যাট্রিবিউট সবই নামকৃত রঙ গ্রহণ করে। সরাসরি element.style.backgroundColor = 'Tomato' সেট করা যায়। নামকৃত রঙ CSS কাস্টম প্রপার্টিতেও কাজ করে এবং getComputedStyle() মেথডের সাথেও, যদিও আপনি যেভাবেই সেট করুন ব্রাউজার গণনা করা মানটি rgb() ফরম্যাটে ফেরত দেয়।
কিছু রঙের নাম কেন PapayaWhip বা BlanchedAlmond-এর মতো অদ্ভুত?
এই নামগুলো X11 রঙ ডেটাবেস থেকে এসেছে, যা ১৯৮০-এর দশকে Unix ওয়ার্কস্টেশনে X Window System-এর জন্য তৈরি হয়েছিল। নামগুলো তাদের মূল লেখকরা কোনো আনুষ্ঠানিক নামকরণ নিয়ম ছাড়াই বেছে নিয়েছিলেন। CSS Level 3-এ X11 রঙ গ্রহণ করার সময় পেছনের সামঞ্জস্যের জন্য বিদ্যমান নামগুলো রাখা হয়েছিল। ফলাফলে বর্ণনামূলক নাম (DarkRed), খাদ্য উল্লেখ (PapayaWhip, Chocolate, Salmon) এবং ভৌগোলিক শব্দ (Peru, Sienna)-এর মিশ্রণ রয়েছে।
RebeccaPurple কি একটি আনুষ্ঠানিক CSS রঙ?
হ্যাঁ। RebeccaPurple (#663399) ২০১৪ সালে CSS Color Level 4 স্পেসিফিকেশনে যুক্ত হয়েছিল। এটি CSS লেখক Eric Meyer-এর কন্যা Rebecca Meyer-এর স্মরণে CSS ওয়ার্কিং গ্রুপ কর্তৃক প্রস্তাবিত হয়েছিল, যিনি ছয় বছর বয়সে ব্রেইন ক্যান্সারে মারা গিয়েছিলেন। ২০১৪ সালের পরে প্রকাশিত সমস্ত ব্রাউজারে রঙটি সমর্থিত।
আমার ইনপুট hex দুটি নামকৃত রঙ থেকে সমান দূরত্বে থাকলে কী হয়?
দুটি নামকৃত রঙ ইনপুট থেকে একই ইউক্লিডীয় দূরত্বে থাকলে, ফলাফল পুনরাবৃত্তির ক্রমের উপর নির্ভর করে। এই টুলটি CSS রঙের তালিকা বর্ণানুক্রমিকভাবে পুনরাবৃত্তি করে এবং প্রথম যে মিলটি পায় সেটি রাখে। ব্যবহারিকভাবে, হুবহু সমতা বিরল কারণ ১৪৮টি নামকৃত রঙ RGB স্থানে অসমভাবে বিতরণ করা। বেশিরভাগ hex ইনপুটের একটি একক নিকটতম মিল থাকে।