রঙ

CSS পডকাস্ট - 006: কালার পার্ট ওয়ান

রঙ যেকোনো ওয়েবসাইটের একটি গুরুত্বপূর্ণ অংশ এবং CSS-এ রঙের ধরন, ফাংশন এবং চিকিত্সার জন্য অনেকগুলি বিকল্প রয়েছে।

আপনি কিভাবে স্থির করবেন কোন রঙের ধরন ব্যবহার করবেন? আপনি কিভাবে আপনার রং আধা-স্বচ্ছ করবেন? এই পাঠে, আপনি আপনার প্রকল্প এবং দলের জন্য সঠিক সিদ্ধান্ত নিতে আপনাকে সাহায্য করার জন্য কোন বিকল্পগুলি রয়েছে তা শিখতে যাচ্ছেন।

CSS-এর বিভিন্ন ধরনের ডেটা আছে, যেমন স্ট্রিং এবং সংখ্যা। রঙ এই ধরনের একটি এবং অন্যান্য ধরনের ব্যবহার করে, যেমন তার নিজস্ব সংজ্ঞার জন্য সংখ্যা।

সংখ্যাসূচক রং

এটি খুব সম্ভবত যে CSS-এ রঙের সাথে আপনার প্রথম এক্সপোজার সংখ্যাসূচক রঙের মাধ্যমে। আমরা কয়েকটি ভিন্ন আকারে সংখ্যাসূচক রঙের মান নিয়ে কাজ করতে পারি।

হেক্স রং

h1 {
  color: #b71540;
}

হেক্সাডেসিমেল স্বরলিপি (প্রায়শই হেক্সে সংক্ষিপ্ত করা হয়) হল RGB-এর জন্য একটি সংক্ষিপ্ত সিনট্যাক্স, যা লাল সবুজ এবং নীলকে একটি সংখ্যাসূচক মান নির্ধারণ করে, যা তিনটি প্রাথমিক রঙ ।

হেক্সাডেসিমেল রেঞ্জ হল 0-9 এবং AF । যখন ছয় সংখ্যার ক্রমানুসারে ব্যবহার করা হয়, তখন সেগুলিকে RGB সংখ্যাসূচক রেঞ্জে অনুবাদ করা হয় যা 0-255 হয় যা যথাক্রমে লাল, সবুজ এবং নীল রঙের চ্যানেলের সাথে মিলে যায়।

আপনি যেকোনো সংখ্যাসূচক রং দিয়ে একটি আলফা মান নির্ধারণ করতে পারেন। একটি আলফা মান হল স্বচ্ছতার শতাংশ। হেক্স কোডে, আপনি ছয় অঙ্কের ক্রমটিতে আরও দুটি সংখ্যা যোগ করুন, একটি আট অঙ্কের ক্রম তৈরি করুন। উদাহরণস্বরূপ, হেক্স কোডে কালো সেট করতে, #000000 লিখুন। একটি 50% স্বচ্ছতা যোগ করতে, এটি #00000080 এ পরিবর্তন করুন।

হেক্স স্কেল 0-9 এবং AF হওয়ার কারণে, স্বচ্ছতার মানগুলি সম্ভবত আপনি যা আশা করতে চান তেমন নয়৷ এখানে কালো হেক্স কোডে কিছু কী, সাধারণ মান যোগ করা হয়েছে, #000000 :

• 0% আলফা - যা সম্পূর্ণ স্বচ্ছ - হল 00 : #00000000
• 50% আলফা হল 80 : #00000080
• 75% আলফা হল BF : #000000BF

একটি দুই অঙ্কের হেক্সকে দশমিকে রূপান্তর করতে, প্রথম অঙ্কটি নিন এবং এটিকে 16 দ্বারা গুণ করুন (কারণ হেক্স বেস 16), তারপর দ্বিতীয় সংখ্যাটি যোগ করুন। 75% আলফার জন্য উদাহরণ হিসাবে BF ব্যবহার করা:

1. B 11 এর সমান, যা 16 দ্বারা গুণ করলে 176 এর সমান হয়
2. F 15 এর সমান
3. 176 + 15 = 191
4. আলফা মান হল 255 এর 191-75%

RGB (লাল, সবুজ, নীল)

h1 {
  color: rgb(183, 21, 64);
}

RGB রঙগুলিকে rgb() কালার ফাংশন দিয়ে সংজ্ঞায়িত করা হয়, হয় সংখ্যা বা শতাংশ ব্যবহার করে প্যারামিটার হিসেবে। সংখ্যাগুলি 0-255 সীমার মধ্যে হতে হবে এবং শতাংশগুলি 0% এবং 100% এর মধ্যে হতে হবে৷ RGB 0-255 স্কেলে কাজ করে, তাই 255 100% এবং 0 থেকে 0% এর সমতুল্য হবে।

আরজিবিতে কালো সেট করতে, এটিকে rgb(0 0 0) হিসাবে সংজ্ঞায়িত করুন, যা শূন্য লাল, শূন্য সবুজ এবং শূন্য নীল। কালোকে rgb(0%, 0%, 0%) হিসাবেও সংজ্ঞায়িত করা যেতে পারে। সাদা হল ঠিক বিপরীত: rgb(255, 255, 255) বা rgb(100%, 100%, 100%)

একটি আলফা rgb() এ দুটি উপায়ে সেট করা হয়। হয় লাল, সবুজ এবং নীল পরামিতিগুলির পরে একটি / যোগ করুন বা rgba() ফাংশনটি ব্যবহার করুন। আলফাকে 0 এবং 1 এর মধ্যে শতাংশ বা দশমিক দিয়ে সংজ্ঞায়িত করা যেতে পারে। উদাহরণস্বরূপ, আধুনিক ব্রাউজারগুলিতে 50% আলফা কালো সেট করতে, লিখুন: rgb(0 0 0 / 50%) বা rgb(0 0 0 / 0.5) . বিস্তৃত সমর্থনের জন্য, rgba() ফাংশন ব্যবহার করে, লিখুন: rgba(0, 0, 0, 50%) বা rgba(0, 0, 0, 0.5)

এইচএসএল (হিউ, স্যাচুরেশন, লাইটনেস)

h1 {
  color: hsl(344, 79%, 40%);
}

এইচএসএল হল হিউ, স্যাচুরেশন এবং লাইটনেস। হিউ রঙের চাকার মান বর্ণনা করে, 0 থেকে 360 ডিগ্রি পর্যন্ত, লাল দিয়ে শুরু হয় (0 এবং 360 উভয়ই)। 180, বা 50% এর একটি বর্ণ নীল পরিসরে হবে। এটা আমরা দেখতে যে রঙের উত্স.

স্যাচুরেশন হল নির্বাচিত রঙ কতটা প্রাণবন্ত। একটি সম্পূর্ণ ডিস্যাচুরেটেড রঙ ( 0% এর স্যাচুরেশন সহ) গ্রেস্কেলে প্রদর্শিত হবে। এবং অবশেষে, হালকাতা হল প্যারামিটার যা যোগ করা আলোর সাদা থেকে কালো পর্যন্ত স্কেল বর্ণনা করে। 100% এর হালকাতা আপনাকে সর্বদা সাদা দেবে।

hsl() কালার ফাংশন ব্যবহার করে, আপনি hsl(0 0% 0%) , অথবা hsl(0deg 0% 0%) লিখে সত্যিকারের কালো সংজ্ঞায়িত করেন। এর কারণ হল হিউ প্যারামিটারটি রঙের চাকার ডিগ্রী নির্ধারণ করে, যা আপনি যদি সংখ্যার ধরন ব্যবহার করেন তবে 0-360 । আপনি কোণ প্রকারটিও ব্যবহার করতে পারেন, যা হল ( 0deg ) বা (0turn) । স্যাচুরেশন এবং হালকাতা উভয়ই শতাংশের সাথে সংজ্ঞায়িত করা হয়।

আলফা hsl() তে সংজ্ঞায়িত করা হয়েছে, একইভাবে rgb() হিসাবে a / পরে hue, saturation এবং lightness parameters যোগ করে অথবা hsla() ফাংশন ব্যবহার করে। আলফাকে 0 এবং 1 এর মধ্যে শতাংশ বা দশমিক দিয়ে সংজ্ঞায়িত করা যেতে পারে। উদাহরণস্বরূপ, একটি 50% আলফা কালো সেট করতে, ব্যবহার করুন: hsl(0 0% 0% / 50%) বা hsl(0 0% 0% / 0.5) hsla() ফাংশন ব্যবহার করে লিখুন: hsla(0, 0%, 0%, 50%) অথবা hsla(0, 0%, 0%, 0.5)

কালার কীওয়ার্ড

CSS-এ 148টি নাম দেওয়া রং আছে। এগুলি সাদামাটা ইংরেজি নাম যেমন বেগুনি, টমেটো এবং গোল্ডেনরড। ওয়েব অ্যালমানাক অনুসারে কিছু জনপ্রিয় নাম হল কালো, সাদা, লাল, নীল এবং ধূসর। আমাদের পছন্দের মধ্যে রয়েছে গোল্ডেনরড, অ্যালিসব্লু এবং হটপিঙ্ক।

স্ট্যান্ডার্ড রঙের পাশাপাশি, বিশেষ কীওয়ার্ডও উপলব্ধ রয়েছে:

• transparent একটি সম্পূর্ণ স্বচ্ছ রঙ। এটি background-color প্রাথমিক মানও
• currentColor হল color বৈশিষ্ট্যের প্রাসঙ্গিক গণনাকৃত গতিশীল মান। আপনার যদি red রঙের একটি পাঠ্যের রঙ থাকে এবং তারপরে border-color currentColor সেট করুন, এটিও লাল হবে। আপনি যে উপাদানটির উপর currentColor সংজ্ঞায়িত করেছেন তার যদি সংজ্ঞায়িত color জন্য একটি মান না থাকে, তবে currentColor ক্যাসকেড দ্বারা গণনা করা হবে

সিএসএস নিয়মে কোথায় রঙ ব্যবহার করবেন

যদি একটি CSS প্রপার্টি <color> ডেটা টাইপ মান হিসাবে গ্রহণ করে, তাহলে এটি রঙ প্রকাশ করার উপরের যে কোনো পদ্ধতি গ্রহণ করবে। স্টাইলিং পাঠ্যের জন্য, color , text-shadow এবং text-decoration-color বৈশিষ্ট্যগুলি ব্যবহার করুন যা সকলেই রঙকে মান বা রঙ হিসাবে মান হিসাবে গ্রহণ করে।

ব্যাকগ্রাউন্ডের জন্য, আপনি background বা background-color মান হিসাবে একটি রঙ সেট করতে পারেন। রঙগুলি গ্রেডিয়েন্টেও ব্যবহার করা যেতে পারে, যেমন linear-gradient । গ্রেডিয়েন্ট হল এক ধরনের ইমেজ যা সিএসএস-এ প্রোগ্রাম্যাটিকভাবে সংজ্ঞায়িত করা যায়। গ্রেডিয়েন্টগুলি হেক্স, আরজিবি বা এইচএসএলের মতো রঙের বিন্যাসের যে কোনও সংমিশ্রণে দুটি বা ততোধিক রঙ গ্রহণ করে।

অবশেষে, border-color এবং outline-color আপনার বাক্সে সীমানা এবং রূপরেখার জন্য রঙ সেট করে। box-shadow প্রপার্টিও রঙকে মান হিসেবে গ্রহণ করে।

আপনার উপলব্ধি পরীক্ষা করুন

রঙ আপনার জ্ঞান পরীক্ষা

সম্পদ

• আপনি কিভাবে HSL এর সাথে কোণ ব্যবহার করতে পারেন তা দেখানো একটি সহজ ডেমো
• রঙের উপর একটি ব্যাপক নির্দেশিকা
• প্রশস্ত স্বরগ্রাম রঙের উপর একটি ব্যাপক গাইড
• [ভিডিও] কিভাবে হেক্স কোড পড়তে হয় তার ব্যাখ্যাকারী
• হেক্সাডেসিমেল কোড কিভাবে কাজ করে