CodeKitHub
Hvorfor vi la til automatisk palettuttrekk i fargevelgeren

Hvorfor vi la til automatisk palettuttrekk i fargevelgeren

Publisert 5. aug. 2026

Vår fargevelger har alltid latt deg laste opp et bilde og klikke på en hvilken som helst piksel for å få dens nøyaktige HEX-, RGB- og HSL-verdi. Det svarer på «hvilken farge har akkurat dette punktet?» — nyttig, men ikke spørsmålet folk flest faktisk har når de laster opp et bilde. Som regel er det «hva er den overordnede fargepaletten i dette bildet?» — å hente en merkevarepalett fra en logo, eller å matche stemningen i et referansebilde til fargevalget på et nettsted.

Prøvetaking av enkeltpiksler kan ikke svare på det. Så vi la til palettuttrekk: last opp et bilde, og verktøyet trekker nå automatisk ut de åtte mest dominerende fargene og viser dem som klikkbare fargeprøver.

Slik fungerer det

Ingen AI-modell er involvert, og ingenting lastes opp noe sted — det er en enkel frekvenstellingsalgoritme som kjører på noen få millisekunder:

  1. Bildet nedskaleres til et 80×80-lerret. Full oppløsning trengs ikke for fargestatistikk, og nedskaleringen holder det hele lynraskt selv for store bilder.
  2. Hver piksel plasseres i en bøtte basert på en forgrovet versjon av fargen sin — de 5 øverste bitene i hver RGB-kanal, slik at piksler som er visuelt nesten identiske havner i samme bøtte i stedet for at hver telles som en unik farge.
  3. Bøttene sorteres etter hvor mange piksler som havnet i dem, og de åtte største blir paletten, der hver vises som gjennomsnittsfargen av alt i den bøtten.

Det er alt. Ingen maskinlæring, ingen ekstern tjeneste — bare nedskalering og telling, og det er derfor det er umiddelbart og aldri forlater nettleseren din.

Klikk på en fargeprøve, få koden

Hver fargeprøve i paletten er klikkbar: klikk på en, og den blir verktøyets aktive farge, med HEX, RGB og HSL fylt ut automatisk og hex-koden kopiert til utklippstavlen i samme klikk. Det finnes også en «copy all»-knapp hvis du vil ha hele paletten som en kommaseparert liste, nyttig for å lime rett inn i et designverktøy eller en CSS custom-properties-blokk.

Prøv selv

Last opp et hvilket som helst bilde — et skjermbilde, en logo, et foto — på fargevelger-siden, så dukker paletten automatisk opp under.

← Tilbake til bloggen