Kleurkiezer (Color Picker)
Kies een kleur en kopieer direct HEX-, RGB- en HSL-waarden. Maak handige tinten en schakeringen voor achtergronden, randen en UI-statussen.
🔒 Draait volledig in uw browser — niets wordt geüploadKies kleuren en kopieer bruikbare waarden
Een betrouwbare kleurkiezer moet meer doen dan een mooi vierkantje tonen. Ontwerpers, ontwikkelaars en contentmakers hebben dezelfde kleur vaak in meerdere formaten nodig, afhankelijk van de bestemming. CSS accepteert HEX, RGB en HSL, designsystemen documenteren tokens vaak als HEX en snelle prototypeaanpassingen gaan meestal makkelijker in HSL, omdat tint, verzadiging en helderheid onafhankelijk van elkaar te wijzigen zijn. Deze tool toont die formaten naast elkaar, zodat je één keer een kleur kiest en de waarde kopieert die bij je workflow past.
Alles gebeurt lokaal in de browser. De kleurinvoer, de omrekeningen en de kopieerknoppen draaien met JavaScript aan de clientzijde, dus er is geen account, upload of verwerking op afstand. Daardoor is de tool geschikt voor privé merkpaletten, onaangekondigde producthema's, klantwerk en snelle UI-experimenten die je computer niet mogen verlaten.
Tinten en schakeringen gebruiken in interfaces
Tinten en schakeringen helpen één merkkleur een complete interface te dragen. Lichtere tinten werken voor subtiele achtergronden, hover-statussen, meldingspanelen en geselecteerde rijen. Donkerdere schakeringen leveren randen, ingedrukte statussen, accenten voor de donkere modus of sterk benadrukte tekst wanneer de oorspronkelijke kleur te fel is. De kleurvlakken hier houden tint en verzadiging gelijk en veranderen alleen de helderheid, wat een eenvoudige schaal oplevert die bij de basiskleur past.
Zie de gegenereerde schaal als startpunt en niet als een definitief designsysteem. Menselijke waarneming is niet perfect lineair en sommige kleurtinten hebben handmatige aanpassing nodig om gelijkmatig verdeeld te lijken. Blauw en paars verdragen vaak een groot helderheidsbereik, terwijl geel donkerdere schakeringen kan vragen voor leesbare tekst. Kopieer de waarden, test ze in het echte onderdeel en verfijn de stappen die het belangrijkst zijn.
Kiezen tussen HEX, RGB en HSL
HEX is compact en gebruikelijk bij de overdracht van ontwerpen, waardoor het een goede standaardkeuze is voor documentatie. RGB is handig wanneer een tool numerieke rode, groene en blauwe kanalen vraagt of wanneer je rechtstreeks in schermlicht denkt. HSL is meestal het prettigste formaat voor kleine aanpassingen: verschuif de tint om rond het kleurenwiel te draaien, verlaag de verzadiging voor een rustiger tint of wijzig de helderheid voor een tint of schakering. Als je alle drie zichtbaar houdt, maak je minder fouten bij het wisselen tussen ontwerptools, CSS-bestanden en componentbibliotheken.
Hoe te gebruiken
- Kies een kleurGebruik de kleurinvoer of plak een HEX-waarde in het veld.
- Kopieer een formaatKopieer de HEX-, RGB- of HSL-waarde, afhankelijk van waar je die wilt gebruiken.
- Ontdek variatiesGebruik de kleurvlakken met tinten en schakeringen als snelle startpunten voor UI-statussen en achtergronden.