কালার পিকার কাজ করে OKLCH-এ, যা আধুনিক CSS-এর পারসেপচুয়াল কালার স্পেস। কালার এরিয়ায় বাঁ থেকে ডানে ক্রোমা ধূসর থেকে শুরু করে সেই লাইটনেসে স্ক্রিন যতটা দেখাতে পারে ততটা পর্যন্ত যায়, তাই প্রতিটি বিন্দুই ব্যবহারযোগ্য রঙ, আর হিউ বদলালেও মার্কার নিজের জায়গায় থাকে।
ফিল্ড যেকোনো CSS রঙ নেয়, রঙের নামও, আর ফরম্যাট বাটন ভ্যালুটি hex, rgb(), hsl(), oklch() বা color(display-p3) হিসেবে লেখে। কোনো ফরম্যাটের গ্যামাটের বাইরের রঙকে CSS-এর নিয়মে তার ভেতরে আনা হয়, লাইটনেস ও হিউ অপরিবর্তিত রেখে।
বেছে নেওয়ার জন্য swatches যোগ করুন, আর WCAG 2 যেভাবে কনট্রাস্ট মাপে সেভাবে কোনো ব্যাকগ্রাউন্ডের সঙ্গে রঙটি যাচাই করতে contrastWith। যে ব্রাউজারে আইড্রপার আছে, সেখানে একটি বাটন স্ক্রিন থেকে রঙ তুলে নেয়।
ব্র্যান্ডের রঙ
নামসহ রঙের নমুনা, আর রঙটির ওপর সাদা টেক্সটের কনট্রাস্ট: হালকা রঙ বেছে নিলে AA ফেল করে।
#4f46e5
ওয়াইড গ্যামাট
gamut="p3" কালার এরিয়া Display P3 রঙে ভরে দেয়, আর একটি ড্যাশ দেওয়া রেখা দেখায় sRGB কোথায় শেষ হয়। ভ্যালু oklch()-এই থাকে।
পপওভারে
রঙটি দেখানো একটি বাটন পিকারটিকে একটি পপওভারে খোলে।