કલર પિકર OKLCH માં કામ કરે છે, જે આધુનિક CSS નો પર્સેપ્ચ્યુઅલ કલર સ્પેસ છે. રંગ-ક્ષેત્રમાં ડાબેથી જમણે ક્રોમા રાખોડીથી શરૂ થઈને ત્યાં સુધી જાય છે, જ્યાં સુધી સ્ક્રીન તે લાઇટનેસ પર બતાવી શકે, તેથી દરેક બિંદુ વાપરી શકાય તેવો રંગ છે, અને રંગછટા બદલાય ત્યારે પણ માર્કર પોતાની જગ્યાએ રહે છે.
ફીલ્ડ કોઈ પણ CSS રંગ લે છે, નામો સહિત, અને ફૉર્મેટ બટન મૂલ્યને hex, rgb(), hsl(), oklch() અથવા color(display-p3) તરીકે લખે છે. કોઈ ફૉર્મેટના ગૅમટની બહારના રંગને CSS ની રીતે તેની અંદર લાવવામાં આવે છે, તેની લાઇટનેસ અને રંગછટા જાળવીને.
પસંદગી માટે swatches ઉમેરો, અને WCAG 2 જે રીતે કૉન્ટ્રાસ્ટ માપે છે તે રીતે રંગને કોઈ પૃષ્ઠભૂમિ સામે ચકાસવા માટે contrastWith. જ્યાં બ્રાઉઝરમાં આઇડ્રૉપર હોય, ત્યાં એક બટન સ્ક્રીન પરથી રંગ ઉપાડે છે.
બ્રાન્ડનો રંગ
નામવાળા રંગ-નમૂના, અને રંગ પર સફેદ ટેક્સ્ટનો કૉન્ટ્રાસ્ટ: આછો રંગ પસંદ કરો, તો AA નિષ્ફળ જાય છે.
#4f46e5
વાઇડ ગૅમટ
gamut="p3" રંગ-ક્ષેત્રને Display P3 રંગોથી ભરે છે, અને એક તૂટક રેખા બતાવે છે કે sRGB ક્યાં પૂરું થાય છે. મૂલ્ય oklch() માં જ રહે છે.
પૉપઓવરમાં
રંગ બતાવતું બટન પિકરને પૉપઓવર માં ખોલે છે.