Ang Color Palette ay nag-i-scan ng bawat elemento sa isang webpage at ine-extract ang kumpletong hanay ng mga kulay na ginamit — mula sa text at backgrounds hanggang sa mga border, shadow, at accent. Ang mga kulay ay ipinapakita bilang mga visual swatch na nakaayos ayon sa dalas ng paggamit (pinaka-madalas na ginamit muna), na bawat isa ay nagpapakita ng HEX value at bilang ng paggamit nito. Mag-click sa kahit anong swatch para kopyahin, o i-export ang buong palette bilang isang listahan ng mga color code.
Ang bawat maayos na dinisenyo na website ay may consistent na color palette — karaniwang 3-8 na pangunahing kulay kasama ang ilang neutral. Awtomatikong ine-extract ng Color Palette ang palette na ito sa pamamagitan ng pag-scan ng computed color, background-color, border-color, at box-shadow values ng bawat elemento. Ang resulta ay isang frequency-sorted na koleksyon ng bawat kulay sa pahina, na nagbibigay sa iyo ng kumpletong larawan ng color system ng site. Ang mga dominant na kulay (ang pangunahing brand color, background color, text color) ay unang lilitaw na may mataas na bilang ng paggamit. Ang mga accent color at isang-beses na value ay lilitaw sa ibaba. Napakahalaga nito para sa design research — bisitahin ang kahit anong website at i-extract ang eksaktong color palette nito sa loob ng ilang segundo. Kapaki-pakinabang din ito para sa pag-audit ng iyong sariling site: may mga naliligaw na kulay ba na hindi kabilang sa iyong design system? Gumagamit ka ba ng 5 bahagyang magkaibang shade ng gray habang 3 lamang ang tinukoy ng design spec? Ginagawang visible at mabibilang ng Color Palette ang buong paggamit ng kulay.
Nag-i-scan ng bawat visible na elemento sa pahina at nag-e-extract ng mga kulay mula sa computed properties: color, background-color, border-color, box-shadow color, outline-color, at text-decoration-color. Ang bawat kulay na ginamit sa pahina ay nakuha.
Ang mga kulay ay nakaayos ayon sa bilang ng paggamit — ang pinaka-madalas na ginamit na kulay ay unang lilitaw. Ang mga dominant na brand color at background ay pumapalo sa itaas, habang ang mga isang-beses na accent color ay lilitaw sa huli. Agad na makita ang mga pangunahing, pangalawang, at accent na kulay ng pahina.
Ang bawat kulay ay ini-render bilang isang malaking visual swatch na may HEX code at bilang ng paggamit na ipinapakita sa ibaba. Malaki ang mga swatch para makilala ang mga banayad na pagkakaiba ng shade (tulad ng #333 kumpara sa #2a2a2a).
Mag-click sa kahit anong color swatch para kopyahin agad ang HEX value nito sa iyong clipboard. Hindi na kailangang magbukas ng color panel o pangalawang dialog — isang click, nakopya, tapos na.
I-click ang "Export All" para kopyahin ang buong palette bilang isang formatted na listahan ng mga HEX color code. I-paste sa isang design tool, CSS variables file, o color documentation. Pinapanatili ng listahan ang frequency sort order.
Ang mga kulay ay nino-normalize (ang rgb at hex na representasyon ng parehong kulay ay pinagsasama) at dine-deduplicate. Ipinapakita ng palette ang mga natatanging kulay lamang, na may pinagsama na bilang ng paggamit para sa mga duplicate na representasyon.
Bisitahin ang mga website na may magagandang color scheme at i-extract ang eksaktong palette ng mga ito. Gamitin ang mga kulay bilang panimula para sa iyong sariling disenyo — o simpleng i-document kung aling mga kombinasyon ng kulay ang magkasama.
Patakbuhin ang Color Palette sa iyong sariling site para i-verify ang consistency ng brand color. May 4 na bahagyang magkaibang asul ba kung saan dapat ay 1 lamang? May mga off-brand na kulay ba na pumasok? Ginagawang halata ng frequency sort ang mga inconsistency.
I-export ang palette at i-convert ito sa mga CSS custom properties (--color-primary, --color-secondary, atbp.). Sinasabi sa iyo ng frequency-sorted na output kung aling mga kulay ang nararapat na bigyan ng pangunahing, pangalawang, at accent na papel.
Mag-extract ng mga color palette mula sa mga website ng kakumpitensya para maunawaan ang kanilang brand positioning. Mainit na kulay kumpara sa malamig na kulay, mataas na contrast kumpara sa muted — ipinapakita ng palette ang mga sinasadyang pagpipili sa disenyo.
Tingnan ang lahat ng text color kasabay ng mga background color. May mga kombinasyon ba ng text-background na masyadong mababa ang contrast? Ibinibigay ng palette ang kumpletong hanay ng mga kulay para suriin laban sa mga kinakailangan ng WCAG contrast.
Buksan ang DevSuite Pro floating dock at i-click ang Color Palette icon. Nag-i-scan ang tool ng bawat elemento sa pahina at ine-extract ang lahat ng color value.
Isang grid ng mga color swatch ang lilitaw, nakaayos ayon sa dalas ng paggamit. Ang mga pinaka-madalas na ginamit na kulay ay nasa itaas. Ipinapakita ng bawat swatch ang HEX code at bilang ng mga elemento na gumagamit ng kulay na iyon.
Mag-click sa kahit anong swatch para kopyahin ang HEX value nito sa iyong clipboard. Isang maikling kumpirmasyon ang lilitaw.
I-click ang "Export All" para kopyahin ang bawat kulay bilang isang formatted na listahan. I-paste sa iyong CSS variables file, design tool, o dokumentasyon.
Mag-navigate sa iba't ibang pahina sa parehong site at mag-extract ng mga palette para i-verify ang consistency ng kulay sa buong site.
I-install ang DevSuite Pro nang libre at i-unlock ang 39+ developer tools para sa iyong browser.
