Ga naar hoofdinhoud
BVDART Logo

Kleurkwantisatie: Van Miljoenen naar Tientallen Kleuren

⊘ Deep Dive• 5 min leestijd
color-quantizationk-meansmedian-cutpalette
Hoe breng je 16,7 miljoen kleuren terug naar 16 zonder dat een beeld zijn ziel verliest? Een deep dive in Median Cut, K-Means en de kleur-ruimte-geometrie die alles mogelijk maakt.

De kernuitdaging

Een 24‑bit RGB‑afbeelding kan tot 16.777.216 unieke kleuren bevatten. Maar in veel artistieke en technische contexten is veel minder nodig: 256 voor GIF, 16 voor klassieke pixel art, soms slechts 2 voor monochrome prints. Color quantization is de wetenschap — én kunst — van het kiezen welke handvol kleuren al die 16,7 miljoen mogelijkheden het best vertegenwoordigt.

De naïeve aanpak om de RGB‑kubus gelijkmatig in vakjes te verdelen levert rampzalige resultaten op. De meeste afbeeldingen gebruiken maar een klein deel van de volledige kleurruimte, waardoor een uniforme verdeling paletslots verspilt aan kleuren die in de afbeelding helemaal niet voorkomen.

Median Cut: delen en heersen

Paul Heckberts Median Cut‑algoritme (1982) kiest een ruimtelijke benadering. Het behandelt elke pixel als een punt in 3D‑RGB‑ruimte en splitst vervolgens herhaaldelijk de puntenwolk langs zijn langste as op de mediaan. Nansplitsingen heb je 2ⁿclusters. De gemiddelde kleur van elk cluster wordt een paletkleur.

Median Cut is elegant omdat het zich vanzelf aanpast aan de afbeelding. Een zonsondergangsfoto, gedomineerd door rood- en oranje­tinten, zal de meeste paletkleuren toewijzen aan warme tinten — precies waar het detail belangrijk is. De blauwe lucht krijgt minder entries omdat die veel gelijkmatiger is.

Kies kleuren die het beeld vertegenwoordigen

Botanisch etiket · een klein warm accent40 × 30 px
Botanisch etiket met een instelbare oranje bloem
Tel de bronkleuren
27.2%
26.9%
26.8%
13.5%
3.6%
2.0%

De bloem is het aandachtspunt, maar beslaat weinig pixels. Populariteit kan elke paletplek aan de drie vergelijkbare papiertinten besteden. Vergroot de bloem om die afweging te veranderen.

Bewaar de meest voorkomende
Splits en middel kleurgroepen
Wat gebeurt er met het oranje accent?
Beeld herkleurd met de gekozen extractie

#e5632e → #b8b59b

Origineel accent → dichtstbijzijnde beschikbare vertegenwoordiger. Median cut kan een nieuwe gemiddelde kleur maken; het accent hoeft niet exact behouden te blijven.

Vergroot de oranje bloem bij een vast kleurbudget totdat populariteit het accent een paletplek geeft. Gebruik een regelaar om het over te nemen.

Vergelijk median-cut en populariteit terwijl je de paletgrootte verandert. De voorbeelden tonen de gekozen kleuren en hun aandeel.

Probeer het zelf
  1. Vergelijk populariteit en median cut met hetzelfde kleurenbudget.
  2. Vergroot de oranje bloem en bekijk haar pixelaandeel en gekozen vertegenwoordiger.

Let op: Frequentie en representatie zijn verschillende doelen. Vergelijkbare achtergrondkleuren kunnen een klein accent verdringen, terwijl groepsgemiddelden een nieuwe kleur kunnen maken.

Volledige uitleg Open in het Lab

K‑means clustering

K-Means pakt het probleem iteratief aan. Begin met k willekeurige "centroids" in RGB-ruimte. Wijs elke pixel toe aan het dichtstbijzijnde centroid (met Euclidische afstand). Herbereken elk centroid als het gemiddelde van de eraan toegewezen pixels. Herhaal dit tot er convergentie optreedt.

K-Means vindt vaak betere paletten dan Median Cut omdat het globaal optimaliseert, maar het is trager en gevoelig voor de initiële startwaarden. In de praktijk geeft een combinatie van Median Cut-initialisatie met K-Means-verfijning de beste resultaten — de snelheid van divide-and-conquer met de finesse van iteratieve optimalisatie.

Volg hoe de clusters verschuiven

Wijs punten toe en verplaats vertegenwoordigersRGB-doorsnede · B = 96
Kleurmonsters verbonden met hun toegewezen zwaartepuntμ1μ2μ3R →G ↑
Toewijzing aan dichtstbijzijnde centrum
μⱼ = (1 / Nⱼ) Σ xᵢHet gemiddelde minimaliseert de gekwadrateerde afstand voor de huidige groep. De volgende toewijzingsstap laat punten van groep wisselen.

De gekleurde achtergrond toont de huidige dichtstbijzijnde-centrumregio’s. Lijnen tonen de bewaarde toewijzingen; direct na verplaatsing kunnen ze dus verschillen.

Gekwadrateerde fout in dit 0–100-vlak32867.11
Gemiddelde-updates0
Vertegenwoordigers3 / 45

Het afwisselen van beide stappen verhoogt deze gekwadrateerde-afstandsfout nooit. Verschillende begincentra kunnen in verschillende lokale optima eindigen. Lege groepen behouden hun centrum. Een centrum handmatig verplaatsen herstart de oefening.

Verplaats centra naar groepsgemiddelden en wijs monsters opnieuw toe in drie rondes; houd daarna het resultaat vast. Opnieuw afspelen initialiseert na convergentie een nieuwe benadering. Gebruik een regelaar om het over te nemen.

Wissel het toewijzen van punten en het verplaatsen van middelpunten af en bekijk de kwadratische fout. Dit is de Lloyd-iteratie achter K-means.

Probeer het zelf
  1. Verplaats vertegenwoordigers naar hun groepsgemiddelden en wijs de monsters daarna opnieuw toe.
  2. Kies een vertegenwoordiger en verplaats zijn R- of G-coördinaat voor een ander beginpunt.

Let op: Elke Lloyd-stap behoudt of verlaagt de gekwadrateerde fout. Na een gemiddelde-update kunnen bewaarde lijnen tijdelijk afwijken van de nieuwe dichtstbijzijnde-centrumregio’s.

Volledige uitleg Open in het Lab

Het afstandsprobleem

Elk kwantisatie-algoritme is afhankelijk van het meten van afstand tussen kleuren. De naïeve Euclidische afstand in RGB-ruimte behandelt rood, groen en blauw als even belangrijk, maar zo werkt menselijk zicht niet. We zijn veel gevoeliger voor veranderingen in groen (luminantie) dan in blauw.

Betere kwantisatie gebruikt perceptuele afstands-maten — werken in CIELAB-ruimte waar Euclidische afstand de perceptuele verschillen benadert, of luminantie-wegingsfactoren toepassen op RGB-afstanden. Deze ene aanpassing kan de kwaliteit van een palet drastisch verbeteren zonder het algoritme zelf te veranderen.

Octree-kwantisatie

Voor real-time toepassingen bouwt de octree methode een boomstructuur die de RGB-kubus recursief opdeelt in acht octanten. Bladknopen verzamelen pixel-aantallen, en de boom wordt van onder naar boven gesnoeid — waarbij de minst gevulde knopen als eerste worden samengevoegd — totdat de gewenste paletgrootte is bereikt.

Octrees zijn geheugenefficiënt en kunnen in één enkele pass over de afbeelding worden opgebouwd. Het is het voorkeursalgoritme voor veel praktische implementaties, waaronder de GIF-weergave in vroege webbrowsers.

Kwantisatie in de praktijk

In het Lab vergelijkt Geïndexeerd palet median-cut, populariteits- en uniforme kwantisatie. Genereer of importeer een afbeelding, kies 4, 8, 16 of 32 kleuren en bekijk welke gebieden detail verliezen. De studie over vectorkwantisatie demonstreert afzonderlijk de toewijzings- en zwaartepuntstappen van K-means; K-means en octree zijn geen selecteerbare Lab-kwantisatiemethoden.

Gecombineerd met dithering kan zelfs een 16-kleurenpalet fotografische details reproduceren. Het kwantisatie-algoritme kiest welke 16 kleuren; het dithering-algoritme bepaalt hoe ze worden gerangschikt. Samen veranderen ze strikte beperkingen in creatieve mogelijkheden.

Gerelateerde concepten

Gerelateerde artikelen

Verken gerelateerde secties

Meer over het werk: