Libreng Extractor ng Color Palette mula sa Larawan
Kunin ang mga dominant na kulay mula sa anumang larawan gamit ang k-means color quantization. Makakuha ng mga hex code para sa nangungunang 2-16 na kulay sa iyong larawan o logo.
I-drop ang file dito, o mag-click para mag-browse
JPG, PNG, WebP, GIF, HEIC, HEIF Β· pinoproseso sa iyong device
o pindutin ang Ctrl+V para i-paste mula sa clipboard
Tip: puwede kang mag-paste ng screenshot gamit ang Ctrl+V
Ang iyong mga file ay hindi kailanman lumalabas sa iyong device. Lahat ng pagproseso ay nangyayari nang lokal sa iyong browser.
Mga karaniwang gamit
- Kunin ang Brand Colors mula sa LogoMakuha ang exact hex codes para sa dominant colors sa anumang logo o brand image.
- Bumuo ng Web Color Palettes mula sa PhotosBumuo ng matching website color palettes mula sa hero photos o background images.
- Kunin ang Colors mula sa Inspiration PhotosKunin ang color palettes mula sa interior design o fashion photos upang gamitin sa sariling projects.
- Suriin ang Painting at Artwork PalettesPag-aralan ang color palettes ng sikat na paintings o sariling art sa pamamagitan ng pag-extract ng dominant colors.
- Theme CSS mula sa ImagesBumuo ng CSS variable themes mula sa images - kapaki-pakinabang para sa dynamic theming o auto-generated color schemes.
Paano ito Gumagana
Buong tumatakbo sa iyong browser ang pagkuha ng kulay gamit ang hand-written na k-means++ clustering algorithm na ina-apply sa raw na pixel data na binasa mula sa Canvas API β walang server, walang third-party library. Laging parehong palette ang nagagawa ng parehong larawan at setting ng bilang ng kulay dahil gumagamit ang algorithm ng deterministic na pseudo-random number generator (mulberry32) sa halip na Math.random.
- 1Binabasa ng Canvas ang pixel dataIginuguhit ang larawan sa isang off-screen na HTML Canvas element at dina-downsample sa hanggang 200px sa pinakamahabang panig nito. Ibinabalik ng getImageData() ng Canvas API ang bawat pixel bilang raw na RGBA byte, at itinatapon ang ganap na transparent na pixel (alpha < 128) bago magsimula ang clustering.
- 2Kina-cluster ng k-means++ ang mga pixelDeterministic na itinatakda ng k-means++ initializer ang mga centroid, pagkatapos ay umiikot ang algorithm nang hanggang 20 beses: itinatalaga ang bawat pixel sa pinakamalapit na centroid nito sa RGB space, pagkatapos ay kinakalkula ulit ang mga centroid bilang mean ng lahat ng itinalagang pixel. Pinagsasama ang mga cluster na nauuwi sa parehong hex value, kaya natatangi ang bawat swatch sa resulta.
- 3Kinakalkula ang metadata ng bawat kulayKino-convert ang bawat centroid sa HEX, HSL, at bahagi nito sa kabuuang pixel (porsiyento). Kinakalkula ang WCAG relative luminance ayon sa karaniwang formula, at ipinapakita kasama ng bawat swatch ang contrast ratio laban sa itim at puti.
- 4Pag-export at output ng eyedropperPuwedeng kopyahin ang palette bilang CSS custom properties, SCSS variables, Tailwind config snippet, o JSON. Ina-map ng click-to-sample na eyedropper ang click mo sa preview pabalik sa eksaktong coordinate ng source pixel sa full-resolution na canvas, at idinadagdag ang kulay ng pixel na iyon sa hiwalay na listahan ng mga napiling kulay. Puwedeng i-download ang PNG palette strip gamit ang Canvas toBlob().
Hindi kailanman ina-upload ang larawan mo β dine-decode at pinoproseso ito nang buo sa memory ng iyong browser, at laki lang ng file (sa KB) ang iniuulat sa analytics.
Mga Kaugnay na Tool
Random Color Generator
Gumawa ng mga random na kulay nang isa-isa o bilang palette ng lima, i-lock ang mga gusto mo, kopyahin ang mga halagang HEX, RGB o HSL at i-export ang palette bilang PNG o CSS.
Generator ng Color Palette
Gumawa ng complementary, analogous, triadic, at monochromatic na color palette mula sa anumang base na kulay. Kopyahin ang mga hex code sa isang click.
Color Picker at Palette Generator
Pumili ng mga kulay, mag-convert sa pagitan ng HEX/RGB/HSL, at gumawa ng magkakaayon na palette.