Zo gebruik je deze tool
- Voer een basiskleur in of kies er een. Met “Nieuwe willekeurige basiskleur” wordt er een voor je gekozen.
- Kies een harmonie. Met “Tinten en schakeringen” maak je een schaal met 11 stappen, van heel licht tot heel donker.
- Vergrendel de kleuren die je wilt behouden en probeer daarna andere basiskleuren.
- Kies HEX, CSS-aangepaste eigenschappen of JSON, stel een naam in en kopieer de code.
Hoe het werkt
Kleurharmonieën ontstaan door de tint over het kleurenwiel te draaien: complementair voegt de tegenoverliggende tint toe (180°), analoog voegt tinten toe op 30° en 60° aan beide kanten, triadisch gebruikt drie tinten met 120° ertussen, tetradisch vier tinten met 90° ertussen en gesplitst complementair de twee tinten naast de complementaire kleur (150° en 210°).
De rotatie vindt plaats in OKLCH, niet in HSL. OKLCH houdt de waargenomen helderheid gelijk, zodat geel en blauw in hetzelfde palet ongeveer even helder lijken en geel niet fel oplicht. Als een gedraaide kleur buiten het bereik valt dat sRGB-schermen kunnen weergeven, wordt de chroma verlaagd totdat de kleur binnen het bereik valt. De helderheid en tint blijven daarbij gelijk.
De schaal met tinten en schakeringen gebruikt vaste stappen voor de OKLCH-helderheid, met namen van 50 tot 950. Dit is vergelijkbaar met de naamgeving in Tailwind CSS. De chroma wordt dicht bij wit en zwart verlaagd, zodat de lichtste tinten er niet neonachtig uitzien. Kleurharmonieën zijn een uitgangspunt: controleer tekst- en achtergrondcombinaties met een contrastchecker voordat je ze voor inhoud gebruikt.
Voorbeelden
Een merkkleur met een accentkleur
Met basiskleur #3366cc voegt “Complementair” #8c6500 toe: een warme okerkleur met dezelfde OKLCH-helderheid. Blauw en oranjerood zijn een veelgebruikte combinatie voor accenten bij een blauw merk.
Ontwerptokens voor een componentbibliotheek
Kies “Tinten en schakeringen”, stel de naam in op “primary” en exporteer CSS-variabelen. Je krijgt --primary-50 tot --primary-950, klaar voor achtergronden (50–100), randen (200–300) en tekst (700–900).
Eén kleur behouden tijdens het verkennen
Vergrendel de tweede kleur van een triadisch palet en probeer daarna verschillende basiskleuren. De vergrendelde kleurstaal behoudt zijn HEX-waarde terwijl de andere kleuren veranderen.
Veelgestelde vragen
Waarom verschillen mijn kleuren van die in een HSL-kleurenwiel?
Deze tool draait de tint in OKLCH, een perceptuele kleurruimte. De tinten komen niet precies overeen met die in HSL. Daardoor kan de “tegenovergestelde” kleur iets afwijken van de kleur die een HSL-kleurenwiel oplevert.
Kan ik de JSON in Tailwind CSS gebruiken?
De JSON koppelt namen aan HEX-waarden, in hetzelfde formaat dat Tailwind accepteert voor een kleur in de themaconfiguratie. In Tailwind 4 kun je de CSS-variabelen ook in een @theme-blok plakken nadat je ze hebt hernoemd naar --color-…
Zijn de gegenereerde paletten toegankelijk?
Niet automatisch. Een harmonie zegt niets over het contrast tussen tekst en achtergrond. Controleer elke combinatie die je wilt gebruiken met de Contrast Checker.
Privacy
Paletten worden in je browser gegenereerd. Je kleuren worden nergens naartoe gestuurd of opgeslagen.