కలర్ పికర్ OKLCH లో పనిచేస్తుంది; ఇది ఆధునిక CSS లోని, కంటికి కనిపించే తీరుకు అనుగుణమైన కలర్ స్పేస్. ఏరియాలో అడ్డంగా, గాఢత (chroma) బూడిద రంగు నుంచి ఆ ప్రకాశం (lightness) వద్ద స్క్రీన్ చూపించగల గరిష్ఠం వరకు సాగుతుంది; కాబట్టి ప్రతి బిందువూ మీరు వాడగల రంగే, రంగు ఛాయ (hue) మారినా థంబ్ కదలదు.
ఫీల్డ్ రంగుల పేర్లతో సహా ఏ CSS రంగునైనా తీసుకుంటుంది; ఫార్మాట్ బటన్ విలువను hex, rgb(), hsl(), oklch() లేదా color(display-p3) గా రాస్తుంది. ఒక ఫార్మాట్ గామట్ (రంగుల పరిధి) బయట ఉన్న రంగును అది CSS పద్ధతిలో ఆ పరిధిలోకి తెస్తుంది, దాని ప్రకాశాన్ని, రంగు ఛాయను మార్చకుండా.
ఎంచుకోవడానికి swatches ను, WCAG 2 కాంట్రాస్ట్ను కొలిచే తీరులో రంగును బ్యాక్గ్రౌండ్తో పోల్చి తనిఖీ చేయడానికి contrastWith ను జోడించండి. బ్రౌజర్లో ఐడ్రాపర్ ఉన్న చోట, ఒక బటన్ స్క్రీన్ నుంచి రంగును ఎంచుకుంటుంది.
బ్రాండ్ రంగు
పేర్లున్న స్వాచ్లు, రంగుపై తెల్లని టెక్స్ట్ కాంట్రాస్ట్: లేత రంగును ఎంచుకుంటే AA విఫలమవుతుంది.
#4f46e5
విస్తృత గామట్
gamut="p3" ఏరియాను Display P3 రంగులతో నింపుతుంది, sRGB ఎక్కడ ముగుస్తుందో డ్యాష్ల గీత చూపిస్తుంది. విలువ మాత్రం oklch() లోనే ఉంటుంది.
పాపోవర్లో
రంగును చూపించే బటన్, పికర్ను ఒక పాపోవర్ లో తెరుస్తుంది.