রঙ পূর্বনির্ধারিত রঙের নাম, অথবা RGB, HEX, HSL, RGBA, HSLA মান ব্যবহার করে নির্ধারণ করা হয়।
মনে রাখবেন: CSS/HTML 140টি স্ট্যান্ডার্ড রঙের নাম সমর্থন করে।
আপনি HTML এলিমেন্টের জন্য ব্যাকগ্রাউন্ড কালার সেট করতে পারেন:
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>উপরের HTML কোডটি ব্রাউজারে এভাবে দেখাবে:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
আপনি টেক্সটের রঙ সেট করতে পারেন:
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>উপরের HTML কোডটি ব্রাউজারে এভাবে দেখাবে:
Lorem ipsum...
Ut wisi enim...
আপনি বর্ডারের রঙ সেট করতে পারেন:
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>উপরের HTML কোডটি ব্রাউজারে এভাবে দেখাবে:
CSS-এ, রঙ RGB মান, HEX মান, HSL মান, RGBA মান এবং HSLA মান ব্যবহার করেও নির্ধারণ করা যায়:
"Tomato" রঙের নামের মতোই:
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>উপরের HTML কোডটি ব্রাউজারে এভাবে দেখাবে:
"Tomato" রঙের নামের মতোই, কিন্তু 50% স্বচ্ছ:
CSS-এ, একটি রঙ RGB মান হিসেবে নির্ধারণ করা যায়, এই সূত্র ব্যবহার করে:
rgb(red, green, blue)
প্রতিটি প্যারামিটার (red, green, এবং blue) 0 থেকে 255-এর মধ্যে রঙের তীব্রতা নির্ধারণ করে।
উদাহরণস্বরূপ, rgb(255, 0, 0) লাল হিসেবে প্রদর্শিত হয়, কারণ red তার সর্বোচ্চ মানে (255) সেট করা এবং বাকিগুলো 0-তে সেট করা।
কালো রঙ দেখাতে, সব কালার প্যারামিটার 0-তে সেট করতে হবে, এভাবে: rgb(0, 0, 0)।
সাদা রঙ দেখাতে, সব কালার প্যারামিটার 255-এ সেট করতে হবে, এভাবে: rgb(255, 255, 255)।
CSS-এ, একটি রঙ এই ফর্মে একটি হেক্সাডেসিমাল মান ব্যবহার করে নির্ধারণ করা যায়:
#rrggbb
যেখানে rr (red), gg (green) এবং bb (blue) হলো 00 থেকে ff-এর মধ্যে হেক্সাডেসিমাল মান (দশমিক 0-255-এর সমান)।
উদাহরণস্বরূপ, #ff0000 লাল হিসেবে প্রদর্শিত হয়, কারণ red তার সর্বোচ্চ মানে (ff) সেট করা এবং বাকিগুলো সর্বনিম্ন মানে (00) সেট করা।
CSS-এ, একটি রঙ hue, saturation, এবং lightness (HSL) ব্যবহার করে এই ফর্মে নির্ধারণ করা যায়:
hsl(hue, saturation, lightness)
Hue হলো কালার হুইলে 0 থেকে 360-এর মধ্যে একটি ডিগ্রি। 0 লাল, 120 সবুজ, এবং 240 নীল।
Saturation একটি শতাংশ মান, 0% মানে ধূসরের একটি শেড, এবং 100% হলো সম্পূর্ণ রঙ।
Lightness-ও একটি শতাংশ, 0% কালো, 50% হালকাও না গাঢ়ও না, 100% সাদা
Saturation-কে একটি রঙের তীব্রতা হিসেবে বর্ণনা করা যায়।
100% হলো বিশুদ্ধ রঙ, কোনো ধূসর শেড নেই
50% হলো 50% ধূসর, তবে আপনি তখনও রঙ দেখতে পাবেন।
0% সম্পূর্ণ ধূসর, আপনি আর রঙ দেখতে পাবেন না।
একটি রঙের lightness-কে বর্ণনা করা যায় আপনি রঙে কতটা আলো দিতে চান তা দিয়ে, যেখানে 0% মানে কোনো আলো নেই (কালো), 50% মানে 50% আলো (না গাঢ় না হালকা) 100% মানে সম্পূর্ণ lightness (সাদা)।
ধূসরের শেড প্রায়ই hue এবং saturation 0-তে সেট করে, এবং গাঢ়/হালকা শেড পেতে lightness 0% থেকে 100% পর্যন্ত সমন্বয় করে নির্ধারণ করা হয়:
RGBA কালার মান হলো RGB কালার মানের একটি বর্ধিত রূপ, যেখানে একটি আলফা চ্যানেল থাকে - যা একটি রঙের অস্বচ্ছতা নির্ধারণ করে।
একটি RGBA কালার মান এভাবে নির্ধারণ করা হয়:
rgba(red, green, blue, alpha)
আলফা প্যারামিটার হলো 0.0 (সম্পূর্ণ স্বচ্ছ) থেকে 1.0 (একদমই স্বচ্ছ নয়) এর মধ্যে একটি সংখ্যা:
HSLA কালার মান হলো HSL কালার মানের একটি বর্ধিত রূপ, যেখানে একটি আলফা চ্যানেল থাকে - যা একটি রঙের অস্বচ্ছতা নির্ধারণ করে।
একটি HSLA কালার মান এভাবে নির্ধারণ করা হয়:
hsla(hue, saturation, lightness, alpha)
আলফা প্যারামিটার হলো 0.0 (সম্পূর্ণ স্বচ্ছ) থেকে 1.0 (একদমই স্বচ্ছ নয়) এর মধ্যে একটি সংখ্যা: