Lichte en donkere varianten genereren

Productontwerpers gebruiken dit om lichte en donkere varianten van een kleur te maken voordat zij een samenhangend palet voor de interface vastleggen.

U kunt lichte en donkere varianten genereren. De volledige verwerking blijft in uw browser; uw invoer wordt niet geüpload, gedeeld of opgeslagen.

Hoe te gebruiken

Voer in het invoerveld een basiskleur in hexadecimaal formaat in.
Voer de generator uit om lichtere en donkerdere varianten te maken.
Bekijk de suggesties en kies tinten die bij je interface passen.
Probeer een andere basiskleur als het voorgestelde palet niet bij je doel past.
Kopieer de geselecteerde waarden naar je designsysteem of stylesheet.

Voorbeeld

Bekijk bij het meegeleverde blauwe voorbeeld hoe de tint zich uitbreidt naar lichtere en donkerdere tonen. Dit helpt hover-, actieve of uitgeschakelde staten op te bouwen zonder met een lege pagina te beginnen.

Invoer

#2563EB

Resultaat

100: #BED0F9
300: #719AF2
500: #2563EB
700: #1C4AB0
900: #133276

Limieten en formaten

Het hulpmiddel stelt varianten voor op basis van één kleur, maar controleert de toegankelijkheid niet.
Gegenereerde tinten vervangen geen beoordeeld merkenpalet.
Test elke waarde in de echte interface, omdat weergaveomstandigheden het uiterlijk kunnen veranderen.
Een lichte of donkere variant kan op sommige achtergronden niet werken, zelfs als die in de lijst correct lijkt.

Waar de verwerking gebeurt

Het genereren gebeurt in je browser. De basiskleur wordt niet naar buiten verzonden en de pagina slaat geen palet op. Je kunt tijdens dezelfde sessie meerdere basiskleuren proberen.

Veelgestelde vragen

Kan ik van een specifieke kleur uitgaan?

Ja, voer de basiskleur in hexadecimale vorm in. Het hulpmiddel gebruikt die om een reeks lichtere en donkerdere varianten te berekenen.

Zijn de varianten toegankelijk?

Ze bieden contrastideeën, maar het hulpmiddel meet geen naleving. Controleer tekst- en achtergrondparen met een geschikte contrastchecker.

Hoeveel kleuren kan ik genereren?

Het proces begint met één kleur en levert meerdere tinten op. Herhaal het voor een volledig palet met elke hoofdkleur in je project.

In welk formaat voer ik de basiskleur in?

Voer de basiskleur in hexadecimale notatie in. Daarna kun je de generator starten om lichtere en donkere varianten te maken. Bekijk de voorstellen en kies tinten die bij je interface passen. Als de voorgestelde reeks niet bij je doel aansluit, probeer dan een andere basiskleur. De generatie gebeurt in je browser, dus de basiskleur wordt niet naar buiten gestuurd en er wordt geen palet opgeslagen.

Kan ik meerdere basiskleuren in dezelfde sessie proberen?

Ja, je kunt tijdens dezelfde sessie verschillende basiskleuren invoeren. De tool berekent telkens een set lichtere en donkere varianten op basis van de kleur die je opgeeft. Let erop dat de varianten suggesties zijn en dat de tool de toegankelijkheid niet controleert. Test elke waarde in de echte interface en controleer tekst- en achtergrondparen met een geschikte contrastchecker voordat je ze overneemt.