CSS-gradient generator
Lineaire, radiale en conische verlopen.
Ontwerp
Kleuren uit een afbeelding halen.
Dat is de moeite van het uitleggen waard, want het bepaalt waarvoor je de tool kunt gebruiken.
De afbeelding wordt gelezen met de Canvas-API van de browser en gaat nooit naar een server.
Je kunt hem dus gebruiken voor interne schermafbeeldingen, klantmateriaal onder geheimhouding, of elk bestand dat je computer niet mag verlaten.
Het betekent ook dat de tool werkt zonder internetverbinding zodra de pagina is geladen, en dat geen dienst je een maximale bestandsgrootte oplegt: de grens is het geheugen van je browser.
En er blijft nergens een kopie achter. Sluit je het tabblad, dan is de afbeelding weg.
Voor gegevensbescherming is dat relevant als je werkt met afbeeldingen waarop persoonsgegevens staan: er is geen doorgifte aan een derde partij die je moet vastleggen, en geen verwerker met wie je een verwerkersovereenkomst moet sluiten.
Dat zijn twee verschillende dingen die vaak door elkaar lopen.
De exacte kleur is die van de pixel waarop je klikt. Handig om een specifieke kleur na te maken, maar gevoelig voor ruis in de afbeelding: twee naast elkaar liggende pixels van hetzelfde "blauw" kunnen behoorlijk verschillen.
Neem de kleur daarom uit een breed, egaal vlak, nooit op een rand of in een schaduw of een lichtvlek.
De dominante kleur krijg je door vergelijkbare pixels te groeperen en de groepen op frequentie te ordenen. Dat geeft een stabieler antwoord en is wat je wilt om "het palet" uit een foto te halen.
Let op dat de meest voorkomende kleur niet de meest kenmerkende is: op een foto met lucht is de dominante kleur het blauw van de lucht, ook al is het onderwerp iets anders.
En wees voorzichtig met sterk gecomprimeerde JPEG-bestanden: de artefacten verstoren de kleuren aan de randen van egale vlakken, en daar liegt de pipet.
Een paar aandachtspunten voordat je een kleur goedkeurt.
Heeft de afbeelding een ander ingebed kleurprofiel dan sRGB, dan kan de browser hem omgezet tonen terwijl de canvasgegevens in een andere ruimte staan. De waarde die je krijgt komt dan niet exact overeen met wat je ziet.
Voor ontwerpwerk waarbij de kleur ertoe doet, controleer je het resultaat tegen het originele bestand in een programma met kleurbeheer.
Bij schermafbeeldingen speelt dat meestal niet, want die staan doorgaans al in sRGB.
Gebruiken die goed werken: de merkkleur uit een logo halen waarvan je de huisstijl niet hebt, een palet bouwen vanuit een referentiefoto, of controleren welke kleur een andere website gebruikt op basis van een schermafbeelding.
En ga je de gevonden kleuren voor tekst gebruiken, controleer daarna dan het contrast. Een palet uit een foto voldoet vrijwel nooit zomaar aan de toegankelijkheidsniveaus.
Nee. Die wordt in je browser verwerkt met de Canvas-API en verlaat je computer niet.
In een breed, egaal vlak, nooit op een rand of in een schaduw of lichtvlek.
De exacte is die van één pixel; de dominante groepeert vergelijkbare pixels en is stabieler.
Dat kan het kleurprofiel zijn, of JPEG-artefacten aan de randen van vlakken.
Ja, want er is geen doorgifte aan een derde partij.
Ja, zodra de pagina is geladen.