Ang Color Picker ay nagbibigay ng pixel-precise na eyedropper tool para sa pagpili ng kulay mula sa kahit anong elemento sa isang webpage — text, backgrounds, images, gradients, o kahit anong visible na pixel. Makuha ang eksaktong color value nang sabay-sabay sa HEX, RGB, at HSL na mga format, kasama ang magnified na pixel preview para sa tumpak na pagta-target. Ang mga dating piniling kulay ay naka-save sa isang history strip para sa mabilis na pag-access ulit.
Ang pag-extract ng eksaktong color values mula sa isang webpage ay isang karaniwang gawain — pagtutugma ng brand color, pag-reference ng isang disenyo, o pagsusuri ng shade na ginagamit sa site ng isang kakumpitensya. Ipinapakita ng browser DevTools ang mga kulay sa Styles panel, ngunit para lamang sa mga elemento na may explicit na CSS color properties — hindi para sa images, gradients, o inherited na kulay. Ang Color Picker eyedropper ay gumagana sa pixel level — binabasa nito ang aktwal na rendered na kulay ng kahit anong pixel na nasa ilalim ng iyong cursor, anuman ang pinagmulan ng kulay na iyon. Mag-click sa asul na langit sa isang hero image, sa gitna ng isang gradient, o sa isang semi-transparent na overlay, at makuha ang eksaktong composite color value. Ipinapakita ng magnified preview circle ang zoomed-in na view ng mga nakapaligid na pixel para matarget mo ang eksaktong pixel na gusto mo. Ang tatlong format na output (HEX, RGB, HSL) ay ipinapakita nang sabay-sabay — mag-click ng kahit anong format para kopyahin. Ang iyong mga huling piniling kulay ay naka-save sa isang color history strip sa ibaba, para madali kang makabalik sa isang dating piniling kulay.
Ipinapakita ng magnified na circular preview ang zoomed-in na mga pixel sa paligid ng iyong cursor, na may crosshair targeting para sa eksaktong pagpili ng pixel. Pumili ng kulay mula sa text, backgrounds, images, gradients, SVGs, o kahit anong visible na pixel sa pahina.
Ang bawat piniling kulay ay ipinapakita sa lahat ng tatlong format nang sabay: HEX (#7c3aed), RGB (rgb(124, 58, 237)), at HSL (hsl(262, 83%, 58%)). Walang palipat-lipat o pag-convert — lahat ng format ay agad na available.
Mag-click sa kahit anong format row (HEX, RGB, o HSL) para kopyahin ang partikular na value na iyon sa iyong clipboard nang agad. Isang maikling animasyong "Copied!" ang nagpapatunay ng aksyon. I-paste nang direkta sa iyong CSS, design tool, o color specification.
Ang iyong mga kamakailan na piniling kulay ay naka-save sa isang visual history strip na nagpapakita ng mga color swatch. Mag-click sa kahit anong swatch para piliin ulit ang kulay na iyon at makita muli ang mga value nito. Nananatili ang history sa buong session mo — pumili ng kulay mula sa maraming pahina.
Ipinapakita ang piniling kulay bilang isang malaking swatch sa itaas ng mga format value, na nagpapadali sa pagtingin at pagpapatunay ng kulay. Malaki ang swatch para maipakita ang mga banayad na shade na maaaring magmukhang magkapareho sa mas maliit na sukat.
Pumipili ng kulay mula sa kahit anong visible na pixel: CSS colors, CSS gradients, images (PNG, JPG, SVG), canvas elements, video frames, semi-transparent na overlays (pinipili ang composite color), at maging ang mga iframe. Kung nakikita mo ito, maaari mo itong piliin.
Pumili ng eksaktong brand color mula sa website ng isang kumpanya para matiyak na gumagamit ang iyong disenyo o nilalaman ng tamang shade. Kumuha ng tumpak na HEX value sa halip na hulaan ito o maghanap sa mga brand guideline.
Pumili ng kulay nang direkta mula sa mga hero image, product photo, o ilustrasyon. Mag-extract ng isang dominant na kulay mula sa isang larawan para gamitin bilang complementary na background sa iyong disenyo.
Sinasabi ng design spec na ang button ay dapat na #7c3aed. Piliin ang kulay mula sa implemented na button para i-verify na tumutugma ito. Nakakahuli ng mga banayad na pagkakaiba ng kulay na hindi nakikita ng mata.
Mag-browse sa mga design inspiration site at pumili ng mga kulay na nakakaakit sa iyo. Nagtatayo ang history strip ng isang palette ng mga kulay na iyong pinili sa session — gamitin ito bilang panimula para sa iyong sariling color scheme.
Pumili ng kulay sa iba't ibang punto sa isang CSS gradient para makita ang eksaktong kulay sa bawat posisyon. Kapaki-pakinabang para sa pag-replicate ng mga gradient o pag-unawa kung paano nagsasama ang mga gradient stop.
Buksan ang DevSuite Pro floating dock at i-click ang Color Picker icon. Nagbabago ang cursor sa isang eyedropper na may magnified na preview circle.
Ilipat ang iyong cursor sa ibabaw ng pahina. Ipinapakita ng magnified preview ang zoomed-in na view ng mga pixel sa paligid ng iyong cursor, na may crosshair na nagpapakita ng eksaktong target na pixel.
Mag-click kahit saan sa pahina para piliin ang kulay sa pixel na iyon. Ang color swatch, HEX, RGB, at HSL values ay agad na naa-update.
I-click ang HEX, RGB, o HSL row para kopyahin ang value na iyon sa iyong clipboard. Isang maikling kumpirmasyong "Copied!" ang lilitaw.
Magpatuloy sa pag-click para pumili ng mas maraming kulay. Ang bawat pagpili ay idinadagdag sa history strip. Mag-click sa kahit anong history swatch para alalahanin ang kulay na iyon.
I-install ang DevSuite Pro nang libre at i-unlock ang 39+ developer tools para sa iyong browser.
