Kleurenpalet uit afbeelding

Over het samenstellen van een palet uit een foto

Elke ontwerper heeft het gedaan: een foto heeft precies de sfeer die het project nodig heeft, en de klus is om die sfeer uit het beeld in een stylesheet te krijgen.

Gokken werkt niet. Een kleur die op het scherm overkomt als „warm grijs" is zelden het grijs dat u zelf getypt zou hebben. De enige manier om het goed te krijgen is de echte pixel nemen.

Sleep de foto erin, beweeg eroverheen met het vergrootglas en klik de tinten die u wilt. Elke tint komt in uw palet hieronder terecht, met HEX-, RGB- en HSL-waarde klaar om te kopiëren.

Hoe u het gebruikt

• Klik op Klik om te uploaden, sleep een foto op de pagina, of plak een afbeeldings-URL
• Beweeg de aanwijzer over de foto — het vergrootglas toont de pixel eronder
• Klik om die kleur aan uw palet toe te voegen
• Kies er zoveel als u nodig hebt — vijf of zes is meestal een palet
• Klik op een staal in uw palet om het terug te halen: het grote staal en de HEX-, RGB- en HSL-waarden schakelen erheen, en de hex wordt gekopieerd
• Gebruik HEX / RGB / HSL kopiëren voor het formaat dat u nodig hebt

Waarom u de kleuren zelf kiest

Sommige hulpmiddelen raden een palet automatisch door de meest voorkomende kleuren te groeperen. Dat klinkt beter dan het is. De meest *voorkomende* kleur in een foto is meestal een groot, dof vlak — lucht, muur, schaduw — terwijl de tint die de foto zijn karakter geeft vaak een kleine is: de roest op een deur, het groen van één blad, een lichtje op een kopje.

U ziet welke welke is. Met het vergrootglas neemt u precies díe pixel, op volle vergroting, zodat het palet is wat u bedoelde en niet wat een gemiddelde opleverde.

Het palet is een plek om naar terug te keren

De stalen zijn niet alleen een verslag van wat u aanklikte. Klik er een aan en het wordt de huidige kleur — het grote staal en alle drie de waarden schakelen erheen, en het staal waar u naar kijkt krijgt een ring zodat u ziet welke het is.

Dat is wat het vergelijken van twee tinten praktisch maakt: neem ze allebei uit de foto en klik er daarna tussen heen en weer terwijl u de waarden leest, in plaats van door het beeld te speuren naar de pixel van een minuut geleden.

Drie formaten, omdat verschillende plekken verschillende willen

Elke kleur die u kiest wordt in alle drie tegelijk getoond:

• HEX — #3f7a5e. CSS, ontwerpprogramma's, bijna overal
• RGB — rgb(63, 122, 94). Handig als u de kanalen apart nodig hebt
• HSL — hsl(154, 32%, 36%). Die gebruikt u om een reeks te bouwen: houd de tint, verschuif de lichtheid, en u hebt een lichte en een donkere die bij elkaar horen

Waar mensen het voor gebruiken

• Een merkkleur uit een logo halen als niemand de huisstijlgids kan vinden
• Een website- of presentatiepalet bouwen vanaf een hoofdfoto
• Verf, stof of garen matchen aan een foto van het echte ding
• De exacte HEX van een kleur in een schermafbeelding krijgen
• De kleuren vinden van een schilderij of foto waar u van uit wilt gaan
• Nagaan wat een kleur werkelijk is, in plaats van hoe hij er naast een andere uitziet

Goed om te weten

• Er wordt niets geüpload. De afbeelding wordt in de pagina gelezen en verlaat uw apparaat nooit
• Werkt met PNG, JPG, GIF en WebP
• U kunt een afbeeldings-URL plakken in plaats van een bestand — maar sommige servers verbieden andere sites hun pixels te lezen (CORS). Download in dat geval de afbeelding en upload het bestand
• Kleuren worden gelezen uit de echte pixels op ware grootte, niet uit het verkleinde voorbeeld, dus de waarde klopt exact
• Werkt op telefoon en tablet net zo goed als op een computer
• Dit is dezelfde pipet als Kleurenkiezer uit afbeelding — gebruik die pagina als u één kleur wilt in plaats van een set

Verwante hulpmiddelen

• Kleurenkiezer uit afbeelding — hetzelfde hulpmiddel, gericht op één kleur
• Kleurenkiezer — een kleur uit een kleurenwiel in plaats van uit een foto
• Kleurcontrast controleren — nagaan of uw palet leesbaar is voordat u het inzet
• CSS-verloop maken — twee van uw nieuwe kleuren tot een verloop mengen
• Woordwolk maken — nog een plek om een palet in te zetten