CSS কালার 4 ওয়েবে বিস্তৃত গামুট রঙের সরঞ্জাম এবং ক্ষমতা নিয়ে আসে: আরও রঙ, ম্যানিপুলেশন ফাংশন এবং আরও ভাল গ্রেডিয়েন্ট।
25 বছরেরও বেশি সময় ধরে , sRGB (স্ট্যান্ডার্ড লাল সবুজ নীল) হল CSS গ্রেডিয়েন্ট এবং রঙের জন্য একমাত্র কালার গামুট , যার মধ্যে rgb() , hsl() এবং হেক্সের মতো রঙের স্থান অফার রয়েছে। এটি প্রদর্শনের মধ্যে সবচেয়ে সাধারণ রঙ স্বরগ্রাম ক্ষমতা; একটি সাধারণ হর আমরা এই স্বরগ্রামের মধ্যে রঙ নির্দিষ্ট করতে খুব অভ্যস্ত হয়েছি।
যেহেতু ডিসপ্লেগুলি রঙের বিস্তৃত পরিসর দেখাতে আরও সক্ষম হয়ে ওঠে, CSS-এর এই বিস্তৃত পরিসরের মধ্যে থেকে রঙগুলি নির্দিষ্ট করার একটি উপায় প্রয়োজন৷ বর্তমান রঙের বিন্যাসে বিস্তৃত রঙের পরিসরের জন্য কোনো ভাষা নেই।
যদি CSS কখনো আপডেট না হয়, তাহলে এটি চিরকালের জন্য 90-এর দশকের রঙের পরিসরে আটকে থাকবে, ছবি এবং ভিডিওতে পাওয়া বিস্তৃত স্বরলিপি অফারগুলির সাথে মেলে না। আটকে আছে , মানুষের চোখ দেখতে পায় মাত্র 30% রঙ দেখাচ্ছে। এই ফাঁদ থেকে বাঁচতে সাহায্য করার জন্য CSS কালার লেভেল 4কে ধন্যবাদ; মূলত Lea Verou এবং Chris Liley দ্বারা লেখা।
ক্রোম 111 থেকে CSS কালার 4 গ্যামুট এবং কালার স্পেসগুলির জন্য সমর্থন, সাফারিতে যোগদান করা যারা 2016 সাল থেকে display-p3 এর জন্য সমর্থন করে। CSS এখন HD (হাই ডেফিনিশন) ডিসপ্লে সমর্থন করতে পারে, HD গামুট থেকে রঙ নির্দিষ্ট করার পাশাপাশি বিশেষীকরণের সাথে রঙের স্পেস অফার করে। এই গাইডটি ব্যাখ্যা করবে কিভাবে আপনি রঙের এই নতুন জগতের সুবিধা নিতে শুরু করতে পারেন।
নিজের জন্য এটি চেষ্টা করুন
সমর্থনকারী ব্রাউজারগুলিতে, বাছাই করার জন্য আরও 50% রঙ রয়েছে! আপনি ভেবেছিলেন 16 মিলিয়ন রঙগুলি অনেকের মতো শোনাচ্ছে, অপেক্ষা করুন যতক্ষণ না আপনি দেখতে পাচ্ছেন যে এই নতুন স্থানগুলির মধ্যে কতগুলি রঙ দেখাতে পারে৷ এছাড়াও, পর্যাপ্ত বিট-গভীরতা না থাকায় ব্যান্ড করা সমস্ত গ্রেডিয়েন্ট সম্পর্কে চিন্তা করুন, এটিও সমাধান হয়ে গেছে।
আরও রঙের পাশাপাশি , তর্কযোগ্যভাবে সবচেয়ে উজ্জ্বল রঙের জন্য ডিসপ্লে সক্ষম , নতুন রঙের স্থানগুলি রঙ সিস্টেম পরিচালনা এবং তৈরি করার জন্য অনন্য সরঞ্জাম এবং পদ্ধতি সরবরাহ করে। উদাহরণস্বরূপ, এখন আমাদের এইচএসএল এবং এর "লাইটনেস" চ্যানেল ছিল, যা সেরা ওয়েব ডেভেলপারদের ছিল। এখন CSS-এ, আমাদের কাছে LCH এর "অনুভূতিগত হালকাতা " আছে।
উপরন্তু, গ্রেডিয়েন্ট এবং মিক্সিং কিছু আপগ্রেড পায়: কালার স্পেস সাপোর্ট, হিউ ইন্টারপোলেশন অপশন এবং কম ব্যান্ডিং। নিম্নলিখিত চিত্রটি কিছু মিশ্রণ আপগ্রেড দেখায়। শীর্ষ দুটি রঙের মিশ্রণ sRGB-তে রয়েছে। নীচের দুটি রঙের মিশ্রণ ডিসপ্লে p3 এ রয়েছে। ডিসপ্লে p3 এর আরও উজ্জ্বল রঙ রয়েছে এবং মিশ্রণগুলি মাঝখানে সম্পূর্ণ কালো এবং সাদা হয়। যেখানে sRGB কে কিছুটা অসম্পৃক্ত দেখায় এবং মাঝখানের মিশ্রণগুলি সম্পূর্ণ কালো বা সাদা ফলাফল নয়।
https://codepen.io/web-dot-dev/pen/poZgXQb
এই গাইডটি কভার করবে যে রঙটি কোথায় ছিল, কোথায় যাচ্ছে এবং কীভাবে CSS ওয়েব ডেভেলপারদের রঙ পরিচালনা করতে সক্ষম করবে এবং সমর্থন করবে।
ওভারভিউ
রঙ এবং ওয়েবের সমস্যা হল যে সিএসএস হাই ডেফিনেশন রেডি নয়, যখন বেশিরভাগ লোকের পকেটে, ল্যাপ বা দেয়ালে মাউন্ট করা ডিসপ্লেগুলি চওড়া স্বরগ্রাম, হাই ডেফিনেশন কালার রেডি। ডিসপ্লেগুলির রঙের ক্ষমতা CSS এর চেয়ে দ্রুত বৃদ্ধি পেয়েছে, এখন CSS ধরার জন্য এখানে রয়েছে।
শুধু "আরো রং" ছাড়াও আরও অনেক কিছু আছে। এই নিবন্ধের শেষে আপনি আরও রঙ নির্দিষ্ট করতে, গ্রেডিয়েন্ট উন্নত করতে এবং প্রতিটি কাজের জন্য সেরা রঙের স্থান এবং রঙের গামুট বাছাই করতে সক্ষম হবেন।
একটি রঙ স্বরগ্রাম কি?
একটি স্বরগ্রাম কিছু আকারের প্রতিনিধিত্ব করে। "মিলিয়ন কালার" শব্দটি হল একটি ডিসপ্লের স্বরগ্রাম, বা এটি থেকে বেছে নেওয়া রঙের পরিসর সম্পর্কে একটি মন্তব্য। নীচের ছবিতে, তিনটি গামুট তুলনা করা হয়েছে, এবং আকার যত বড় হবে তত বেশি রঙ অফার করে।
একটি রঙ স্বরগ্রাম এছাড়াও একটি নাম থাকতে পারে. একটি বাস্কেটবল বনাম একটি বেসবল বা একটি ভেন্টে কফি কাপ বনাম একটি গ্র্যান্ডের মত; আকারের জন্য একটি নাম মানুষকে যোগাযোগ করতে সাহায্য করতে পারে। এই কালার গামুট নামগুলি শেখা আপনাকে যোগাযোগ করতে এবং দ্রুত রঙের পরিসর বুঝতে সাহায্য করে।
এই নিবন্ধটি আপনাকে সাতটি নতুন গ্যামুটের সাথে পরিচয় করিয়ে দেবে, সবগুলোই sRGB-এর চেয়ে বিস্তৃত পরিসরের সাথে, এবং কোনটি ব্যবহার করতে হবে তা চয়ন করতে আপনাকে সাহায্য করার জন্য তাদের বিভিন্ন বৈশিষ্ট্য বর্ণনা করবে:
মানুষের চাক্ষুষ স্বরগ্রাম
রঙ স্বরগ্রাম প্রায়ই মানুষের চাক্ষুষ স্বরগ্রাম সঙ্গে তুলনা করা হয়; সম্পূর্ণ রঙ আমরা বিশ্বাস করি মানুষের চোখ দেখতে পারে। HVS কে প্রায়শই একটি ক্রোমাটিসিটি ডায়াগ্রাম দিয়ে চিত্রিত করা হয়, যেমন:
বাইরের আকৃতি হল যা আমরা মানুষ হিসাবে দেখতে পারি এবং ভিতরের ত্রিভুজটি হল rgb() ফাংশন পরিসীমা, ওরফে sRGB রঙের স্থান।
আপনি যেমন উপরে ত্রিভুজ দেখেছেন, গামুট আকারের তুলনা করছেন, তেমনি আপনি নীচের ত্রিভুজগুলি পাবেন। রঙ গামুট সম্পর্কে যোগাযোগ করার এবং তাদের তুলনা করার এই শিল্পের উপায়।
একটি রঙ স্থান কি?
রঙের স্থানগুলি হল একটি স্বরগ্রামের বিন্যাস, একটি আকৃতি এবং রঙগুলি অ্যাক্সেস করার একটি পদ্ধতি স্থাপন করে। অনেকগুলি কিউব বা সিলিন্ডারের মতো সাধারণ 3D আকারের। এই রঙের বিন্যাস নির্ধারণ করে যে কোন রঙগুলি একে অপরের পাশে থাকবে এবং কীভাবে অ্যাক্সেসিং এবং ইন্টারপোলেটিং রঙগুলি কাজ করবে।
আরজিবি একটি আয়তক্ষেত্রাকার রঙের স্থানের মতো, যেখানে 3টি অক্ষে স্থানাঙ্ক নির্দিষ্ট করে রঙগুলি অ্যাক্সেস করা হয়। এইচএসএল হল একটি নলাকার রঙের স্থান , যেখানে রঙগুলি একটি হিউ অ্যাঙ্গেল দিয়ে অ্যাক্সেস করা হয় এবং 2টি অক্ষে স্থানাঙ্কিত হয়
লেভেল 4 স্পেসিফিকেশন পূর্বে শেয়ার করা 7টি নতুন গামুট থেকে রঙ খোঁজার জন্য 12টি নতুন রঙের স্থান প্রবর্তন করে:
- sRGB লিনিয়ার
- LCH
- okLCH
- ল্যাব
- ওকেল্যাব
- প্রদর্শন p3
- Rec2020
- a98 আরজিবি
- প্রোফোটো আরজিবি
- XYZ
- XYZ d50
- XYZ d65
এগুলি পূর্বে উপলব্ধ 4টি রঙের স্থান ছাড়াও:
রঙ স্বরগ্রাম এবং রঙ স্থান সারাংশ
একটি রঙের স্থান হল রঙের একটি ম্যাপিং যেখানে একটি রঙ স্বরগ্রাম হল রঙের একটি পরিসর। একটি রঙের স্বরগ্রামকে মোট কণা হিসাবে বিবেচনা করুন এবং একটি রঙের স্থানকে একটি বোতল হিসাবে বিবেচনা করুন যা কণার এই পরিসীমাকে ধরে রাখতে তৈরি করা হয়েছে।
এখানে আলেক্সি আরডভের একটি ইন্টারেক্টিভ ভিজ্যুয়াল রয়েছে যা রঙের স্থানগুলি প্রদর্শন করে। এই ডেমোতে পয়েন্ট করুন, টেনে আনুন এবং জুম করুন। অন্যান্য স্থানগুলির একটি ভিজ্যুয়ালাইজেশন দেখতে রঙের স্থান পরিবর্তন করুন।
- কম পরিসর বা সংকীর্ণ স্বরগ্রাম বনাম উচ্চ পরিসর বা প্রশস্ত স্বরগ্রামের মতো রঙের একটি পরিসর সম্পর্কে কথা বলতে কালার গামুট ব্যবহার করুন।
- রঙের বিন্যাস সম্পর্কে কথা বলতে রঙের স্পেস ব্যবহার করুন, একটি রঙ নির্দিষ্ট করতে ব্যবহৃত বাক্য গঠন, রঙকে ম্যানিপুলেট করুন এবং রঙের মাধ্যমে ইন্টারপোলেট করুন।
কীভাবে আরও রঙ, নতুন স্থান এবং ডিবাগ ফলাফলগুলি অ্যাক্সেস করবেন
CSS Color 4 CSS এবং রঙের জন্য একগুচ্ছ নতুন বৈশিষ্ট্য এবং টুলের রূপরেখা দেয়। প্রথমত, এই নতুন বৈশিষ্ট্যগুলির আগে রঙ কোথায় ছিল তার সংক্ষিপ্ত বিবরণ৷ তারপর নতুন রঙের স্থান, বাক্য গঠন এবং সরঞ্জামগুলির একটি ওভারভিউ।
নিম্নলিখিত কোডপেন সমস্ত নতুন এবং পুরানো রঙের সিনট্যাক্স একসাথে দেখায়:
ক্লাসিক রঙের স্থানগুলির একটি পর্যালোচনা
2000 এর দশক থেকে, আপনি যেকোন CSS বৈশিষ্ট্যের জন্য নিম্নলিখিতগুলি ব্যবহার করতে সক্ষম হয়েছেন যা একটি মান হিসাবে একটি রঙ গ্রহণ করে: হেক্সাডেসিমাল (হেক্স সংখ্যা), rgb() , rgba() , hotpink মতো নাম অনুসারে বা currentColor এর মতো কীওয়ার্ডগুলির সাথে। 2010 সালের দিকে, আপনার ব্রাউজারের উপর নির্ভর করে, CSS hsl() রং ব্যবহার করতে পারে। তারপরে 2017 সালে, আলফা সহ হেক্স উপস্থিত হয়েছিল। সর্বশেষ, সম্প্রতি, hwb() ব্রাউজারে সমর্থন পেতে শুরু করেছে।
এই সমস্ত ক্লাসিক কালার স্পেস একই স্বরগ্রামের মধ্যে রেফারেন্স রঙ, sRGB।
হেক্স
হেক্স কালারস্পেস হেক্সাডেসিমেল সংখ্যা সহ R, G, B এবং A নির্দিষ্ট করে। নিম্নলিখিত কোড উদাহরণগুলি এই সিনট্যাক্সটি লাল, সবুজ এবং নীল প্লাস অপাসিটি নির্দিষ্ট করতে পারে এমন সমস্ত উপায় দেখায়।
.valid-css-hex-colors {
/* classic */
--3-digits: #49b;
--6-digits: #4499bb;
/* hex with opacity */
--4-digits-opaque: #f9bf;
--8-digits-opaque: #ff99bbff;
--4-digits-with-opacity: #49b8;
--8-digits-with-opacity: #4499bb88;
}
আরজিবি
আরজিবি কালার স্পেসে লাল, সবুজ এবং নীল চ্যানেলে সরাসরি অ্যাক্সেস রয়েছে। এটি 0 থেকে 255 বা শতাংশ হিসাবে 0 থেকে 100 এর মধ্যে একটি পরিমাণ নির্দিষ্ট করার অনুমতি দেয়। এই সিনট্যাক্সটি কিছু সিনট্যাক্স স্বাভাবিককরণের নির্দিষ্টকরণের আগে ছিল, তাই আপনি বন্য অবস্থায় কমা এবং নো-কমা সিনট্যাক্স দেখতে পাবেন। এগিয়ে যাওয়া, কমা আর প্রয়োজন নেই।
.valid-css-rgb-colors {
--classic: rgb(64, 149, 191);
--modern: rgb(64 149 191);
--percents: rgb(25% 58% 75%);
--classic-with-opacity-percent: rgba(64, 149, 191, 50%);
--classic-with-opacity-decimal: rgba(64, 149, 191, .5);
--modern-with-opacity-percent: rgb(64 149 191 / 50%);
--modern-with-opacity-decimal: rgb(64 149 191 / .5);
--percents-with-opacity-percent: rgb(25% 58% 75% / 50%);
--percents-with-opacity-decimal: rgb(25% 58% 75% / 50%);
--empty-channels: rgb(none none none);
}
এইচএসএল
মানুষের ভাষা এবং যোগাযোগের দিকে নিজেকে অভিমুখী করার জন্য প্রথম রঙের স্থানগুলির মধ্যে একটি, HSL (হিউ স্যাচুরেশন এবং লাইটনেস) sRGB গামুটে সমস্ত রঙ অফার করে যখন আপনার মস্তিষ্কের লাল, সবুজ এবং নীল কীভাবে যোগাযোগ করে তা জানার প্রয়োজন হয় না। আরজিবি-র মতো, এটিতেও মূলত সিনট্যাক্সে কমা ছিল, কিন্তু সামনের দিকে, কমা আর প্রয়োজন নেই।
.valid-css-hsl-colors {
--classic: hsl(200deg, 50%, 50%);
--modern: hsl(200 50% 50%);
--classic-with-opacity-percent: hsla(200deg, 50%, 50%, 50%);
--classic-with-opacity-decimal: hsla(200deg, 50%, 50%, .5);
--modern-with-opacity-percent: hsl(200 50% 50% / 50%);
--modern-with-opacity-decimal: hsl(200 50% 50% / .5);
/* hueless and no saturation */
--empty-channels-white: hsl(none none 100%);
--empty-channels-black: hsl(none none 0%);
}
HWB
আর একটি sRGB গামুট কালার স্পেস যা মানুষ কীভাবে রঙকে বর্ণনা করে তা হল HWB (আভা, শুভ্রতা, কালোত্ব)। লেখকরা তাদের পছন্দসই রঙ খুঁজে পেতে সাদা বা কালো রঙের রঙ বেছে নিতে পারেন।
.valid-css-hwb-colors {
--modern: hwb(200deg 25% 25%);
--modern2: hwb(200 25% 25%);
--modern-with-opacity-percent: hwb(200 25% 25% / 50%);
--modern-with-opacity-decimal: hwb(200 25% 25% / .5);
/* hueless and no saturation */
--empty-channels-white: hwb(none 100% none);
--empty-channels-black: hwb(none none 100%);
}
নতুন ওয়েব রঙ স্পেস দেখা
নিম্নলিখিত রঙের স্থানগুলি sRGB এর চেয়ে বড় গ্যামুটগুলিতে অ্যাক্সেস অফার করে। ডিসপ্লে-পি3 কালার স্পেস RGB-এর তুলনায় প্রায় দ্বিগুণ রঙের অফার করে, যেখানে Rec2020 ডিসপ্লে-p3-এর থেকে প্রায় দ্বিগুণ অফার করে। যে অনেক রং!
color() ফাংশন
নতুন color() ফাংশনটি যেকোন রঙের স্থানের জন্য ব্যবহার করা যেতে পারে যা R, G এবং B চ্যানেলের সাথে রঙ নির্দিষ্ট করে। color() প্রথমে একটি কালার স্পেস প্যারামিটার নেয়, তারপর আরজিবি এবং ঐচ্ছিকভাবে কিছু আলফার জন্য চ্যানেল মানগুলির একটি সিরিজ।
আপনি দেখতে পাবেন অনেক নতুন কালার স্পেস এই ফাংশনটি ব্যবহার করে কারণ rgb , srgb , hsl , hwb , ইত্যাদির মতো বিশেষ ফাংশন থাকার ফলে, একটি দীর্ঘ তালিকায় ক্রমবর্ধমান ছিল, রঙের স্থানটি একটি প্যারামিটার হওয়া সহজ।
পেশাদার
- RGB চ্যানেল ব্যবহার করে এমন কালার স্পেস অ্যাক্সেস করার জন্য একটি স্বাভাবিক স্থান।
- যেকোনো প্রশস্ত স্বরগ্রাম RGB ভিত্তিক রঙের স্থান পর্যন্ত স্কেল করতে পারে।
কনস
- HSL, HWB, LCH, okLCH, বা okLAB-এর সাথে কাজ করে না
.valid-css-color-function-colors {
--srgb: color(srgb 1 1 1);
--srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
--display-p3: color(display-p3 1 1 1);
--rec2020: color(rec2020 0 0 0);
--a98-rgb: color(a98-rgb 1 1 1 / 25%);
--prophoto: color(prophoto-rgb 0% 0% 0%);
--xyz: color(xyz 1 1 1);
}
রঙের মাধ্যমে sRGB()
এই কালারস্পেসটি rgb() এর মত একই বৈশিষ্ট্য প্রদান করে। এটি অতিরিক্তভাবে 0 এবং 1 এর মধ্যে দশমিক অফার করে, ঠিক 0% থেকে 100% এর মতো ব্যবহার করা হয়।
পেশাদার
- প্রায় সব ডিসপ্লে এই রঙের স্থানের পরিসরকে সমর্থন করে।
- ডিজাইন টুল সমর্থন।
কনস
- ধারণাগতভাবে রৈখিক নয় (যেমন
lch()হয়) - কোন প্রশস্ত স্বরগ্রাম রং.
- গ্রেডিয়েন্টগুলি প্রায়শই একটি মৃত অঞ্চলের মধ্য দিয়ে যায়।
.valid-css-srgb-colors {
--percents: color(srgb 34% 58% 73%);
--decimals: color(srgb .34 .58 .73);
--percents-with-opacity: color(srgb 34% 58% 73% / 50%);
--decimals-with-opacity: color(srgb .34 .58 .73 / .5);
/* empty */
--empty-channels-black: color(srgb none none none);
--empty-channels-black2: color(srgb);
}
রঙের মাধ্যমে রৈখিক sRGB()
RGB-এর এই রৈখিক বিকল্পটি অনুমানযোগ্য চ্যানেলের তীব্রতা প্রদান করে।
পেশাদার
- RGB চ্যানেলে সরাসরি অ্যাক্সেস, গেম ইঞ্জিন বা লাইট শোর মতো জিনিসগুলির জন্য সহজ।
কনস
- ইন্দ্রিয়গতভাবে রৈখিক নয়।
- কালো এবং সাদা প্রান্ত এ প্যাক করা হয়.
.valid-css-srgb-linear-colors {
--percents: color(srgb-linear 34% 58% 73%);
--decimals: color(srgb-linear .34 .58 .73);
--percents-with-opacity: color(srgb-linear 34% 58% 73% / 50%);
--decimals-with-opacity: color(srgb-linear .34 .58 .73 / .5);
/* empty */
--empty-channels-black: color(srgb-linear none none none);
--empty-channels-black2: color(srgb-linear);
}
গ্রেডিয়েন্টগুলি পরে বিশদভাবে আলোচনা করা হয়েছে, তবে তাদের পার্থক্যগুলিকে চিত্রিত করার জন্য একটি srgb এবং linear-srgb কালো থেকে সাদা গ্রেডিয়েন্ট দেখতে দ্রুত অর্থবহ:
LCH
এই পোস্টের প্রথম স্থান RGB স্বরগ্রামের বাইরে রং অ্যাক্সেস করার জন্য সিনট্যাক্স প্রবর্তন! এটি একটি ডিসপ্লের জন্য গামুট রঙ থেকে তৈরি করা খুব সহজ করার জন্যও প্রথম। এর কারণ হল যেকোন CIE স্পেস রঙ (lch, oklch, lab, oklab) সমগ্র মানুষের দৃশ্যমান রঙের বর্ণালীকে উপস্থাপন করতে সক্ষম।
এই কালারস্পেসটি মানুষের দৃষ্টিভঙ্গি অনুসারে তৈরি করা হয়েছে এবং এই রংগুলির যেকোনো একটি এবং আরও অনেক কিছু নির্দিষ্ট করার জন্য সিনট্যাক্স অফার করে। এলসিএইচ চ্যানেলগুলি হল লাইটনেস, ক্রোমা এবং হিউ। হিউ একটি কোণ হচ্ছে, যেমন HSL এবং HWB-তে। লাইটনেস হল 0 এবং 100 এর মধ্যে একটি মান, কিন্তু HSL এর হালকাতার মত নয়, এটি একটি বিশেষ, "অনুভূতিগতভাবে রৈখিক", মানবকেন্দ্রিক হালকাতা। ক্রোমা স্যাচুরেশন অনুরূপ; 0 থেকে 230 পর্যন্ত হতে পারে কিন্তু প্রযুক্তিগতভাবে সীমাহীন।
পেশাদার
- অনুমানযোগ্য রঙ ম্যানিপুলেশন অনুধাবনযোগ্যভাবে রৈখিক হওয়ার জন্য ধন্যবাদ, বেশিরভাগই ( oklch দেখুন)।
- পরিচিত চ্যানেল ব্যবহার করে।
- প্রায়শই প্রাণবন্ত গ্রেডিয়েন্ট থাকে।
কনস
- স্বরগ্রামের বাইরে যাওয়া সহজ।
- বিরল ক্ষেত্রে গ্রেডিয়েন্টের একটি সমন্বয় মধ্যবিন্দুর প্রয়োজন হতে পারে যাতে রঙের পরিবর্তন রোধ করা যায়।
.valid-css-lch-colors {
--percent-and-degrees: lch(58% 32 241deg);
--just-the-degrees: lch(58 32 241deg);
--minimal: lch(58 32 241);
--percent-opacity: lch(58% 32 241 / 50%);
--decimal-opacity: lch(58% 32 241 / .5);
/* chromaless and hueless */
--empty-channels-white: lch(100 none none);
--empty-channels-black: lch(none none none);
}
ল্যাব
CIE স্বরগ্রাম অ্যাক্সেস করার জন্য আরেকটি রঙের স্থান তৈরি করা হয়েছে, আবার একটি বোধগম্য লিনিয়ার লাইটনেস (L) মাত্রা সহ। LAB-তে A এবং B মানুষের রঙের দৃষ্টিভঙ্গির অনন্য অক্ষগুলিকে উপস্থাপন করে: লাল-সবুজ এবং নীল-হলুদ। যখন A কে একটি ধনাত্মক মান দেওয়া হয় তখন এটি লাল যোগ করে এবং 0 এর নিচে হলে সবুজ যোগ করে। যখন B একটি ধনাত্মক সংখ্যা দেওয়া হয় তখন এটি হলুদ যোগ করে, যেখানে নেতিবাচক মান নীলের দিকে থাকে।
পেশাদার
- ধারণাগতভাবে সামঞ্জস্যপূর্ণ গ্রেডিয়েন্ট।
- উচ্চ গতিশীল পরিসীমা.
কনস
- রঙ পরিবর্তনের জন্য সম্ভাব্য.
- মান পড়ার সময় লেখককে হস্তান্তর করা বা একটি রঙ অনুমান করা কঠিন।
.valid-css-lab-colors {
--percent-and-degrees: lab(58% -16 -30);
--minimal: lab(58 -16 -30);
--percent-opacity: lab(58% -16 -30 / 50%);
--decimal-opacity: lab(58% -16 -30 / .5);
/* chromaless and hueless */
--empty-channels-white: lab(100 none none);
--empty-channels-black: lab(none none none);
}
OKLCH
এই রঙের স্থান LCH সংশোধনকারী . এবং LCH এর মত, (L) বোধগম্যভাবে রৈখিক হালকাতা, ক্রোমার জন্য C এবং বর্ণের জন্য H প্রতিনিধিত্ব করতে থাকে।
আপনি যদি HSL বা LCH এর সাথে কাজ করেন তবে এই স্থানটি পরিচিত মনে হয়। H এর জন্য রঙের চাকাতে একটি কোণ চয়ন করুন, L সামঞ্জস্য করে একটি হালকাতা বা অন্ধকার পরিমাণ চয়ন করুন, কিন্তু তারপরে আমাদের কাছে স্যাচুরেশনের পরিবর্তে ক্রোমা রয়েছে। এগুলি মোটামুটি অভিন্ন ব্যতীত যে হালকাতা এবং ক্রোমার সামঞ্জস্যগুলি জোড়ায় আসে, অন্যথায় লক্ষ্য স্বরগ্রামের বাইরে গিয়ে উচ্চ ক্রোমা রঙের জন্য জিজ্ঞাসা করা সহজ হতে পারে।
পেশাদার
- নীল এবং বেগুনি রঙের সাথে কাজ করার সময় কোন আশ্চর্য নেই।
- বোধগম্যভাবে রৈখিক হালকাতা।
- পরিচিত চ্যানেল ব্যবহার করে।
- উচ্চ গতিশীল পরিসীমা.
- একটি আধুনিক রঙ চয়নকারী আছে - Evil Martians দ্বারা।
কনস
- স্বরগ্রামের বাইরে যাওয়া সহজ।
- নতুন এবং তুলনামূলকভাবে অনাবিষ্কৃত।
- কয়েকটি রঙ বাছাইকারী।
.valid-css-oklch-colors {
--percent-and-degrees: oklch(64% .1 233deg);
--just-the-degrees: oklch(64 .1 233deg);
--minimal: oklch(64 .1 233);
--percent-opacity: oklch(64% .1 233 / 50%);
--decimal-opacity: oklch(64% .1 233 / .5);
/* chromaless and hueless */
--empty-channels-white: oklch(100 none none);
--empty-channels-black: oklch(none none none);
}
ওকেল্যাব
এই স্থানটি LAB-এর জন্য সংশোধনমূলক । এটিকে ইমেজ প্রসেসিং কোয়ালিটির জন্যও অপ্টিমাইজ করা একটি স্পেস হিসেবে দাবি করা হয়েছে, যা আমাদের জন্য CSS-এ মানে গ্রেডিয়েন্ট এবং কালার ফাংশন ম্যানিপুলেশন কোয়ালিটি।
পেশাদার
- অ্যানিমেশন এবং ইন্টারপোলেশনের জন্য ডিফল্ট স্থান।
- বোধগম্যভাবে রৈখিক হালকাতা।
- LAB এর মত কোন হিউ শিফট নেই।
- ধারণাগতভাবে সামঞ্জস্যপূর্ণ গ্রেডিয়েন্ট।
কনস
- নতুন এবং তুলনামূলকভাবে অনাবিষ্কৃত।
- কয়েকটি রঙ বাছাইকারী।
.valid-css-oklab-colors {
--percent-and-degrees: oklab(64% -.1 -.1);
--minimal: oklab(64 -.1 -.1);
--percent-opacity: oklab(64% -.1 -.1 / 50%);
--decimal-opacity: oklab(64% -.1 -.1 / .5);
/* chromaless and hueless */
--empty-channels-white: oklab(100 none none);
--empty-channels-black: oklab(none none none);
}
ডিসপ্লে P3
অ্যাপল তাদের iMac-এ 2015 সাল থেকে সমর্থন করার পর থেকে ডিসপ্লে P3 গামুট এবং রঙের স্থান জনপ্রিয় হয়ে উঠেছে। অ্যাপল 2016 সাল থেকে CSS-এর মাধ্যমে ওয়েব পেজে ডিসপ্লে-p3 সমর্থন করে, অন্য যেকোনো ব্রাউজার থেকে পাঁচ বছর এগিয়ে। যদি sRGB থেকে আসে, তাহলে আপনি শৈলীগুলিকে একটি উচ্চ গতিশীল পরিসরে নিয়ে যাওয়ার সাথে সাথে কাজ শুরু করার জন্য এটি একটি দুর্দান্ত রঙের স্থান।
পেশাদার
- দুর্দান্ত সমর্থন, HDR প্রদর্শনের জন্য বেসলাইন হিসাবে বিবেচিত।
- sRGB এর থেকে 50% বেশি রঙ।
- DevTools একটি দুর্দান্ত রঙ চয়নকারী অফার করে।
কনস
- অবশেষে Rec2020 এবং CIE স্পেস দ্বারা অতিক্রম করা হবে।
.valid-css-display-p3-colors {
--percents: color(display-p3 34% 58% 73%);
--decimals: color(display-p3 .34 .58 .73);
--percent-opacity: color(display-p3 34% 58% 73% / 50%);
--decimal-opacity: color(display-p3 .34 .58 .73 / .5);
/* chromaless and hueless */
--empty-channels-black: color(display-p3 none none none);
--empty-channels-black2: color(display-p3);
}
Rec2020
Rec2020 হল UHDTV (আল্ট্রা-হাই-ডেফিনিশন টেলিভিশন) আন্দোলনের অংশ, 4k এবং 8k মিডিয়াতে ব্যবহারের জন্য বিস্তৃত রঙ সরবরাহ করে। Rec2020 হল আরেকটি আরজিবি ভিত্তিক স্বরগ্রাম, ডিসপ্লে-পি3 থেকে বড়, কিন্তু ডিসপ্লে পি3-এর মতো গ্রাহকদের মধ্যে প্রায় সাধারণ নয়।
পেশাদার
- আল্ট্রা এইচডি রং।
কনস
- ভোক্তাদের মধ্যে সাধারণ নয় (এখনও)।
- হ্যান্ডহেল্ড বা ট্যাবলেটে সাধারণত পাওয়া যায় না।
.valid-css-rec2020-colors {
--percents: color(rec2020 34% 58% 73%);
--decimals: color(rec2020 .34 .58 .73);
--percent-opacity: color(rec2020 34% 58% 73% / 50%);
--decimal-opacity: color(rec2020 .34 .58 .73 / .5);
/* chromaless and hueless */
--empty-channels-black: color(rec2020 none none none);
--empty-channels-black2: color(rec2020);
}
A98 RGB
Adobe 1998 RGB-এর জন্য সংক্ষিপ্ত, A98 RGB CMYK প্রিন্টার থেকে পাওয়া বেশিরভাগ রঙের বৈশিষ্ট্যের জন্য Adobe দ্বারা তৈরি করা হয়েছিল। এটি sRGB-এর চেয়ে বেশি রঙের অফার করে, বিশেষত সায়ান এবং সবুজ রঙে।
পেশাদার
- sRGB এবং ডিসপ্লে P3 রঙের স্থানের চেয়ে বড়।
কনস
- ডিজিটাল ডিজাইনারদের দ্বারা কাজ করা একটি সাধারণ স্থান নয়।
- অনেক লোকই CMYK থেকে প্যালেট পোর্ট করছে না।
.valid-css-a98-rgb-colors {
--percents: color(a98-rgb 34% 58% 73%);
--decimals: color(a98-rgb .34 .58 .73);
--percent-opacity: color(a98-rgb 34% 58% 73% / 50%);
--decimal-opacity: color(a98-rgb .34 .58 .73 / .5);
/* chromaless and hueless */
--empty-channels-black: color(a98-rgb none none none);
--empty-channels-black2: color(a98-rgb);
}
প্রোফোটো আরজিবি
কোডাক দ্বারা তৈরি, এই প্রশস্ত স্বরগ্রাম স্থানটি স্বতন্ত্রভাবে আল্ট্রা ওয়াইড রেঞ্জের প্রাথমিক রঙ এবং হালকাতা পরিবর্তন করার সময় ন্যূনতম রঙ পরিবর্তনের বৈশিষ্ট্যগুলি সরবরাহ করে। এটি 1980 সালে মাইকেল পয়েন্টার দ্বারা নথিভুক্ত বাস্তব-বিশ্বের পৃষ্ঠের রঙগুলির 100% কভার করার দাবিও করে।
পেশাদার
- হালকাতা পরিবর্তন করার সময় ন্যূনতম রঙ পরিবর্তন হয়।
- প্রাণবন্ত প্রাথমিক রং।
কনস
- এর প্রস্তাবিত রংগুলির প্রায় 13% কাল্পনিক , যার অর্থ তারা মানুষের দৃশ্যমান বর্ণালীর মধ্যে নেই।
.valid-css-prophoto-rgb-colors {
--percents: color(prophoto-rgb 34% 58% 73%);
--decimals: color(prophoto-rgb .34 .58 .73);
--percent-opacity: color(prophoto-rgb 34% 58% 73% / 50%);
--decimal-opacity: color(prophoto-rgb .34 .58 .73 / .5);
/* chromaless and hueless */
--empty-channels-black: color(prophoto-rgb none none none);
--empty-channels-black2: color(prophoto-rgb);
}
XYZ, XYZ-d50, XYZ-d65
CIE XYZ কালার স্পেস এমন সব রঙকে ধারণ করে যা গড় দৃষ্টিশক্তি সম্পন্ন ব্যক্তির কাছে দৃশ্যমান। এই কারণেই এটি অন্যান্য রঙের স্থানগুলির জন্য একটি আদর্শ রেফারেন্স হিসাবে ব্যবহৃত হয়। Y হল দীপ্তি, X এবং Z হল প্রদত্ত Y লুমিন্যান্সের মধ্যে সম্ভাব্য ক্রোমাস।
d50 এবং d65 এর মধ্যে পার্থক্য হল সাদা বিন্দু, যেখানে d50 d50 সাদা বিন্দু ব্যবহার করে এবং d65 d65 সাদা বিন্দু ব্যবহার করে।
পেশাদার
- রৈখিক-আলো অ্যাক্সেস সহজ ব্যবহারের ক্ষেত্রে আছে.
- শারীরিক রঙ মেশানোর জন্য দুর্দান্ত।
কনস
- lch, oklch, lab এবং oklab এর মতো উপলব্ধিগতভাবে রৈখিক নয়।
.valid-css-xyz-colors {
--percents: color(xyz 22% 26% 53%);
--decimals: color(xyz .22 .26 .53);
--percent-opacity: color(xyz .22 .26 .53 / 50%);
--decimal-opacity: color(xyz .22 .26 .53 / .5);
/* chromaless and hueless */
--empty-channels-black: color(xyz none none none);
--empty-channels-black2: color(xyz);
}
.valid-css-xyz-d50-colors {
--percents: color(xyz-d50 22% 26% 53%);
--decimals: color(xyz-d50 .22 .26 .53);
--percent-opacity: color(xyz-d50 .22 .26 .53 / 50%);
--decimal-opacity: color(xyz-d50 .22 .26 .53 / .5);
/* chromaless and hueless */
--empty-channels-black: color(xyz-d50 none none none);
--empty-channels-black2: color(xyz-d50);
}
.valid-css-xyz-d65-colors {
--percents: color(xyz-d65 22% 26% 53%);
--decimals: color(xyz-d65 .22 .26 .53);
--percent-opacity: color(xyz-d65 .22 .26 .53 / 50%);
--decimal-opacity: color(xyz-d65 .22 .26 .53 / .5);
/* chromaless and hueless */
--empty-channels-black: color(xyz-d65 none none none);
--empty-channels-black2: color(xyz-d65);
}
কাস্টম রঙের স্থান
CSS কালার 5 স্পেসিফিকেশনে ব্রাউজারকে একটি কাস্টম রঙের স্থান শেখানোর জন্য একটি পথও রয়েছে। এটি একটি আইসিসি প্রোফাইল যা ব্রাউজারকে বলে যে কীভাবে রঙগুলি সমাধান করতে হয়৷
@color-profile --foo {
src: url(path/to/custom.icc);
}
একবার লোড হয়ে গেলে, color() ফাংশন সহ এই কাস্টম প্রোফাইল থেকে রঙগুলি অ্যাক্সেস করুন এবং এর জন্য চ্যানেলের মানগুলি নির্দিষ্ট করুন।
.valid-css-color-from-a-custom-profile {
background: color(--foo 1 0 0);
}
কালার ইন্টারপোলেশন
অ্যানিমেশন, গ্রেডিয়েন্ট এবং রঙের মিশ্রণে এক রঙ থেকে অন্য রঙে রূপান্তর পাওয়া যায়। এই রূপান্তরটি সাধারণত একটি প্রারম্ভিক রঙ এবং একটি শেষ রঙ হিসাবে নির্দিষ্ট করা হয়, যেখানে ব্রাউজারটি তাদের মধ্যে অন্তর্নিহিত হবে বলে আশা করা হয়। এই ক্ষেত্রে ইন্টারপোলেট মানে তাত্ক্ষণিক একের পরিবর্তে একটি মসৃণ রূপান্তর তৈরি করার জন্য মধ্যে-মধ্যে রঙের একটি সিরিজ তৈরি করা।
গ্রেডিয়েন্ট সহ, ইন্টারপোলেশন একটি আকৃতি বরাবর রঙের একটি সিরিজ। অ্যানিমেশনের সাথে এটি সময়ের সাথে সাথে রঙের একটি সিরিজ।
@keyframes bg {
0%, 100% {
background: orange;
}
25% {
background: magenta;
}
50% {
background: lime;
}
75% {
background: cyan;
}
}
.circle {
animation: bg 5s ease-in-out infinite;
}
একটি গ্রেডিয়েন্টের সাথে, মধ্যের রঙগুলি একবারে দেখানো হয়:
কালার ইন্টারপোলেশনে নতুন কি
নতুন গামুট এবং রঙের স্থান যোগ করার সাথে সাথে ইন্টারপোলেশনের জন্য নতুন অতিরিক্ত বিকল্প রয়েছে। in hsl একটি রঙ নীল থেকে সাদাতে রূপান্তর করার ফলে sRGB থেকে খুব আলাদা কিছু পাওয়া যায়।
.classic-gradient-in-srgb {
background: linear-gradient(to right, blue, white);
}
.new-gradient-in-hsl {
background: linear-gradient(in hsl to right, blue, white);
}
কোডপেন ডেমো দেখতে পাচ্ছেন না?
তাহলে কি হবে যদি আপনি একটি স্থানের একটি রঙ থেকে সম্পূর্ণ ভিন্ন স্থানের একটি রঙে রূপান্তর করেন:
.gradient {
/* oklab will be the common space */
background: linear-gradient(to right, lch(29.6 131 301), hsl(330 100% 50%));
}
.lch {
/* lch is specified */
background: linear-gradient(in lch to right, lch(29.6 131 301), hsl(330 100% 50%));
}
কোডপেন ডেমো দেখতে পাচ্ছেন না?
সৌভাগ্যক্রমে আপনার জন্য, রঙ 4 স্পেসিফিকেশনে ব্রাউজারগুলির জন্য এই ক্রস কালার স্পেস ইন্টারপোলেশনগুলি কীভাবে পরিচালনা করা যায় তার নির্দেশাবলী রয়েছে। উপরের ক্ষেত্রে .gradient এর ক্ষেত্রে, ব্রাউজারগুলি রঙের পার্থক্যকারী স্থানগুলি লক্ষ্য করবে এবং ডিফল্ট রঙের স্থান oklab ব্যবহার করবে। আপনি ভাবতে পারেন যে ব্রাউজারটি রঙের স্থান হিসাবে lch ব্যবহার করবে, যেহেতু এটি প্রথম রঙ, কিন্তু এটি করে না এবং সেই কারণে আমি একটি দ্বিতীয় তুলনা গ্রেডিয়েন্ট .lch দেখাচ্ছি। .lch গ্রেডিয়েন্ট হল lch রঙের স্থান থেকে একটি গ্রেডিয়েন্ট।
16-বিট রঙের জন্য কম ব্যান্ডিং ধন্যবাদ
এই রঙের কাজ করার আগে, সমস্ত রং একটি 32-বিট পূর্ণসংখ্যার মধ্যে সংরক্ষিত ছিল যাতে চারটি চ্যানেলের প্রতিনিধিত্ব করা হয়; লাল, সবুজ, নীল এবং আলফা। এটি প্রতি চ্যানেলে 8-বিট এবং 2^24 সম্ভাব্য রঙ (আলফা উপেক্ষা করে)। 2 ^ 24 = 16,777,216, "মিলিয়ন রঙ।"
এই রঙের কাজ করার পরে, চারটি 16-বিট ফ্লোটিং পয়েন্টের মান , প্রতিটি চ্যানেলের নিজস্ব ফ্লোট রয়েছে যা একসাথে lumped হচ্ছে না। এটি মোট ডেটার 64-বিট, যার ফলে লক্ষাধিক রঙেরও বেশি।
এইচডি কালার সাপোর্ট করার জন্য এই কাজটি প্রয়োজন। এটি সংরক্ষণ করা যেতে পারে এমন রঙের তথ্যের পরিমাণ বাড়ায়, যার একটি চমৎকার পার্শ্ব প্রতিক্রিয়া রয়েছে যার অর্থ ব্রাউজারটির গ্রেডিয়েন্টে ব্যবহার করার জন্য আরও রঙ রয়েছে।
গ্রেডিয়েন্ট ব্যান্ডিং হল যখন একটি মসৃণ গ্রেডিয়েন্ট তৈরি করার জন্য পর্যাপ্ত রং না থাকে এবং রঙের "স্ট্রিপ" দৃশ্যমান হয়। উচ্চ রেজোলিউশনের রঙে আপগ্রেড করার মাধ্যমে ব্যান্ডিং ব্যাপকভাবে প্রশমিত হয়।
ইন্টারপোলেশন নিয়ন্ত্রণ
দুটি বিন্দুর মধ্যে সংক্ষিপ্ততম দূরত্ব সর্বদা একটি সরল রেখা। কালার ইন্টারপোলেশনের সাথে, ব্রাউজার ডিফল্টভাবে ছোট রুট নেয়। একটি দৃশ্যকল্প বিবেচনা করুন যেখানে একটি এইচএসএল রঙের সিলিন্ডারে দুটি বিন্দু রয়েছে। একটি গ্রেডিয়েন্ট দুটি বিন্দুর মধ্যে রেখা বরাবর ভ্রমণ করে তার রঙের ধাপগুলি অর্জন করে।
linear-gradient(to right, #94e99c, #e06242)
রঙের স্টপের মধ্যে একটি লাইন সহ একটি HSL সিলিন্ডারের টপ ডাউন ভিউ
উপরের গ্রেডিয়েন্ট লাইনটি সবুজ রঙ থেকে লালচে রঙের মাঝখানে সোজা হয়ে যায়, রঙের স্থানের মাঝখান দিয়ে যায়। যদিও উপরেরটি প্রাথমিক বোঝার জন্য সাহায্য করার জন্য দুর্দান্ত, তবে এটি ঠিক কী ঘটে তা নয়। এখানে নিম্নলিখিত কোডপেনের গ্রেডিয়েন্ট রয়েছে, এবং এটি পরিষ্কারভাবে মাঝখানে সাদা নয় যেমন মক ডেমোনস্ট্রেশন দেখানো হয়েছে।
গ্রেডিয়েন্টের মাঝামাঝি এলাকাটি যদিও তার স্পন্দন হারিয়েছে। এর কারণ হল সবচেয়ে প্রাণবন্ত রঙগুলি রঙের স্থানের আকৃতির প্রান্তে থাকে, কেন্দ্রে নয় যেখানে ইন্টারপোলেশন কাছাকাছি ভ্রমণ করেছিল। এটি সাধারণত " মৃত অঞ্চল " হিসাবে উল্লেখ করা হয়। এটি ঠিক করার বা কাজ করার কয়েকটি উপায় রয়েছে।
ডেড জোন এড়াতে আরও গ্রেডিয়েন্ট স্টপ নির্দিষ্ট করা
ডেড জোন এড়ানোর একটি কৌশল হল গ্রেডিয়েন্টে অতিরিক্ত রঙের স্টপ যোগ করা যা ইচ্ছাকৃতভাবে একটি রঙের স্থানের প্রাণবন্ত রেঞ্জের মধ্যে থাকতে ইন্টারপোলেশনকে গাইড করে। এটি আক্ষরিক অর্থে একটি কাজ, কারণ অতিরিক্ত স্টপগুলি এটিকে মৃত অঞ্চলের চারপাশে কাজ করতে সহায়তা করে।
এরিক কেনেডি দ্বারা তৈরি একটি গ্রেডিয়েন্ট টুল রয়েছে যা আপনার জন্য অতিরিক্ত রঙের স্টপ গণনা করে, এমনকি রঙের স্থানগুলিতেও যেগুলি এর দিকে অভিকর্ষের প্রবণতা রয়েছে সেখানে আপনাকে মৃত অঞ্চল এড়াতে সহায়তা করার জন্য। এটি ব্যবহার করে, প্রথম উদাহরণ থেকে একই রং পাস করা কিন্তু HSL এ রঙের ইন্টারপোলেশন পরিবর্তন করে, এটি এটি তৈরি করে:
linear-gradient(90deg, #94e99c, #99e789, #ace67d, #c4e472, #e2e366, #e2bf5a, #e1934e, #e06242);
9টি রঙের স্টপ সমন্বিত একটি বাঁকা লাইন সহ একটি HSL সিলিন্ডারের টপ ডাউন ভিউ
নির্দেশিত স্টপ পয়েন্টগুলির সাথে, ইন্টারপোলেশনটি আর একটি সরল রেখা নয়, তবে এটি মৃত অঞ্চলের চারপাশে বক্ররেখা দেখায়, যা স্যাচুরেশন বজায় রাখতে সাহায্য করে, যার ফলে অনেক বেশি প্রাণবন্ত গ্রেডিয়েন্ট হয়।
টুলটি একটি দুর্দান্ত কাজ করার সময়, আপনি যদি সিএসএস থেকে একই রকম বা আরও বেশি নিয়ন্ত্রণ পেতে পারেন?
কালার ইন্টারপোলেশনের নির্দেশনা
কালার 4-এ, হিউ ইন্টারপোলেশন কৌশল নিয়ন্ত্রণ করার ক্ষমতা যোগ করা হয়েছে এবং এটি মৃত অঞ্চলের চারপাশে (:উইঙ্ক:) একটি নতুন উপায়। একটি হিউ অ্যাঙ্গেল সম্পর্কে চিন্তা করুন এবং একটি 2 স্টপ গ্রেডিয়েন্ট বিবেচনা করুন যা শুধুমাত্র কোণ পরিবর্তন করে, উদাহরণস্বরূপ 140deg থেকে 240deg বর্ণ পরিবর্তন করে।
সংক্ষিপ্ত বনাম দীর্ঘ রঙের ইন্টারপোলেশন
গ্রেডিয়েন্টটি ডিফল্টভাবে shorter রুটটি গ্রহণ করবে যদি না আপনি এটিকে longer রুট নেওয়ার জন্য নির্দিষ্ট করেন। হিউ ইন্টারপোলেশন বিকল্পগুলি কোণ ঘূর্ণনকে নির্দেশ করে, যেমন কাউকে ডানের পরিবর্তে বাম দিকে ঘুরতে বলা (হে, জুলেন্ডার):
হিউ ইন্টারপোলেশন দূরত্বের উপরের চাক্ষুষ উদাহরণে, পার্থক্য চিত্রিত করার জন্য ছোট পথ এবং দীর্ঘ পথকে সিমুলেট করা হয়েছে। সংক্ষিপ্ত দূরত্বের মধ্যে কম বর্ণ রয়েছে কারণ এটি সম্ভাব্য ন্যূনতম দূরত্বের মধ্য দিয়ে ভ্রমণ করেছে, যেখানে দীর্ঘ দূরত্বটি আরও বেশি রঙের উপর দিয়ে ভ্রমণ করেছে।
ক্রমবর্ধমান বনাম হ্যু ইন্টারপোলেশন হ্রাস
কালার 4 -এ আরও দুটি হিউ ইন্টারপোলেশন কৌশল রয়েছে, তবে সেগুলি নলাকার রঙের স্থানগুলির জন্য একচেটিয়া। আগের উদাহরণ থেকে দুটি রঙের সাথে থাকা, ভিজ্যুয়াল এখন দেখায় কিভাবে বৃদ্ধি এবং হ্রাস কাজ করে।
উপরের কোডপেন প্রত্যাশিত ফলাফল প্রদর্শন করতে ColorJS ব্যবহার করেছে। জাভাস্ক্রিপ্ট লাইব্রেরি ছাড়া একই প্রভাব অর্জন করতে আপনি যে CSS লিখবেন তা হবে:
.longer-hue-interpolation-in-css {
background: linear-gradient(
to right in hsl longer hue,
hsl(180deg 100% 75%),
hsl(240deg 100% 75%)
);
}
.decreasing-hue-interpolation-in-css {
background: linear-gradient(
to right in hsl decreasing hue,
hsl(180deg 100% 75%),
hsl(240deg 100% 75%)
);
}
হিউ ইন্টারপোলেশন বন্ধ করার জন্য, এখানে একটি মজার খেলার মাঠ রয়েছে যেখানে আপনি 2টি রঙের স্টপের মধ্যে রঙ পরিবর্তন করতে পারেন এবং একটি হিউ ইন্টারপোলেশন পছন্দের প্রভাব দেখতে পারেন এবং সেইসাথে রঙের স্থানগুলি কীভাবে গ্রেডিয়েন্ট ফলাফল পরিবর্তন করে। প্রভাব খুব ভিন্ন হতে পারে; চারটি নতুন কৌশল সবেমাত্র আপনার রঙ টুলবেল্টে গেছে হিসাবে এটি বিবেচনা করুন.
বিভিন্ন রঙের ফাঁকে গ্রেডিয়েন্ট
প্রতিটি রঙের স্থান, তার অনন্য আকৃতি এবং রঙের বিন্যাস দেওয়া হলে, একটি ভিন্ন গ্রেডিয়েন্ট হবে। নীচের উদাহরণগুলি দেখুন, বিশেষ করে "নীল থেকে সাদা" এ। প্রতিটি রঙের স্থান কীভাবে আলাদাভাবে পরিচালনা করে তা দেখুন। লক্ষ্য করুন কতগুলি মাঝখানে বেগুনি হয়ে যায়, একে ইন্টারপোলেশনের সময় "হিউ শিফট" বলা হয়।
কোডপেন ডেমো দেখতে পাচ্ছেন না?
দেখানো চিত্রটি কোডপেনের অনেক উদাহরণের মধ্যে মাত্র 1টি। নিজের জন্য এগুলি দেখতে ক্যানারি বা সাফারি টেক প্রিভিউ চেষ্টা করা মূল্যবান।
এই স্থানগুলির কিছু গ্রেডিয়েন্ট অন্যদের তুলনায় বেশি প্রাণবন্ত হবে বা মৃত অঞ্চলের মধ্য দিয়ে কম ভ্রমণ করবে। lab প্যাক রঙের মতো স্পেসগুলিকে একত্রে স্যাচুরেশনের জন্য অপ্টিমাইজ করা হয়েছে, মানুষের জন্য hwb() এর মতো রঙ লেখার জন্য অপ্টিমাইজ করা স্থানগুলির বিপরীতে।
.hwb {
background: linear-gradient(to right, hwb(250 10% 10%), hwb(150 10% 10%));
}
.lab {
background: linear-gradient(to right, lab(30 59.4 -96), lab(80 -64 36.2));
}
উপরের ডেমো, ফলাফলে সূক্ষ্ম হলেও, ল্যাবের সাথে আরও সামঞ্জস্যপূর্ণ ইন্টারপোলেশন দেখায়। যদিও ল্যাবের সিনট্যাক্স পড়া সহজ নয়, সেখানে নেতিবাচক সংখ্যা রয়েছে যা rgb বা hsl থেকে আসার সময় খুব অপরিচিত। সুসংবাদ, আমরা একটি পরিচিত সিনট্যাক্সের জন্য hwb ব্যবহার করতে পারি তবে গ্রেডিয়েন্টটিকে সম্পূর্ণরূপে অন্য রঙের স্থান, যেমন oklab-এর মধ্যে অন্তর্নিহিত করতে বলব।
.hwb {
background: linear-gradient(in hwb to right, hwb(250 10% 10%), hwb(150 10% 10%));
}
.lab {
background: linear-gradient(in oklab to right, hwb(250 10% 10%), hwb(150 10% 10%));
}
কোডপেন ডেমো দেখতে পাচ্ছেন না?
এই উদাহরণটি hwb-এ একই রঙ ব্যবহার করে কিন্তু hwb বা oklab-এ ইন্টারপোলেশনের জন্য রঙের স্থান নির্দিষ্ট করে। উচ্চ কম্পন কিন্তু সম্ভাব্য মৃত অঞ্চল বা উজ্জ্বল দাগের জন্য hwb একটি দুর্দান্ত রঙের স্থান (উপরের উদাহরণে সায়ান হট স্পট দেখুন)। oklab অনুধাবনযোগ্যভাবে রৈখিক গ্রেডিয়েন্টের জন্য দুর্দান্ত যা স্যাচুরেটেড থাকে। এই বৈশিষ্ট্যটি অনেক মজার কারণ আপনি কোন গ্রেডিয়েন্টটি সবচেয়ে বেশি পছন্দ করেন তা দেখতে আপনি কয়েকটি ভিন্ন রঙের জায়গায় চেষ্টা করতে পারেন।
এখানে একটি কোডপেন গ্রেডিয়েন্ট এবং কালার স্পেস নিয়ে পরীক্ষা-নিরীক্ষা করছে, সম্ভাবনাগুলি অন্বেষণ করার জন্য কৌশলগুলি মিশ্রিত এবং মিল করছে। এমনকি কালো থেকে সাদাতে রূপান্তর প্রতিটি রঙের জায়গায় আলাদা!
কোডপেন ডেমো দেখতে পাচ্ছেন না?
স্বরগ্রাম ক্ল্যাম্পিং
এমন পরিস্থিতি রয়েছে যেখানে একটি রঙ স্বরগ্রামের বাইরে কিছু চাইতে পারে। নিম্নলিখিত রঙ বিবেচনা করুন:
rgb(300 255 255)
rgb কালার স্পেসে একটি কালার চ্যানেলের জন্য সর্বাধিক 255 , কিন্তু এখানে 300 লাল রঙের জন্য নির্দিষ্ট করা হয়েছে। কি ঘটেছে? স্বরগ্রাম ক্ল্যাম্পিং।
ক্ল্যাম্পিং হল যখন অতিরিক্ত তথ্য সরানো হয়। 300 হয়ে যাবে অভ্যন্তরীণভাবে 255 রঙের ইঞ্জিনে। রঙটি এখন তার স্থানের মধ্যে আটকানো হয়েছে।
একটি রঙের স্থান নির্বাচন করা হচ্ছে
অনেক লোক, এই রঙের স্থানগুলি এবং তাদের প্রভাবগুলি সম্পর্কে জানার পরে, অভিভূত বোধ করে এবং কোন "একটি" বেছে নেবে তা জানতে চায়। আমার অধ্যয়ন এবং অভিজ্ঞতা থেকে, আমি আমার সমস্ত কাজের জন্য এক রঙের স্থানকে একক হিসাবে দেখি না। প্রতিটি মুহূর্ত আছে যখন তারা পছন্দসই ফলাফল তৈরি করে।
যদি একটি সেরা স্থান ছিল, তাহলে এত নতুন স্থান চালু করা হবে না।
যাইহোক, আমি বলতে পারি যে CIE স্পেসগুলি — lab , oklab , lch এবং oklch — আমার শুরুর জায়গা৷ যদি তাদের ফলাফল আমি যা খুঁজছি তা না হয়, তাহলে আমি অন্যান্য স্থান পরীক্ষা করব। রং মেশানো এবং গ্রেডিয়েন্ট তৈরি করার জন্য, আমি oklab এর ডিফল্ট বিশেষ পছন্দের সাথে একমত। রঙ সিস্টেম এবং সামগ্রিক UI রঙের জন্য, আমি oklch পছন্দ করি।
এখানে কয়েকটি নিবন্ধ রয়েছে যেখানে লোকেরা এই নতুন রঙের স্থান এবং বৈশিষ্ট্যগুলি দিয়ে তাদের আপডেট করা রঙের কৌশলগুলি ভাগ করেছে৷ উদাহরণস্বরূপ, আন্দ্রে সিটনিক oklch এ চলে গেছে, হয়তো তারা আপনাকে একই কাজ করতে রাজি করবে:
- সিএসএসে ওকেএলসিএইচ: কেন আমরা আন্দ্রে সিটনিকের দ্বারা আরজিবি এবং এইচএসএল থেকে সরেছি
- Josh W. Comeau দ্বারা রঙ বিন্যাস
- ঠিক আছে, ক্রিস কোয়ারের ওকেএলসিএইচ
HD CSS রঙে স্থানান্তরিত হচ্ছে
প্রশস্ত স্বরগ্রাম প্রদর্শন সমর্থন করার জন্য আপনার ওয়েব প্রকল্পের রঙ আপডেট করার জন্য দুটি প্রধান কৌশল রয়েছে:
সাবলীল পতন
নতুন রঙের স্থানগুলি ব্যবহার করুন এবং ব্রাউজার এবং অপারেটিং সিস্টেমকে প্রদর্শন ক্ষমতার উপর ভিত্তি করে কোন রঙটি দেখাতে হবে তা নির্ধারণ করতে দিন।প্রগতিশীল বর্ধিতকরণ
ব্যবহারকারীর ব্রাউজারের ক্ষমতা মূল্যায়ন করতে@supportsএবং@mediaব্যবহার করুন, এবং শর্ত পূরণ হলে, বিস্তৃত স্বরগ্রাম রং প্রদান করুন।
যদি একটি ব্রাউজার display-p3 রঙ বুঝতে না পারে:
color: red;
color: color(display-p3 1 0 0);
যদি একটি ব্রাউজার display-p3 রঙ বুঝতে পারে:
color: red;
color: color(display-p3 1 0 0);
প্রতিটিরই সুবিধা এবং অসুবিধা রয়েছে। এখানে সুবিধা এবং অসুবিধাগুলির একটি দ্রুত তালিকা রয়েছে:
সাবলীল পতন
- পেশাদার
- সহজতম রুট।
- ব্রাউজারটি sRGB তে মানচিত্র বা ক্ল্যাম্প করবে যদি একটি প্রশস্ত স্বরগ্রাম প্রদর্শন না হয়, তাই দায়িত্ব ব্রাউজারের উপর।
- কনস
- ব্রাউজারটি আপনার পছন্দের নয় এমন একটি রঙে স্বরগ্রাম ক্ল্যাম্প বা গামুট মানচিত্র তৈরি করতে পারে।
- ব্রাউজার রঙের অনুরোধ বুঝতে পারে না এবং সম্পূর্ণরূপে ব্যর্থ হতে পারে। যাইহোক, দুইবার রঙ নির্দিষ্ট করে এটিকে প্রশমিত করা যেতে পারে, ক্যাসকেড ফ্যালব্যাককে আগের রঙে লেট করে যা বুঝতে পারে।
প্রগতিশীল বর্ধিতকরণ
- পেশাদার
- পরিচালিত রঙের বিশ্বস্ততার সাথে আরও নিয়ন্ত্রণ।
- একটি সংযোজন কৌশল যা বর্তমান রংকে প্রভাবিত করে না।
- কনস
- আপনাকে দুটি পৃথক রঙের সিনট্যাক্স পরিচালনা করতে হবে।
- আপনাকে দুটি পৃথক রঙের গামুট পরিচালনা করতে হবে।
স্বরগ্রাম এবং রঙ স্থান সমর্থন জন্য পরীক্ষা করা হচ্ছে
ব্রাউজারটি সিএসএস এবং জাভাস্ক্রিপ্ট থেকে বিস্তৃত গামুট ক্ষমতা এবং রঙ সিনট্যাক্স সমর্থনের জন্য সমর্থন পরীক্ষা করার অনুমতি দেয়। ব্যবহারকারীর রঙের সঠিক স্বরগ্রাম উপলব্ধ করা হয় না, একটি সাধারণ উত্তর প্রদান করা হয় যাতে ব্যবহারকারীর গোপনীয়তা বজায় থাকে। যদিও সঠিক রঙের স্থান সমর্থন উপলব্ধ করা হয়েছে, কারণ এটি স্বরগ্রামের মতো ব্যবহারকারীর হার্ডওয়্যারের ক্ষমতার জন্য নির্দিষ্ট নয়।
রঙ স্বরগ্রাম সমর্থন প্রশ্ন
নিম্নলিখিত কোড উদাহরণগুলি পরিদর্শনকারী ব্যবহারকারীর তাদের প্রদর্শনে রঙের পরিসীমা পরীক্ষা করে।
CSS থেকে চেক করা হচ্ছে
সর্বনিম্ন নির্দিষ্ট সমর্থন অনুসন্ধান হল dynamic-range মিডিয়া ক্যোয়ারী:
@media (dynamic-range: high) {
/* safe to use HD colors */
}
আনুমানিক, বা আরও বেশি, সমর্থন color-gamut মিডিয়া ক্যোয়ারী দিয়ে জিজ্ঞাসা করা যেতে পারে:
@media (color-gamut: srgb) {
/* safe to use srgb colors */
}
@media (color-gamut: p3) {
/* safe to use p3 colors */
}
@media (color-gamut: rec2020) {
/* safe to use rec2020 colors */
}
সমর্থন যাচাই করার জন্য অতিরিক্ত দুটি মিডিয়া প্রশ্ন রয়েছে:
জাভাস্ক্রিপ্ট থেকে চেক করা হচ্ছে
জাভাস্ক্রিপ্টের জন্য, window.matchMedia() ফাংশনটি কল করা যেতে পারে এবং মূল্যায়নের জন্য একটি মিডিয়া ক্যোয়ারী পাস করা যেতে পারে।
const hasHighDynamicRange = window
.matchMedia('(dynamic-range: high)')
.matches;
console.log(hasHighDynamicRange); // true || false
const hasP3Color = window
.matchMedia('(color-gamut: p3)')
.matches;
console.log(hasP3Color); // true || false
উপরের প্যাটার্নটি বাকি মিডিয়া প্রশ্নের জন্য অনুলিপি করা যেতে পারে।
রঙ স্পেস সাপোর্ট কোয়েরি
নিম্নলিখিত কোড উদাহরণগুলি ভিজিটিং ব্যবহারকারীর ব্রাউজার এবং এর সাথে কাজ করার জন্য রঙের স্পেসগুলির নির্বাচন পরীক্ষা করে।
সিএসএস থেকে চেক করা হচ্ছে
একটি @supports ক্যোয়ারী ব্যবহার করে স্বতন্ত্র রঙের স্পেস সমর্থন অনুসন্ধান করা যেতে পারে:
@supports (background: rgb(0 0 0)) {
/* rgb color space supported */
}
@supports (background: color(display-p3 0 0 0)) {
/* display-p3 color space supported */
}
@supports (background: oklch(0 0 0)) {
/* oklch color space supported */
}
জাভাস্ক্রিপ্ট থেকে চেক করা হচ্ছে
জাভাস্ক্রিপ্টের জন্য, ব্রাউজারটি বুঝতে পারে কিনা তা দেখার জন্য CSS.supports() ফাংশনটি কল করে একটি সম্পত্তি এবং মান জুটি পাস করা যেতে পারে।
CSS.supports('background: rgb(0 0 0)')
CSS.supports('background: color(display-p3 0 0 0)')
CSS.supports('background: oklch(0 0 0)')
হার্ডওয়্যার এবং পার্সিং চেক একসাথে রাখা
প্রতিটি ব্রাউজারের এই নতুন রঙের বৈশিষ্ট্যগুলি বাস্তবায়নের জন্য অপেক্ষা করার সময়, হার্ডওয়্যার ক্ষমতা এবং রঙিন পার্সিং ক্ষমতা উভয়ই পরীক্ষা করা ভাল ধারণা। ক্রমান্বয়ে উচ্চ সংজ্ঞাতে রঙ বাড়ানোর সময় আমি প্রায়শই এটি ব্যবহার করি:
:root {
--neon-red: rgb(100% 0 0);
--neon-blue: rgb(0 0 100%);
}
/* is the display HD? */
@media (dynamic-range: high) {
/* does this browser understand display-p3? */
@supports (color: color(display-p3 0 0 0)) {
/* safe to use display-p3 colors */
--neon-red: color(display-p3 1 0 0);
--neon-blue: color(display-p3 0 0 1);
}
}
ক্রোম ডেভটুলের সাথে ডিবাগিং রঙ
বিকাশকারীদের এইচডি রঙ তৈরি, রূপান্তর এবং ডিবাগ করতে সহায়তা করার জন্য ক্রোম ডেভটুলগুলি আপডেট এবং নতুন সরঞ্জাম দিয়ে সজ্জিত করা হয় ।
আপডেট রঙিন পিকার
রঙিন পিকার এখন সমস্ত নতুন রঙের স্পেস সমর্থন করে। লেখকদের চ্যানেল মানগুলির সাথে যেমন ইন্টারঅ্যাক্ট করার অনুমতি দেয় ঠিক তেমন।
গামুট সীমানা
এসআরজিবি এবং ডিসপ্লে-পি 3 গামুটগুলির মধ্যে একটি লাইন অঙ্কন করে একটি গামুট সীমানা লাইনও যুক্ত করা হয়েছে। নির্বাচিত রঙের মধ্যে কোনটি গ্যামুট রয়েছে তা পরিষ্কার করে দেওয়া।
এটি লেখকদের এইচডি রঙ এবং নন-এইচডি রঙের মধ্যে দৃশ্যত পার্থক্য করতে সহায়তা করে। color() ফাংশন এবং নতুন রঙের জায়গাগুলির সাথে কাজ করার সময় এটি বিশেষত সহায়ক কারণ তারা নন-এইচডি এবং এইচডি উভয় রঙই উত্পাদন করতে সক্ষম। আপনি যদি আপনার রঙটি কোন গামুটটি পরীক্ষা করতে চান তবে রঙিন বাছাইকারীকে পপ আপ করুন এবং দেখুন!
রূপান্তর রঙ
ডিভটুলস বহু বছর ধরে এইচএসএল, এইচডাব্লুবি, আরজিবি এবং হেক্সের মতো সমর্থিত ফর্ম্যাটগুলির মধ্যে রঙগুলিকে রূপান্তর করতে সক্ষম হয়েছে। shift + click । নতুন রঙের সরঞ্জামগুলি কেবল রূপান্তরগুলির মাধ্যমে চক্র করে না, তারা এমন একটি পপআপ দেয় যেখানে লেখকরা তাদের পছন্দসই রূপান্তরটি দেখতে এবং চয়ন করতে পারেন।
রূপান্তর করার সময়, স্থানটি ফিট করার জন্য রূপান্তরটি ক্লিপ করা হয়েছিল কিনা তা জানা গুরুত্বপূর্ণ। ডিভটুলগুলিতে এখন রূপান্তরিত রঙে একটি সতর্কতা আইকন রয়েছে যা আপনাকে এই ক্লিপিংয়ের বিষয়ে সতর্ক করে।
তাদের সাম্প্রতিক ঘোষণায় ডিভটুলগুলিতে আরও সিএসএস ডিবাগিং বৈশিষ্ট্য আবিষ্কার করুন।
উপসংহার
ওয়েবে নন-এসআরজিবি রঙের স্পেসগুলি তাদের প্রথম দিনগুলিতে রয়েছে তবে আমি বিশ্বাস করি যে আমরা সময়ের সাথে সাথে ডিজাইনার এবং বিকাশকারীদের ব্যবহারের বৃদ্ধি দেখব। কোন ডিজাইন সিস্টেম তৈরি করতে হবে তা জানা, উদাহরণস্বরূপ, একটি স্রষ্টাদের টুলবেল্টে থাকার একটি শক্তিশালী সরঞ্জাম। প্রতিটি রঙের স্পেসটি অনন্য বৈশিষ্ট্যগুলি সরবরাহ করে এবং এটি সিএসএস স্পেসিফিকেশনে যুক্ত করা হয়েছিল এবং এগুলি দিয়ে ছোট শুরু করা এবং প্রয়োজনীয় হিসাবে যুক্ত করা ঠিক আছে।
এই নতুন রঙের খেলনাগুলির সাথে খেলতে উপভোগ করুন! আরও কম্পন, ধারাবাহিক ম্যানিপুলেশন এবং ইন্টারপোলেশন এবং সামগ্রিকভাবে আপনার ব্যবহারকারীদের আরও রঙিন অভিজ্ঞতা সরবরাহ করে।
অতিরিক্ত পড়া
- https://lea.veroou.me/2020/04/lch-colors-in-css- হোয়াট-হো-এবং-হাউ/
- https://www.w3.org/graphics/color/workshop/slides/liley/liley.html
- https://darker.ink/writings/towards-recher-clors-on-the- ওয়েব
- https://bottosson.github.io/posts/colorpicker/
- https://www.w3.org/graphics/color/workshop/slides/erias.pdf
- https://atmos.style/blog/lch-color- স্পেস
- https://stripe.com/blog/accessible-clor-stystems
- https://cran.r-project.org/web/packages/colordistance/vignettes/color-spaces.html
- https://afc163.github.io/color3d/
- https://github.com/nschloe/colorio#gamut- ভিজুয়ালাইজেশন
- https://www.learnui.design/tools/gradient-generator.html
- https://webkit.org/blog/10042/wide-gamut-clor-in-css-with-play-p3/
- https://www.w3.org/tr/css-color-4/
- https://www.w3.org/tr/css-color-5/
- https://en.wikipedia.org/wiki/CIE_1931_color_space
- https://www.joshwcomaue.com/css/color-formats/
- https://ciechanow.ski/color-spaces/