লাল রঙের জন্য RGB কোড লেখা হয়। CSS-এ পাঠ্যের রঙ সেট করা

বইয়ের প্রথম অংশে, আমরা ইতিমধ্যে কিছু উদাহরণে দেখিয়েছি কিভাবে CSS-এ টেক্সট কালার সেট করতে হয়। এখানে জটিল কিছু নেই: আপনার রঙের বৈশিষ্ট্য এবং আপনি যে রঙের সাথে পাঠ্য রঙ করতে চান তার মান প্রয়োজন।

পি (রঙ: #211C18;)

আমাদের উদাহরণে, মান #211C18 হেক্সাডেসিমেল রঙের কোড উপস্থাপন করে। আপনি যদি ইতিমধ্যে হেক্সাডেসিমেল সংখ্যা পদ্ধতির সাথে পরিচিত হন, তাহলে আপনি পরবর্তী অনুচ্ছেদটি পড়া এড়িয়ে যেতে পারেন। আমরা ওয়েবে রঙের প্রতিনিধিত্ব করার অন্যান্য উপায় সম্পর্কে আরও কথা বলব - রঙের মডেল ব্যবহার করে (RGB, HSL) এবং কীওয়ার্ড. এই তথ্য নতুনদের জন্য দরকারী হবে এবং পড়ার সুপারিশ করা হয়.

হেক্সাডেসিমেল রং (হেক্স)

হেক্সাডেসিমেল সংখ্যা পদ্ধতি ( হেক্সাডেসিমেল, হেক্স) 16 নম্বরের উপর ভিত্তি করে। একটি হেক্সাডেসিমেল মান লিখতে, 16টি অক্ষর ব্যবহার করা হয়: 0 থেকে 9 পর্যন্ত আরবি সংখ্যা এবং ল্যাটিন বর্ণমালার প্রথম অক্ষর (A, B, C, D, E, F)। হেক্সাডেসিমেল ফরম্যাটে রঙ 00 থেকে FF পর্যন্ত তিনটি দ্বি-সংখ্যার সংখ্যা হিসাবে লেখা হয় (এগুলি অবশ্যই একটি হ্যাশ চিহ্ন # দ্বারা আগে হতে হবে), যা তিনটি উপাদানের সাথে মিলে যায়: লাল, সবুজ, নীল (RGB রঙের মডেল)। অন্য কথায়, একটি রঙের এন্ট্রিকে #RRGGBB হিসাবে উপস্থাপন করা যেতে পারে, যেখানে প্রথম জোড়া অক্ষরটি লাল স্তর, দ্বিতীয়টি - সবুজ স্তর এবং তৃতীয়টি - নীল স্তর নির্ধারণ করে৷ ফলস্বরূপ রঙটি এই তিনটি রঙের সংমিশ্রণ।

হেক্স রঙের জন্য সংক্ষিপ্ত স্বরলিপি

কিছু হেক্সাডেসিমেল রঙের মান সংক্ষেপে লেখা যেতে পারে। এটি করার জন্য, #RRGGBB এর মত এন্ট্রিটিকে #RGB-তে পরিণত করুন। এটি করা যেতে পারে যখন হেক্স নম্বরে তিন জোড়া অভিন্ন অক্ষর থাকে।

স্বরলিপির সংক্ষিপ্ত রূপটি বেশ সাধারণ, এবং আপনার রেফারেন্সের জন্য আমরা সংক্ষেপণের কয়েকটি উদাহরণ প্রদান করব। যাইহোক, হেক্স রঙের মানগুলি কেস সংবেদনশীল নয় - আপনি বড় হাতের এবং ছোট হাতের অক্ষর উভয়ই ব্যবহার করতে পারেন, এটি সমস্ত আপনার ইচ্ছা এবং স্বাদের উপর নির্ভর করে।

হেক্স রঙের জন্য সংক্ষিপ্ত স্বরলিপির উদাহরণ:

আরজিবি রঙের মডেল

CSS-এ রং নির্দিষ্ট করার দ্বিতীয় উপায় হল দশমিক RGB মান (লাল, নীল, সবুজ) ব্যবহার করা। এটি করার জন্য, আপনাকে রঙের বৈশিষ্ট্যের পরে rgb কীওয়ার্ড লিখতে হবে এবং তারপরে বন্ধনীতে এবং কমা দ্বারা পৃথক করতে হবে - 0 থেকে 255 পর্যন্ত তিনটি সংখ্যা, যার প্রতিটির অর্থ লাল, সবুজ এবং নীল রঙের তীব্রতা (r , ছ, খ)। সংখ্যা যত বেশি, রঙ তত বেশি তীব্র। উদাহরণস্বরূপ, একটি উজ্জ্বল সবুজ রঙ পেতে, আপনাকে লিখতে হবে:

P ( রঙ: rgb(0, 255, 0);)

তবে হলুদ-সরিষার আভাটির নিম্নলিখিত অর্থ রয়েছে:

রঙ: rgb(94, 81, 3); /* নীচে একই রঙ, হেক্সাডেসিমেলে লেখা: */ color: #5E5103;

কালোর মান লেখা হয় (0, 0, 0) এবং সাদার জন্য (255, 255, 255)। শতাংশ হিসাবে এই মানগুলি নির্দেশ করাও সম্ভব। সুতরাং, 255 সংখ্যাটি 100% এর সাথে মিলে যায়, তাই, সাদা রঙনিম্নলিখিত হিসাবে সেট করা যেতে পারে:

রঙ: rgb(100%, 100%, 100%);

যেখানে রঙের অর্থ খুঁজতে হবে

সম্ভবত আপনার একটি প্রশ্ন আছে: আপনি এই সমস্ত রঙের অর্থ কোথায় পাবেন? এখানে অনেক গ্রাফিক সম্পাদকএবং অনলাইন পরিষেবা যা দিয়ে আপনি রং নির্বাচন করতে এবং রঙের স্কিম তৈরি করতে পারেন। সর্বাধিক জনপ্রিয় প্রোগ্রামগুলির মধ্যে একটি যেখানে আপনি একটি উপযুক্ত রঙ নির্বাচন করতে পারেন এবং এর আরজিবি, হেক্স মান এবং আরও অনেক কিছু পেতে পারেন - অ্যাডোবি ফটোশপ. একটি বিকল্প হিসাবে, এমন বিশেষ সাইট রয়েছে যেখানে আপনি সহজেই কেবল একটি রঙই নয়, একটি সম্পূর্ণ রঙের স্কিমও চয়ন করতে পারেন। একটি দুর্দান্ত উদাহরণ হল অ্যাডোব কালার সিসি পরিষেবা।

আরজিবিএ রঙের মডেল

আপনি RGB-এর মতো একইভাবে RGBA ফর্ম্যাটে একটি রঙ সেট করতে পারেন। RGBA এবং RGB এর মধ্যে পার্থক্য হল একটি আলফা চ্যানেলের উপস্থিতি, যা রঙের স্বচ্ছতার জন্য দায়ী। 0 থেকে 1 পর্যন্ত পরিসরে একটি সংখ্যা ব্যবহার করে স্বচ্ছতা সেট করা হয়, যেখানে 0 মানে সম্পূর্ণ স্বচ্ছতা, এবং 1 এর বিপরীতে, সম্পূর্ণ অস্বচ্ছ। 0.5 এর মতো মধ্যবর্তী মানগুলি আপনাকে একটি স্বচ্ছ চেহারা সেট করতে দেয় (শূণ্য ছাড়াই, কিন্তু একটি বিন্দু সহ - .5 সহ সংক্ষিপ্ত স্বরলিপি অনুমোদিত)। উদাহরণস্বরূপ, পাঠ্যটিকে রঙিন এবং সামান্য স্বচ্ছ করতে, আপনাকে rgba কীওয়ার্ড এবং রঙের বৈশিষ্ট্যের পরে রঙের মান লিখতে হবে:

P ( রঙ: rgba(94, 81, 3, .9);)

RGBA এর অসুবিধা হল এটি সমর্থন করে না ইন্টারনেট ব্রাউজার এক্সপ্লোরার সংস্করণ 8 এবং তার আগে। বিশেষ করে IE8 এর জন্য, আপনি নিম্নলিখিত সমাধানটি প্রয়োগ করতে পারেন:

P ( রঙ: rgb(94, 81, 3); রঙ: rgba(94, 81, 3, .9);)

উদাহরণের প্রথম বৈশিষ্ট্যটি IE8 ব্রাউজারের উদ্দেশ্যে, যা পাঠ্যটিকে পছন্দসই রঙে প্রদর্শন করবে, তবে স্বচ্ছতা ছাড়াই। এবং যে ব্রাউজারগুলি RGBA বোঝে তারা স্বচ্ছতার সাথে উপাদানটিতে দ্বিতীয় বৈশিষ্ট্য প্রয়োগ করবে।

এইচএসএল (এইচএসএলএ) রঙের মডেল

এছাড়াও আপনি এইচএসএল কালার মডেলের স্থানাঙ্ক (হিউ, স্যাচুরেশন, লাইটনেস) ব্যবহার করে সিএসএস-এ রঙ সেট করতে পারেন। এটি এই মত লেখা হয়:

P ( রঙ: hsl(165, 100%, 50%);)

বন্ধনীতে প্রথম সংখ্যাটির অর্থ হল রঙ এবং এটি ডিগ্রীতে দেওয়া হয়েছে (0 থেকে 359 পর্যন্ত সংখ্যার পরিসর)। ডিগ্রী কেন ব্যবহার করা হয় তা বোঝা সহজ হবে যদি আপনি মনে রাখবেন যে রঙের চাকাটি কেমন দেখাচ্ছে:

বন্ধনীতে দ্বিতীয় এবং তৃতীয় সংখ্যাগুলি যথাক্রমে স্যাচুরেশন এবং হালকাতা বোঝায়। তাদের মানগুলি 0 থেকে 100 শতাংশে সেট করা হয়। স্যাচুরেশন মান যত কম হবে, রঙ তত বেশি নিঃশব্দ হবে। শূন্যের একটি স্যাচুরেশন মান একটি ধূসর রঙে পরিণত হবে, রঙের মান যাই হোক না কেন। হালকাতার মান আপনাকে রঙের উজ্জ্বলতা নির্দিষ্ট করতে দেয়। নিম্ন মানগুলি গাঢ় রঙের ছায়ায় পরিণত হয়, উচ্চ মানগুলি হালকা শেডগুলিতে পরিণত হয়। হালকাতার জন্য 100% মানে সাদা, 0% মানে কালো।

HSLA রঙের মডেলটি প্রায় HSL-এর মতোই কাজ করে, কিন্তু, RGBA-এর মতো, এটিতে একটি আলফা চ্যানেল রয়েছে যার সাহায্যে আপনি 0 থেকে 1 পর্যন্ত পরিসরে পছন্দসই মান নির্দিষ্ট করে রঙের স্বচ্ছতা সেট করতে পারেন:

P ( রঙ: hsla(165, 100%, 50%, .6);)

এইচএসএল এবং এইচএসএলএ ছাড়া সমস্ত ব্রাউজার দ্বারা সমর্থিত ইন্টারনেট এক্সপ্লোরারসংস্করণ 8 এবং তার আগের।

স্ট্যান্ডার্ড HTML রং

ওয়েবে রঙের প্রতিনিধিত্ব করার আরেকটি উপায় হল কীওয়ার্ড, যা একটি উপাদানের জন্য একটি রঙ নির্দিষ্ট করতে ব্যবহার করা যেতে পারে। উদাহরণ:

P(রঙ:কালো;)

16টি মানক রঙ রয়েছে যা রঙের সম্পত্তির মানতে লেখা যেতে পারে:

এই রং সব ব্রাউজার দ্বারা সমর্থিত. এগুলি ছাড়াও, রঙের বিভিন্ন শেডের জন্য প্রায় 130টি অতিরিক্ত কীওয়ার্ড রয়েছে। এই রঙগুলির একটি সম্পূর্ণ টেবিল W3C রেফারেন্স বইতে দেখা যেতে পারে।

এই ধরনের কীওয়ার্ডের ব্যবহার গ্রহণযোগ্য, তবে কিছু শব্দ ব্রাউজার দ্বারা গৃহীত না হওয়ার ঝুঁকি রয়েছে। তাই, কীওয়ার্ডের পরিবর্তে হেক্সাডেসিমেল কালার কোড লেখার পরামর্শ দেওয়া হচ্ছে।

ফলাফল

সিএসএস-এ, রঙের বৈশিষ্ট্য ব্যবহার করে পাঠ্যের রঙ নির্দিষ্ট করা হয় এবং এর মান বিভিন্ন উপায়ে লেখা যেতে পারে - হেক্সাডেসিমেল (হেক্স) বিন্যাসে, আরজিবি বা এইচএসএল বিন্যাসে, বা একটি কীওয়ার্ড নির্দিষ্ট করে। একটি কীওয়ার্ড ব্যবহার করে নির্দিষ্ট রঙের ভুল প্রদর্শন এড়াতে, এটির হেক্স মান উল্লেখ করা ভাল।

আলফা চ্যানেল (RGBA এবং HSLA ফর্ম্যাট) ব্যবহার করে উপাদানটির স্বচ্ছতা সেট করাও সম্ভব। এটা মনে রাখা উচিত যে IE8 ব্রাউজার এবং তার প্রাথমিক সংস্করণ RGBA, HSL এবং HSLA ফর্ম্যাট সমর্থন করে না।

এই নিবন্ধে আমরা ওয়েবসাইটের পৃষ্ঠাগুলিতে পাঠ্যের রঙ পরিবর্তন করার জন্য HTML এবং CSS এর ক্ষমতাগুলির সাথে পরিচিত হব। বেশ কয়েকটি বিকল্প বিবেচনা করা হবে। প্রতিটি পৃথক ক্ষেত্রে, তার নিজস্ব নির্দিষ্ট পদ্ধতি সুবিধাজনক।

শুরু করার জন্য, আমরা নোট করি যে সমস্ত রং তিনটি ফর্ম্যাটে নির্দিষ্ট করা যেতে পারে:

• রঙের নাম (লাল, নীল, সবুজ, ইত্যাদি)
• হেক্সাডেসিমেল বিন্যাস (#104A00, #0F0, ইত্যাদি)
• rgba ফরম্যাট (rgba(0,0,0,0.5), ইত্যাদি)

আমাদের ওয়েবসাইট সাইটের জন্য সম্পূর্ণ প্যালেট এবং html রঙের নাম উপস্থাপন করে, যেখানে আপনি উপযুক্ত রঙ চয়ন করতে পারেন।

পদ্ধতি 1. html ট্যাগের মাধ্যমে