রঙ

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

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

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

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

রং নির্বাচন

নাম দেওয়া রং

আপনার জন্য একটি রঙ চয়ন করার সবচেয়ে সহজ উপায় হল CSS-এ 148টি নামযুক্ত রঙের মধ্যে একটি বেছে নেওয়া। এগুলি হল সাধারণ ইংরেজি নাম যেমন purple , tomato এবং goldenrodওয়েব অ্যালম্যানাক অনুসারে কিছু জনপ্রিয় নাম হল black , white , red , blue এবং gray । আমাদের পছন্দের মধ্যে রয়েছে goldenrod , aliceblue এবং hotpink

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

যদিও নাম দেওয়া রঙগুলি সুবিধাজনক হতে পারে, আপনাকে সম্ভবত নির্দিষ্ট রঙগুলি ব্যবহার করতে হবে যা সেই সেটে উপলব্ধ নয়। আপনি কয়েকটি ভিন্ন আকারে সংখ্যাসূচক মান সহ রং নির্দিষ্ট করতে পারেন।

হেক্স রং

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)

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

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

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

60 ডিগ্রী বৃদ্ধিতে ডিগ্রী মানের জন্য লেবেল সহ একটি রঙের চাকা প্রতিটি কোণের মান যা প্রতিনিধিত্ব করে তা ভিজ্যুয়ালগুলিকে সহায়তা করতে

স্যাচুরেশন হল নির্বাচিত রঙ কতটা প্রাণবন্ত। একটি সম্পূর্ণ ডিস্যাচুরেটেড রঙ ( 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)

উচ্চ সংজ্ঞা রং

আরজিবি এবং এইচএসএল এসআরজিবি গামুটে রঙের সংজ্ঞা দেয়। নতুন মনিটরগুলি এই ফর্ম্যাটগুলির দ্বারা এবং sRGB স্বরগ্রামের বাইরে বর্ণনা করার চেয়ে অনেক বেশি রঙ সমর্থন করে। আপনি বিভিন্ন CSS ফাংশন সহ এই রঙগুলি চয়ন করতে পারেন।

color() ফাংশন

h1 {
  color: color(srgb 0.9 0.2 0.4);
}

CSS color() ফাংশন আপনাকে একটি নির্দিষ্ট রঙের জায়গায় একটি রঙ চয়ন করতে দেয়। প্রথম যুক্তি হল ব্যবহার করার জন্য রঙের স্থান, যা নিম্নলিখিত চ্যানেলগুলির জন্য বিকল্পগুলিকে সংজ্ঞায়িত করে। rgb() মত, আপনি 0 এবং 1 মধ্যে একটি সংখ্যা সেট করে আলফা চ্যানেল সেট করতে পারেন, অথবা একটি শতাংশ, a / এর পরে।

উদাহরণস্বরূপ, আগের কোড স্নিপেটে গাঢ় লাল RGB রঙ, যা rgb(183 21 64) হিসাবে সংজ্ঞায়িত করা হয়েছে, rgb(72% 8% 25%) হিসাবে শতাংশের সাথে সংজ্ঞায়িত করা যেতে পারে। আপনি srgb কীওয়ার্ডের সাথে color() ফাংশনটি color(srgb .72 .08 .25) সাথে একই রঙ নির্দিষ্ট করতে ব্যবহার করতে পারেন।

srgb রঙের স্থান নির্ধারণ করে এবং আমাদের বলে যে পরবর্তী তিনটি আর্গুমেন্ট হল লাল, সবুজ এবং নীল। মান 0 থেকে 255 এর পরিবর্তে 0 থেকে 1 পর্যন্ত যায়।

rgb() এর মতোই আমরা আলফাকে একটি / এবং একটি শতাংশ বা দশমিক 0 এবং 1 মধ্যে সেট করতে পারি।

অনেকগুলি রঙের স্পেস রয়েছে যা আপনি color() ফাংশনের সাথে ব্যবহার করতে পারেন, প্রতিটির বিভিন্ন শক্তি এবং ব্যবহারের ক্ষেত্রে।

ডিসপ্লে P3

h1 {
  color: color(display-p3 0.9 0.2 0.4);
}

ডিসপ্লে P3 গ্যামুটে sRGB এর চেয়ে 50% বেশি রঙ রয়েছে। আপনি color() ফাংশন ব্যবহার করে ডিসপ্লে P3 কালার স্পেস সহ ডিসপ্লে P3 গামুটের সমস্ত রঙ নির্দিষ্ট করতে পারেন।

ডিসপ্লে পি 3-তে কালো সেট করতে, এটিকে color(display-p3 0 0 0)color() ফাংশনের জন্য display-p3 রঙের স্থান নির্দিষ্ট করার পরে, আপনার তিনটি চ্যানেল রয়েছে: লাল, সবুজ এবং নীল, color(srgb) এর মতো। কিন্তু যেহেতু চ্যানেলের মানগুলি একটি বৃহত্তর রঙের জায়গায় স্থানাঙ্কের প্রতিনিধিত্ব করে, একই চ্যানেলের মানগুলি ভিন্ন জিনিস বোঝায়।

color(srgb 1 .5 0) হল একটি কমলা রঙ যা color(display-p3 0.93596 0.52724 0.1983) । আমরা কমলাকে আরও বেশি প্রাণবন্ত করে তুলতে পারি এটিকে sRGB স্পেস থেকে color(display-p3 1 .5 0)

ওকলাব

Oklab-কে oklab() ফাংশন দ্বারা সংজ্ঞায়িত করা হয়, যার মধ্যে Lightness, a , এবং b এর চ্যানেল রয়েছে। এটি মসৃণ গ্রেডিয়েন্ট তৈরি করতে এবং রঙের স্যাচুরেশন সামঞ্জস্য করার জন্য, রঙ এবং হালকাতা বজায় রাখার জন্য দরকারী।

h1 {
  color: oklab(75% 0.1 0.1)
}

লাইটনেস চ্যানেল 0 থেকে 1 বা 0% থেকে 100% পর্যন্ত যায়। 0 এর হালকাতা সহ রং সবসময় কালো হবে।

a চ্যানেল -0.4 থেকে 0.4 বা 0% থেকে 100% পর্যন্ত যায়। নিম্ন মান সবুজ, এবং উচ্চ মান আরো লাল.

b চ্যানেল -0.4 থেকে 0.4 বা 0% থেকে 100% পর্যন্ত যায়। নিম্ন মান নীল, এবং উচ্চ মান আরো হলুদ.

OkLch

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

h1 {
  color: oklch(80% 0.1 200)
}

আপনি এইচএসএল-এ হালকাতা এবং রঙের সাথে কাজ করেছেন এবং ক্রোমা স্যাচুরেশনের মতো। আপনি oklch(0 0 0) দিয়ে কালো এবং oklch(1 0 0) দিয়ে সাদা সেট করতে পারেন।

লাইটনেস চ্যানেল 0 থেকে 1 বা 0% থেকে 100% পর্যন্ত যায়। 0 এর হালকাতা সহ রং সবসময় কালো হবে।

ক্রোমা চ্যানেল সেট করে যে একটি রঙ কতটা প্রাণবন্ত—0 বা 0% ডিস্যাচুরেটেড হবে, এবং উচ্চতর মানগুলিতে আরও রঙ থাকবে। 100% এর মান .4 এর সমান, তবে .4 এর কাছাকাছি মান সহ স্বরগ্রামের বাইরে দ্রুত যাওয়া সম্ভব।

হিউ ডিগ্রীতে নির্দিষ্ট করা হয়, ঠিক hsl() মত।

OkLCh ডিসপ্লে P3 এর মত একটি স্বরগ্রাম দ্বারা আবদ্ধ নয়, তাই আপনাকে নিশ্চিত করতে হবে যে আপনি এমন রঙ তৈরি করছেন যা প্রদর্শিত হতে পারে। oklch(80% 50% 200) হল একটি উজ্জ্বল নীল যা সংখ্যাগতভাবে একটি যুক্তিসঙ্গত রঙের মতো দেখায়, তবে এটি ডিসপ্লে P3 গ্যামুটের বাইরে।

অন্যান্য স্পেস

CSS-এ রঙ নির্দিষ্ট করার অনেক উপায় আছে এবং আপনাকে সেগুলি শিখতে হবে না। rgb() এবং Hex ফরম্যাটগুলি সাধারণত ডিজাইন টুল এবং বিদ্যমান কোডে ব্যবহৃত হয় এবং এটি জানার জন্য উপযোগী। এটি এমন একটি বিন্যাসের সাথে পরিচিত হওয়াও সহায়ক যা অনুমানযোগ্যভাবে ম্যানিপুলেট করা যেতে পারে। আপনি সরাসরি hsl বা oklch মান পরিবর্তন করতে পারেন, এবং ফলাফলের রঙটি কী হবে তা বুঝতে পারেন।

আরও রঙ এবং নতুন স্থান অ্যাক্সেসে আরও পড়ুন।

সিস্টেম রং

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

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

রং হেরফের

আপনার সাইটে ব্যবহার করার জন্য আপনার কাছে রঙের প্যালেট থাকতে পারে, তবে হোভার স্টেট, সীমানা এবং অন্যান্য UI উপাদানগুলির জন্য আপনার সেই রঙগুলির রূপের প্রয়োজন হতে পারে। আপনি প্রতিটি রঙ নির্দিষ্ট করতে পারেন, কিন্তু CSS এই বৈকল্পিকগুলি তৈরি করার জন্য রং রূপান্তর করার উপায়ও প্রদান করে।

color-mix()

দুটি রঙের মিশ্রণের ফলাফল ব্যবহার করতে, আপনি color-mix() পদ্ধতি ব্যবহার করতে পারেন। এটি একটি হালকা বা গাঢ় বৈকল্পিক তৈরি করতে সাদা বা কালো রঙের সাথে একটি রঙ মেশানোর জন্য দরকারী।

color-mix() ব্যবহার করার জন্য, আপনাকে দুটি রঙকে সংজ্ঞায়িত করতে হবে, আপনি কীভাবে তাদের মিশ্রিত করতে চান (ইন্টারপোলেশন পদ্ধতি), এবং আপনি প্রতিটি রঙের কতটা চান।

রঙের স্থানগুলির জন্য যেগুলির একটি আভা রয়েছে, আপনি রঙ চাকাটির চারপাশে কোন পথে যেতে চান তাও আপনি সিদ্ধান্ত নিতে পারেন। ডিফল্ট হল shorter পাথ ব্যবহার করা, কিন্তু আপনি longer বা increasing এবং decreasing বেছে নিতে পারেন।

একত্রে, রঙের স্থান এবং দিক হল ইন্টারপোলেশন পদ্ধতি।

আপনি মেশানোর জন্য প্রতিটি রঙের পরিমাণও প্রদান করতে পারেন।

আপেক্ষিক রঙ সিনট্যাক্স

আপনি আপেক্ষিক রঙের সিনট্যাক্স ব্যবহার করে একটি রঙের সাথে আরও সরাসরি কাজ করতে পারেন, যা আপনাকে যে কোনও রঙ নিতে দেয় এবং একটি নতুন রঙ তৈরি করতে এটিতে গণনা করতে দেয়।

h1 {
  color: oklch(from red l c h);
}

oklch() ফাংশন ব্যবহার করার অর্থ হল আপনি হালকাতা, ক্রোমা এবং হিউ চ্যানেলের সাথে কাজ করবেন। কিওয়ার্ডের পরে from যেকোন সিনট্যাক্সে যেকোনো রঙ উল্লেখ করতে পারেন। এটি আপনাকে একটি অক্ষর হিসাবে ব্যবহার করার জন্য প্রতিটি চ্যানেলের মান দেয়। এটি কোনও সমন্বয় ছাড়াই একটি লাল রঙের সমাধান করবে।

সামঞ্জস্য করতে, আপনি চ্যানেলের মান পরিবর্তন করতে calc() ফাংশন ব্যবহার করতে পারেন, অথবা চ্যানেলটিকে সম্পূর্ণভাবে প্রতিস্থাপন করতে পারেন। এখানে আমরা একই red রঙ ব্যবহার করি, কিন্তু oklch(62% 0.25 29) দিয়ে সংজ্ঞায়িত করি।

h1 {
  color: oklch(from oklch(62% 0.25 29) calc(l / 2) c 180);
}

লাইটনেস চ্যানেল 62% / 2 , বা 31% ক্রোমা চ্যানেল অপরিবর্তিত, তাই এটি 0.25 । হিউ চ্যানেলটি 180 । এটি নতুন রঙ oklch(31% 0.25 180) , একটি নতুন গাঢ় সবুজ রঙ তৈরি করে।

আপনি প্রায়ই ইনপুট রঙ হিসাবে একটি কাস্টম সম্পত্তি ব্যবহার করা হবে. এটি আপনাকে গতিশীলভাবে রঙের বৈচিত্র তৈরি করতে দেয়।

আপনি যে কোনও রঙ ফাংশন দিয়ে এটি করতে পারেন এবং এটি রঙ ফাংশনগুলির সাথে এটি করা দরকারী যে চ্যানেলগুলি রয়েছে যা আপনি যে পরিবর্তনগুলি করতে চান তা বর্ণনা করে৷ উদাহরণস্বরূপ, যদি আপনি একটি রঙের হালকাতা সামঞ্জস্য করতে চান, তাহলে oklch বা hsl বেছে নিন, কারণ আপনি সরাসরি লাইটনেস চ্যানেল পরিবর্তন করতে পারেন।

h1 {
  color: oklch(from var(--primary-color) calc(l * 0.9) c h);
}

আপেক্ষিক রঙের সিনট্যাক্স, বা RCS ব্যবহার করে, আপনি আপনার সাইটের জন্য ব্যবহার করার জন্য রঙের একটি প্যালেট তৈরি করতে পারেন।

স্বরগ্রাম রং আউট

আপনার বিষয়বস্তু বিভিন্ন স্ক্রিনে দেখানো হবে যা প্রশস্ত গামুট রঙ সমর্থন করতে পারে বা নাও পারে। আপনি যদি এমন একটি রঙ নির্দিষ্ট করেন যা একটি স্ক্রীন দ্বারা সমর্থিত নয়, তাহলে এটি স্ক্রীনে প্রদর্শিত হতে পারে এমন একটি অনুরূপ রঙ খুঁজে পেতে গ্যামুট ম্যাপিং নামক একটি প্রক্রিয়ার মধ্য দিয়ে যাবে। আপনি যদি এই ক্ষেত্রে নির্দিষ্ট রং সংজ্ঞায়িত করতে চান, তাহলে আপনি color-gamut মিডিয়া ক্যোয়ারী ব্যবহার করতে পারেন।

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

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

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

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

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

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

নিচের কোনটি বৈধ রং?

rbga(400 0 1)
rbga হল rgba-এর একটি টাইপো এবং 400 এর চেয়ে বড় যা যাই হোক না কেন, এটিকে অবৈধ করে তোলে।
#0f08
🎉
#OOFZ2
এটি একটি হেক্স মান নয়, এটি শুধুমাত্র 5টি সংখ্যা এবং এতে একটি Z রয়েছে, এটিকে অবৈধ করে তোলে৷
rgb(255, 0, 0)
🎉
hsl(180deg 50% 50%)
🎉
hotpink
🎉

অবৈধ এইচএসএল রঙ চিহ্নিত করুন।

hsl(5, 0%, 90%)
এটি একটি বৈধ এইচএসএল মান।
hsl(.5turn 40% 60%)
এটি একটি বৈধ এইচএসএল মান।
hsl(0, 0, 0)
🎉 আপনি এটি খুঁজে পেয়েছেন, 2য় এবং 3য় মান শতাংশ হওয়া উচিত।
hsl(2rad 50% 50%)
এটি একটি বৈধ এইচএসএল মান।
hsl(0 0% 0% / 20%)
এটি একটি বৈধ এইচএসএল মান।

সম্পদ