Een exacte kleur uit een afbeelding halen: HEX, RGB en HSL

Om de exacte kleur uit een afbeelding te halen, lees je de waarde van één pixel af in plaats van het met het oog te schatten. Open de afbeelding in de kleurkiezer, beweeg over de plek, klik en kopieer de HEX-code. De uitkomst is de opgeslagen waarde van die pixel, dus die blijft gelijk als je dezelfde plek in hetzelfde bestand opnieuw kiest.

Kleurkiezer voor afbeeldingenExacte kleurcode nodigGratis doen

Wat een pixel opslaat

Elke pixel is een klein vierkantje kleur. Op een scherm of in een afbeeldingsbestand wordt hij opgeslagen als drie getallen, voor rood, groen en blauw, elk van 0 tot 255. Puur rood is 255, 0, 0. Die drie getallen bevatten in elk formaat dezelfde informatie, dus één kleur kan op meerdere manieren worden geschreven.

HEX, RGB en HSL

• HEX schrijft elk getal in hexadecimaal, twee tekens per kanaal. #FF0000 is puur rood. Webpagina's, CSS en de meeste ontwerptools gebruiken deze notatie.
• RGB schrijft dezelfde getallen decimaal, als rgb(255, 0, 0). Het is dezelfde kleur als de HEX-code.
• HSL beschrijft de kleur zoals mensen erover praten. Tint is de hoek op het kleurenwiel, verzadiging is hoe sterk de kleur is, en lichtheid is hoe licht of donker hij is. hsl(0, 100%, 50%) is puur rood.

Gebruik HEX wanneer je een kleur in code plakt, RGB wanneer een tool daarom vraagt, en HSL wanneer je een lichtere of donkere versie van dezelfde tint wilt. Alleen de lichtheid in HSL aanpassen behoudt de tint, wat met HEX lastiger is om met de hand te doen. Voor contrastcontroles tussen twee kleuren, zie HEX, RGB, HSL, CMYK en contrast.

Dit is een kleur die in een stylesheet wordt gebruikt:

.badge {
  background: #1F7A5C;
  color: #FFFFFF;
}

Waarom de code niet altijd overeenkomt met het scherm

• De afbeelding is gecomprimeerd. JPEG bespaart ruimte door fijne details glad te maken, dus pixels bij een rand kunnen iets afwijken van de kleur die je in het midden van een vlak ziet.
• Randen lopen in elkaar over. Waar twee kleuren elkaar raken, zijn de pixels ertussen mengsels. Het zijn geen kleuren op zich.
• Kleurprofielen verschillen. De kleurkiezer leest de waarden die de browser decodeert, en die zijn in sRGB. Een foto die met een breed kleurprofiel is opgeslagen, kan in andere programma's anders eruitzien.
• Schalen vermengt pixels. Een screenshot die op een geschaalde schermgrootte is gemaakt, kan vermengde pixels bevatten. Maak de screenshot waar mogelijk op volledige grootte.
• Zeer grote afbeeldingen worden van een kopie gelezen. Afbeeldingen met een langste zijde van meer dan 6000 pixels worden gelezen van een kopie van 6000 pixels, dus één pixel kan iets afwijken van het bestand op volledige grootte.

Kies uit het midden van een egaal vlak

Zoek een gebied met één kleur en ga naar het midden ervan. De vergrootglas toont de 11 bij 11 pixels rond de aanwijzer, zodat je ziet of de plek gemengd of egaal is. Met het toetsenbord verplaats je het kruisje één pixel per keer met de pijltjestoetsen, of tien tegelijk met Shift, en druk je op Enter om te kiezen. Controleer de uitlezing voordat je hem kopieert.

Gebruik het palet voor een kleurenschema

Een foto heeft zelden maar één kleur waar je om geeft. Het palet toont tot zes van de belangrijkste kleuren. Het werkt door elke pixel af te ronden naar 16 niveaus per kanaal, de groepen te tellen en de meest voorkomende groepen te houden die van elkaar verschillen. Elk staaltje toont het gemiddelde van de groep. Tik op een staaltje om de HEX-code te kopiëren. Zie het palet als startpunt, want het is een gemiddelde en geen gemeten merkkleur.

Omzetten tussen formaten

Vraagt een ontwerptool om een ander formaat, plak dan de HEX-code in een kleurconverter. Die zet HEX, RGB en HSL om zonder de kleur te veranderen, dus het resultaat past bij de code die je hebt gekozen.

Recente keuzes en privacy

De tool bewaart je laatste keuzes op de pagina, zodat je ze kunt vergelijken. Ze blijven alleen in het geheugen van dit tabblad en verdwijnen als je het sluit. De afbeelding zelf wordt binnen je browser gelezen en nooit naar een server gestuurd.

Zo doe je het met fixmint

1. Open de kleurkiezer voor afbeeldingen en sleep de foto erin.
2. Beweeg de aanwijzer over de plek. Of zet de focus op de afbeelding en gebruik de pijltjestoetsen om het kruisje één pixel per keer te verplaatsen, met Shift voor tien pixels.
3. Klik, of druk op Enter, om de kleur te kiezen. Controleer de uitlezing voordat je hem kopieert.
4. Gebruik de knop Kopiëren naast HEX, RGB of HSL om de waarde te kopiëren die je nodig hebt.
5. Vraagt een ontwerptool om een ander formaat, plak de waarde dan in de kleurconverter.

Snelle antwoorden

Waarom ziet de kleur er op mijn scherm anders uit? Je scherm toont een kleurbeheerde, geschaalde versie van het bestand. Kies uit het midden van een egaal vlak en vergelijk de HEX-code met een bekend staaltje.

Welk formaat moet ik kopiëren? HEX voor webpagina's en de meeste ontwerptools. Gebruik RGB of HSL wanneer een tool daarom vraagt.

Uploadt de tool mijn afbeelding? Nee. De afbeelding wordt gedecodeerd en gelezen binnen je browser.