कलर पिकर OKLCH में काम करता है, जो आधुनिक CSS का परसेप्चुअल कलर स्पेस है। रंग-क्षेत्र में बाएँ से दाएँ क्रोमा ग्रे से शुरू होकर वहाँ तक जाता है, जहाँ तक स्क्रीन उस लाइटनेस पर दिखा सकती है, इसलिए हर बिंदु एक इस्तेमाल करने लायक रंग है, और ह्यू बदलने पर भी मार्कर अपनी जगह पर रहता है।
फ़ील्ड कोई भी CSS रंग लेता है, रंगों के नाम भी, और फ़ॉर्मैट बटन वैल्यू को hex, rgb(), hsl(), oklch() या color(display-p3) में लिखता है। किसी फ़ॉर्मैट के गैमट से बाहर का रंग CSS के तरीक़े से उसके अंदर लाया जाता है, और उसकी लाइटनेस और ह्यू वही रहती हैं।
चुनने के लिए swatches जोड़ें, और रंग को किसी बैकग्राउंड के सामने WCAG 2 के कंट्रास्ट माप से जाँचने के लिए contrastWith। जिस ब्राउज़र में आईड्रॉपर है, वहाँ एक बटन स्क्रीन से रंग उठा लेता है।
ब्रैंड का रंग
नाम वाले रंग-नमूने, और रंग पर सफ़ेद टेक्स्ट का कंट्रास्ट: हल्का रंग चुनें, तो AA फ़ेल हो जाता है।
#4f46e5
वाइड गैमट
gamut="p3" रंग-क्षेत्र को Display P3 रंगों से भरता है, और एक डैश वाली रेखा दिखाती है कि sRGB कहाँ ख़त्म होता है। वैल्यू oklch() में ही रहती है।
पॉपओवर में
रंग दिखाने वाला बटन पिकर को एक पॉपओवर में खोलता है।