Kleuren Ophalen Afbeelding

Free

Extraheer een dominant kleurenpalet uit een afbeelding met mediaan-cut-kwantisering, met kopiëren als hex of CSS-variabelen.

Klik om een afbeelding te kiezen, of sleep er een hierheen

Recente Activiteit

Zichtbaar voor iedereen. Laatste 20 gebruiken over alle bezoekers, nieuwste eerst.

6 colors · #BB5446, #E5B1AE, #1B0813, #3E1E21, #422037, #4D3864

3 uur geleden

Opmerkingen (0)

Vond je deze tool nuttig? Laat een opmerking achter, deel een tip, of vertel ons hoe we het beter kunnen maken.

Nog geen opmerkingen. Wees de eerste om je gedachten te delen!

Wat deze tool doet

Extraheert een dominant kleurenpalet uit elke afbeelding met mediaan-snit-kleurkwantisatie, dezelfde techniek gebruikt door populaire palet-extractiebibliotheken, met een aanpasbaar aantal kleuren en één-klik-kopiëren als hex-codes of CSS-variabelen.

Hoe Het Werkt

Alle pixels van de afbeelding beginnen in één enkele groep. De tool zoekt welk kleurkanaal (rood, groen, of blauw) het breedste bereik aan waarden heeft binnen de meest bevolkte groep, sorteert de pixels van die groep langs dat kanaal, en splitst het in tweeën bij de mediaan zodat beide helften ongeveer hetzelfde aantal pixels bevatten. Dit splitsen herhaalt zich, altijd gericht op de groep met de meeste pixels, totdat er evenveel groepen zijn als het aantal gevraagde kleuren. Elke uiteindelijke groep wordt dan gereduceerd tot een enkele kleur door zijn pixels te middelen, en de resulterende kleuren worden gesorteerd met de meest voorkomende (grootste groep) eerst.

Problemen die het oplost

Een kleurenpalet of thema bouwen gebaseerd op een foto, logo, of kunstwerk.
Snel de dominante kleuren in een afbeelding identificeren voor ontwerp- of merkbeslissingen.
Kant-en-klare aangepaste CSS-eigenschappen genereren uit het kleurenschema van een afbeelding.

Veelgestelde vragen

›Hoe kiest deze tool welke kleuren het meest ertoe doen in mijn afbeelding?

Het gebruikt een techniek genaamd mediaan-snit-kwantisatie: het behandelt de kleur van elke pixel als een punt in 3D rood/groen/blauw-ruimte, splitst herhaaldelijk de meest bevolkte groep kleuren in tweeën langs welk kleurkanaal ook het meest varieert erbinnen, en zodra het evenveel groepen heeft als gevraagde kleuren, middelt het elke groep tot één representatieve kleur. Groepen met meer pixels komen eerst in de resultaten, dus het palet weerspiegelt hoeveel van de afbeelding elke kleur daadwerkelijk bedekt.

›Waarom is dit slimmer dan gewoon de hele afbeelding middelen tot één kleur?

Alles tegelijk middelen zou een foto met duidelijke rode en blauwe gebieden vermengen tot een troebel paars dat nergens in het origineel voorkomt. Door de kleurruimte te splitsen in aparte groepen voordat wordt gemiddeld, bevat elke groep alleen vergelijkbare kleuren, zodat rode en blauwe gebieden vertegenwoordigd blijven als hun eigen aparte, herkenbare paletitems in plaats van elkaar op te heffen.

›Waarom zou het geëxtraheerde palet een kleur kunnen missen die ik duidelijk in de foto zie?

Als die kleur slechts een klein gebied van de afbeelding bedekt, kan het uiteindelijk worden ondergebracht in een grotere, meer dominante groep in plaats van zijn eigen slot te krijgen, vooral bij lagere kleuraantallen. Het aantal gevraagde kleuren verhogen geeft kleine of subtiele kleurgebieden een betere kans om afgesplitst te worden in hun eigen paletitem.

›Analyseert dit de afbeelding op volledige resolutie?

De afbeelding wordt eerst verkleind naar een kleinere werkkopie voor analyse, aangezien paletextractie alleen een representatieve steekproef van kleuren nodig heeft, niet elke pixel, en dit houdt de tool snel zelfs bij grote foto's. Dit beïnvloedt de afbeelding zelf niet, alleen de analyse, er wordt niets geüpload en het originele bestand wordt nooit aangepast.

›Kan ik het palet in mijn CSS gebruiken?

Ja, klik op "Kopiëren als CSS-Variabelen" om het palet te kopiëren als kant-en-klare --color-1 tot --color-N aangepaste eigenschappen, of "Kopiëren als HEX-Lijst" voor een gewone lijst met hexcodes.

Voeg een of meer aangepaste tekstbijschriften toe aan een afbeelding, direct in je browser.