Kleurnaamzoeker
Voer een HEX-, RGB- of HSL-code in om de dichtstbijzijnde kleurnaam te vinden, vergelijkbare tinten te vergelijken en waarden direct te kopiëren.
Kleurnaamzoeker
Wat is de kleurnaamzoeker?
De kleurnaamzoeker laat de dichtstbijzijnde kleurnaam zien zodra je een HEX-, RGB- of HSL-waarde invoert. De tool vergelijkt je kleur met 140 standaard CSS-kleuren en met een uitgebreide databank van meer dan 1.500 kleurnamen.
Dat is handig wanneer je in Figma, Photoshop, een styleguide of een bestaand project alleen een kleurcode hebt, maar er een duidelijke naam bij wilt zetten. Je ziet direct een Nederlandse primaire naam, de Engelse canonieke naam en vijf vergelijkbare alternatieven om snel verder te werken.
Wanneer deze tool handig is
- Design en branding – Zet een HEX-code snel om naar een bruikbare kleurnaam voor presentaties, briefings, merkrichtlijnen en design systems
- Communicatie met klanten of collega’s – Benoem kleuren duidelijker wanneer je keuzes uitlegt aan stakeholders, teams of opdrachtgevers
- CSS en frontend – Controleer of er een standaard CSS-kleurnaam bestaat of kies een vergelijkbare benoemde kleur als referentie
- Kleurpaletten opbouwen – Vergelijk verwante tinten en vind alternatieven binnen dezelfde kleurfamilie
- Leren en documenteren – Koppel Engelse standaardnamen zoals coral, royal blue of slate gray aan een begrijpelijke Nederlandse benaming
- Bestaande assets analyseren – Geef kleuren uit screenshots, bestaande websites of merkmaterialen een consistente naam in je documentatie
Belangrijkste functies
- Meerdere invoerformaten – Werk met HEX, RGB of HSL, of kies de kleur direct via de ingebouwde kleurkiezer.
- Twee kleurdatabanken – Schakel tussen 140 standaard CSS-kleuren en een uitgebreide verzameling met 1.500+ namen.
- Nederlandse hoofdnamen – Waar dat logisch is toont de tool eerst een Nederlandse kleurnaam en daaronder de Engelse canonieke referentie.
- Overeenkomst in procenten – De beste match verschijnt als exacte overeenkomst of als een duidelijk vergelijkbaarheidspercentage.
- Vijf vergelijkbare alternatieven – Naast de beste match zie je meteen vijf verwante kleuren waarop je direct kunt doorklikken.
- Direct kopiëren – Klik op HEX, RGB of HSL om die waarde meteen naar je klembord te kopiëren.
- Lokale zoekgeschiedenis – De 20 meest recente kleuren blijven in je browser bewaard zodat je eerdere resultaten snel kunt terughalen.
Zo gebruik je de tool
- Voer een kleur in – Kies een kleur met de picker of vul een bekende HEX-, RGB- of HSL-waarde in.
- Kies de databank – Beslis of je alleen CSS-kleuren wilt doorzoeken of ook de uitgebreide verzameling met extra namen.
- Bekijk de beste match – Controleer de gevonden kleurnaam, de Engelse referentie en de bijbehorende kleurcodes.
- Vergelijk soortgelijke kleuren – Klik op een van de vijf voorgestelde alternatieven om meteen naar die tint over te schakelen.
- Kopieer de juiste code – Neem HEX, RGB of HSL met één klik over naar CSS, documentatie of een designbestand.
Uitleg bij de kleurdatabase
CSS-kleuren (140)
Dit zijn de officiële benoemde kleuren uit de webstandaard. Namen zoals red, gold en royalblue kun je in CSS direct als kleurwaarde gebruiken. Als je een webveilige en gestandaardiseerde naam zoekt, is dit de beste eerste keuze.
Uitgebreide kleuren (1.500+)
De uitgebreide verzameling voegt veel beschrijvende kleurnamen toe uit onder meer natuur, eten, edelstenen, metalen, neonkleuren en pasteltinten. Deze namen zijn vooral handig als je een specifiekere of meer aansprekende omschrijving nodig hebt.
Hoe de overeenkomst wordt berekend
De getoonde overeenkomst is gebaseerd op de kleurafstand tussen jouw invoer en alle kleuren in de gekozen databank. Hoe kleiner die afstand, hoe hoger het percentage en hoe dichter de voorgestelde kleurnaam bij je oorspronkelijke kleur ligt.
Veelgestelde vragen
Wat is het verschil tussen CSS-kleuren en uitgebreide kleuren?
CSS-kleuren maken deel uit van de webstandaard en kun je direct als benoemde kleur in CSS gebruiken. De uitgebreide databank bevat veel meer namen voor vergelijkbare nuances, maar die gebruik je in CSS via HEX, RGB of HSL en niet als standaard naam.
Hoe wordt het overeenkomstpercentage berekend?
De tool berekent de kleurafstand tussen jouw invoer en alle kleuren uit de gekozen databank. Uit die afstand wordt een begrijpelijk percentage afgeleid: 100% betekent een exacte overeenkomst en lagere waarden geven een grotere kleurafwijking aan.
Kan ik ook 3-cijferige HEX-codes invoeren?
Ja. Als je een verkorte HEX-code zoals F00 invoert, zet de tool die automatisch om naar de volledige vorm FF0000. Je hoeft het hekje # niet apart in te typen.
Waar wordt mijn zoekgeschiedenis opgeslagen?
De zoekgeschiedenis wordt lokaal in de opslag van je browser bewaard. Er worden maximaal 20 recent bekeken kleuren opgeslagen. Zodra je browsergegevens wist of in de tool op “Alles verwijderen” klikt, verdwijnt die geschiedenis weer.
De kleurkiezer werkt niet. Wat kan ik doen?
De native kleurkiezer wordt ondersteund in moderne browsers. Werkt hij niet in jouw omgeving, dan kun je dezelfde kleur nog steeds rechtstreeks invoeren als HEX, RGB of HSL. Een browserupdate lost dit probleem vaak ook op.
Waar komen de Nederlandse kleurnamen vandaan?
De Nederlandse hoofdnamen zijn redactioneel gelokaliseerde benamingen op basis van gangbare Nederlandse kleurwoorden, vaktermen en gebruikelijke vertalingen van Engelse kleurnamen. Wanneer een naam in het Nederlands meestal onveranderd wordt gebruikt, blijft die vertrouwde vorm staan en zie je de Engelse canonieke naam als extra referentie.
Er zijn nog geen reacties. Laat als eerste een mening achter.