Kleurenpaletten

Kleurtinten-generator

Kies een kleur en zie meteen alle tinten, van de lichtste tot de donkerste. Tik op een tint om de HEX-code te kopiëren.

Tinten van 50 tot 950

Elf tinten uit dezelfde kleurfamilie, geordend zoals in Tailwind. Jouw kleur staat gemarkeerd bij de tint die erbij hoort.

Lichte tinten (met wit)

Tik op een tint om de HEX-code te kopiëren.

Donkere tinten (met zwart)

Gebroken tinten (met grijs)

Tinten exporteren

Wat zijn kleurtinten

Het is de reeks tinten die uit één kleur ontstaan: van bijna wit tot bijna zwart. Ze delen dezelfde basiskleur, daarom passen ze moeiteloos bij elkaar.

Lichte, donkere en gebroken tinten

Een lichte tint is de kleur gemengd met wit: lichter en zachter. Een donkere tint is de kleur gemengd met zwart: dieper en donkerder. Een gebroken tint is de kleur gemengd met grijs: rustiger en eleganter.

Zo gebruik je tinten in je ontwerp

Gebruik de lichte tinten (50 tot 200) voor achtergronden, de middelste (400 tot 600) voor knoppen en links, en de donkere (700 tot 950) voor tekst en randen. Met één kleur heb je zo een overzichtelijke, samenhangende interface.

Veelgestelde vragen

Hoe worden de tinten berekend?

We gebruiken de kleurruimte OKLCH, die nabootst hoe het oog helderheid waarneemt. Zo lijken de stappen tussen de tinten gelijkmatig, zonder harde sprongen.

Wat betekenen de getallen 50 tot 950?

Dat is de schaal van Tailwind CSS en veel designsystemen: 50 is de lichtste tint en 950 de donkerste. Jouw kleur komt bij het getal dat er het best bij past.

Kan ik de tinten in Tailwind of CSS gebruiken?

Ja. Typ een naam, kies het formaat en kopieer de code: CSS-variabelen om direct te plakken of het kleurblok voor je Tailwind-configuratie.

Wat is het verschil tussen tinten en een kleurenpalet?

Tinten zijn variaties van één kleur. Een palet combineert verschillende kleuren die bij elkaar passen. Veel paletten gebruiken tinten voor achtergronden en tekst, plus één of twee accentkleuren.

Andere gidsen en tools