Een Kleurkiezer Gebruiken om Kleuren van Pixels te Vinden
Snel antwoord
Om een kleur te kiezen: open de Color Picker, upload een afbeelding (of gebruik de screen eyedropper), klik op de pixel waarvan je de kleur wilt en de HEX-, RGB- en HSL-waarden verschijnen. Alle verwerking gebeurt lokaal.
Invoering
Een kleurkiezer (ook eyedropper genoemd) laat je de exacte kleur van een pixel vinden. Dit is essentieel voor het matchen van merkkleuren, het samplen van kleuren uit afbeeldingen of het bouwen van een kleurenpalet uit een foto. Browser-gebaseerde kleurkiezers kunnen kleuren uit geüploade afbeeldingen lezen via de Canvas API, en de ingebouwde EyeDropper API kan kleuren van overal op het scherm kiezen.
Stap voor stap
-
Open het gereedschap Kleurkiezer
Ga naar de pagina Kleurkiezer. De tool ondersteunt het kiezen van kleuren uit geüploade afbeeldingen en, in ondersteunde browsers, vanaf elke plek op het scherm via de Pipet API.
-
Kies uw bron
Om uit een afbeelding te kiezen: upload een afbeelding of sleep deze neer. Om vanaf het scherm te kiezen (alleen Chrome/Edge): klik op de knop 'Kies uit scherm' en klik vervolgens ergens op uw scherm.
-
Klik op de pixel om een voorbeeld te bekijken
Om afbeeldingen te kiezen, beweegt u uw cursor over de afbeelding en klikt u op de pixel waarvan u de gewenste kleur wilt hebben. De tool leest de pixelkleur van het canvas met behulp van getImageData(). Een vergrootglas kan u helpen de exacte pixel te selecteren.
-
Lees de kleurwaarden
Het hulpmiddel geeft de gekozen kleur weer in de formaten HEX, RGB en HSL, samen met een staal. De waarden worden onmiddellijk bijgewerkt als u de cursor verplaatst.
-
Kopieer de kleur
Klik op Kopiëren naast een willekeurig formaat om de kleurwaarde naar uw klembord te kopiëren. Gebruik het in uw CSS, ontwerptool of applicatie.
Voorbeelden
Kies een merkkleur uit een logo
Invoer: logo.png, klik op de merkkleurpixel
Uitvoer: HEX: #1a73e8, RGB: rgb(26, 115, 232), HSL: hsl(217, 89%, 51%)
Proef een kleur van een foto
Invoer: photo.jpg, klik op een luchtpixel
Uitvoer: HEX: #87ceeb, RGB: rgb(135, 206, 235), HSL: hsl(197, 71%, 73%)
Kies uit scherm (Chrome/Edge)
Invoer: Klik op 'Kies uit scherm' en klik vervolgens op een willekeurige pixel op uw scherm
Uitvoer: HEX waarde van die pixel, bijvoorbeeld #ff5733
Veelvoorkomende problemen
- Anti-aliasing laat kleuren aan de randen overvloeien: pixels aan de rand tussen twee kleuren zijn een overvloeiing. Neem monsters vanuit het midden van een effen kleurgebied voor nauwkeurigheid.
- EyeDropper API niet ondersteund: de schermkiezer vereist Chrome 95+ of Edge 95+. Firefox en Safari ondersteunen dit niet; gebruik in plaats daarvan de afbeeldingsuploadmethode.
- JPEG compressie verandert de kleuren —JPEG compressie met verlies verandert de pixelkleuren enigszins. Gebruik voor exacte merkkleuren een PNG of de originele vectorbron.
- Kleurprofielverschillen: afbeeldingen met ingebedde kleurprofielen (ICC) kunnen anders worden weergegeven dan hun onbewerkte pixelwaarden suggereren.
Tips
- Gebruik het vergrootglas om de exacte pixel te selecteren. Bij hoge zoom kunt u één nauwkeurige pixel kiezen in plaats van een overvloeiende rand.
- Neem meerdere pixels uit een effen gebied en maak een gemiddelde ervan als er door compressie ruis is ontstaan. Dit geeft een representatievere kleur.
- Gebruik de Pipet API (Chrome/Edge) om kleuren uit elke toepassing te kiezen, niet alleen afbeeldingen in de browser.
- Gebruik onze Kleurkiezer voor directe, persoonlijke kleurmonsters: uw afbeeldingen verlaten uw browser nooit.