Kleurenpalet-generator

Hoe je dit gebruikt Kleurenpalet-generator

1. Kies een basiskleur.
2. Selecteer het type harmonie.
3. Kopieer de waarden die je gaat gebruiken.

De soorten harmonie

Ze zijn gebaseerd op de onderlinge positie van kleuren in de kleurencirkel.

Complementair geeft het sterkste contrast, en vermoeit daarom als je beide kleuren evenveel gebruikt. Het werkt bij een heel ongelijke verhouding: de een overheerst, de ander verschijnt alleen in details.

Analoog is het makkelijkst goed te krijgen en wordt het meest gebruikt in interfaces, omdat het niet met de inhoud concurreert.

Monochroom wordt onderschat. Een schaal van één tint met een accent hier en daar lost de meeste projecten op en gaat bijna nooit mis.

Hoeveel kleuren je echt nodig hebt

Hier zit de meest gemaakte fout: tien kleuren genereren en ze allemaal gebruiken.

Een interface heeft minder kleuren nodig dan mensen denken. Eén merkkleur, een schaal neutralen, en drie semantische kleuren voor geslaagd, waarschuwing en fout.

De schaal neutralen doet het meeste werk: achtergronden, randen, secundaire tekst, scheidingslijnen. Maak er geen zuivere grijzen van maar geef ze een lichte verschuiving richting je merkkleur — het valt nauwelijks op en zorgt dat alles gekozen lijkt.

Semantische kleuren mogen niet samenvallen met je merkkleur. Is je merk groen en je succesmelding ook, dan verlies je het signaal.

De verhouding telt net zo zwaar als de selectie. Een praktische vuistregel is ongeveer zestig procent dominant neutraal, dertig procent secundair en tien procent accent.

En codeer informatie nooit alleen met kleur: ongeveer één op de twaalf mensen heeft een vorm van kleurenblindheid. Zet er altijd een icoon, een tekst of een vorm naast.

Van palet naar code

Een palet dat je niet kunt onderhouden heeft geen waarde.

Genereer per kleur een schaal van helderheden, niet één waarde. Vijf tot zeven stappen volstaan meestal, en dan heb je van dezelfde tint versies voor achtergrond, rand, tekst en actieve toestand.

Bouw die schaal als het kan in OKLCH: omdat de helderheid overeenkomt met de waarneming, zijn de stappen visueel gelijkmatig, wat in HSL niet lukt.

Sla alles op als CSS-variabelen met functionele namen, en regel de donkere modus door die variabelen te herdefiniëren in plaats van je componenten te herschrijven.

Controleer het contrast van elke tekst-achtergrondcombinatie die je daadwerkelijk gebruikt. Een mooi palet dat op niveau AA zakt moet overnieuw, en dat ontdek je liever voordat je het op vijftig schermen hebt toegepast.

En bekijk het palet op een slecht scherm voordat je het goedkeurt. Nuances die je op een gekalibreerde monitor ziet, verdwijnen op een goedkope laptop in de zon.

Veelgestelde vragen