Websites en apps
Kies het merk, de achtergrondkleur en de accentkleuren, en plak ze vervolgens rechtstreeks in CSS-variabelen, Tailwind of een Android-thema.
Kleurpaletgenerator — Stel bij elkaar passende kleurpaletten samen en exporteer ze als code.
Kies een basiskleur en een kleurenschema, en stel een evenwichtig kleurenpalet samen van 3 tot 8 kleuren. Selecteer de kleuren die je mooi vindt, controleer hoe goed witte en zwarte tekst op elke kleur leesbaar is, en kopieer vervolgens de codes als CSS-variabelen, Tailwind, Android colors.xml of Jetpack Compose. Alles werkt in je browser en opgeslagen paletten blijven op je apparaat staan.
Maak een palet
Werkt in je browser
Je kleurenpalet
Kies de kleuren die je mooi vindt en druk vervolgens op ‘Genereren’ om de rest te wijzigen. Klik op een hex-code om deze te kopiëren. Klik op het palet en druk op de spatiebalk om nieuwe kleuren te genereren.
Exporteren als code
Opgeslagen paletten
Er zijn nog geen paletten opgeslagen. Klik op ‘Palet opslaan’ om er een op dit apparaat op te slaan.
De gids
Gids voor kleurenpaletten: kleurenschema’s, contrast en exporteren naar code
Ontdek hoe kleurenschema’s werken, controleer het tekstcontrast en pas je kleurenpalet toe in een echt project.
Wat is een kleurenpaletgenerator?
Een kleurenpalet is een kleine verzameling kleuren die goed bij elkaar passen. Ontwerpers stellen deze samen aan de hand van het kleurenwiel: ze kiezen eerst een uitgangskleur en selecteren vervolgens andere tinten op vaste hoeken ten opzichte daarvan, zodat het geheel evenwichtig overkomt in plaats van willekeurig.
Deze generator doet dat voor je. Kies een basiskleur en een kleurenschema, leg de kleuren vast die je mooi vindt en exporteer het resultaat als CSS-, Tailwind-, Android XML- of Jetpack Compose-code. Elk kleurstaal toont ook de RGB- en HSL-waarden en hoe goed leesbaar witte en zwarte tekst erop zou zijn. Hexadecimale waarden zijn in basis 16: de binair-naar-decimaal-omzetter laat zien hoe deze zich verhouden tot gewone getallen.
Waarom mensen kleurenpaletten samenstellen
Dia’s, posters en documenten
Kies zonder giswerk een bij elkaar passende kleurencombinatie voor een presentatie, een bericht op sociale media of een drukwerkontwerp.
Grafieken en dashboards
Kies verschillende maar goed bij elkaar passende kleuren voor gegevensreeksen en controleer het contrast, zodat de labels goed leesbaar blijven.
Kleurenschema’s uitgelegd
| Schema | Hoe het in elkaar zit | Voel en gebruik |
|---|---|---|
| Analoog | Aangrenzende tinten, met een hoek van 30° tussen elkaar | Rustig en natuurlijk. Geschikt voor achtergronden en een rustige gebruikersinterface. |
| Monochromatisch | Eén kleurtoon, verschillende helderheidsgraden | Strak en samenhangend. Geschikt voor minimalistische ontwerpen. |
| Aanvullend | Twee tegengestelde tinten, 180° uit elkaar | Hoog contrast. Geschikt als opvallende accentkleur. |
| Gesplitst complementair | Een kleur plus de twee kleuren die naast de tegenovergestelde kleur liggen | Contrast met minder spanning dan bij complementaire kleuren. |
| Triadisch | Drie tinten, met een onderlinge hoek van 120° | Levendig en evenwichtig. Er moet één overheersende kleur in zitten. |
| Tetradisch (vierkant) | Vier tinten, 90° uit elkaar | Rijk en gevarieerd. Komt het best tot zijn recht met één hoofdkleur. |
Hoe gebruik je de kleurenpaletgenerator?
- Kies een basiskleur met het kleurenvakje, of voer een hex-code in. Kies een kleurenschema en bepaal hoeveel kleuren je wilt.
- Klik op ‘Genereren’ om een nieuwe willekeurige basis te proberen. Klik op ‘Vergrendelen’ onder elke kleur die je wilt behouden.
- Bekijk de opmerkingen over het contrast bij elk kleurstaal. Streef naar een contrastverhouding van 4,5:1 of hoger wanneer er tekst op een kleur staat.
- Klik op een hex-code om deze te kopiëren, of open ‘Exporteren als code’ en kies CSS, Tailwind, Android of Compose.
- Klik op ‘Palet opslaan’ om het op dit apparaat te bewaren, op ‘Link kopiëren’ om het te delen, of op ‘PNG downloaden’ voor een afbeelding.
Kleurcontrast en toegankelijkheid
Contrastverhouding
Een getal tussen 1:1 (identiek) en 21:1 (zwart op wit) waarmee de helderheid van twee kleuren wordt vergeleken.
WCAG AA
Ten minste 4,5:1 voor normale tekst en 3:1 voor grote tekst (ongeveer 24 px, of 19 px vetgedrukt). Dit is de gebruikelijke wettelijke en praktische richtwaarde.
WCAG AAA
Ten minste 7:1 voor normale tekst. Een strengere norm die nuttig is voor mensen met een verminderd gezichtsvermogen.
Vertrouw niet alleen op kleur
Ongeveer één op de twaalf mannen heeft een of andere vorm van kleurenblindheid. Koppel kleuren aan labels, pictogrammen of patronen, zodat de betekenis niet verloren gaat.
Hoe de exportformaten eruitzien
CSS: --color-1: #1f3a5f;
SCSS: $color-1: #1f3a5f;
Tailwind: 'palette-1': '#1f3a5f',
Android: #1F3A5F
Compose: val Palette1 = Color(0xFF1F3A5F)
JSON: ["#1f3a5f", "#ff5733"]
Plak de XML in Android Studio in res/values/colors.xml, of voeg de Compose-regels toe aan je Color.kt bestand. De Compose-waarde bevat het alfa-voorvoegsel FF voor volledige dekking.
Tips voor paletten die goed werken
- Gebruik één hoofdkleur, één of twee accentkleuren en een neutrale kleur. Als je van elke kleur evenveel gebruikt, ziet het er meestal rommelig uit.
- Controleer het tekstcontrast op elke achtergrondkleur voordat je een kleurenpalet definitief vastlegt.
- Bepaal je merkkleur en bouw daarop voort om verschillende mogelijkheden te verkennen.
- Bekijk het kleurenpalet op een echt scherm in de afmetingen waarin het zal worden weergegeven, en niet alleen als kleurstalen.
- Test het ook in de donkere modus: een kleur die op een witte achtergrond goed werkt, hoeft niet per se goed te werken op een bijna zwarte achtergrond.
Beperkingen en privacy
Privacy
Paletten worden in je browser gegenereerd. Opgeslagen paletten worden bewaard in de lokale opslag van je browser op je apparaat en worden nooit geüpload.
Beperkingen
Kleuren worden weergegeven in de sRGB-kleurruimte en kunnen per scherm verschillen. De kleurenpaletten zijn suggesties op basis van kleurentheorie en vormen geen vervanging voor testen met echte gebruikers. De tool controleert niet of de kleuren geschikt zijn voor kleurenblinden, afgezien van het contrast.
Veelgestelde vragen
Veelgestelde vragen over de kleurenpaletgenerator
Hoe werkt de kleurenpaletgenerator?
Kies een basiskleur en een kleurenschema, en de tool zet de basiskleur met behulp van het kleurenwiel om in een reeks bijpassende kleuren. Klik op ‘Genereren’ voor een nieuwe willekeurige basiskleur, of vergrendel de kleuren die je mooi vindt en genereer de rest.
Wat is het verschil tussen de kleurenschema's?
Bij analoge kleuren worden aangrenzende tinten gebruikt voor een rustige uitstraling. Bij complementaire kleuren worden tegenover elkaar liggende tinten gecombineerd voor contrast. Bij gesplitste complementaire en triadische kleuren worden drie gelijkmatig verdeelde tinten gebruikt, bij tetradische kleuren vier, en bij monochromatische kleuren wordt één tint aangehouden en wordt de helderheid gevarieerd.
Hoe kan ik een kleur behouden terwijl ik de andere kleuren verander?
Klik op ‘Vergrendelen’ onder een kleurstaal. Vergrendelde kleuren blijven behouden wanneer je op ‘Genereren’ klikt, de basis wijzigt of het kleurenschema aanpast. Als je een kleurstaal bewerkt met de knop ‘Bewerken’, wordt het ook vergrendeld.
Wat betekenen de contrastcijfers?
Elk kleurstaal toont de contrastverhouding voor witte tekst en voor zwarte tekst op die kleur. Volgens de WCAG-richtlijnen moet de contrastverhouding minimaal 4,5:1 bedragen voor normale tekst (AA), 7:1 voor het strengere AAA-niveau en 3:1 voor grote tekst.
Welke exportformaten zijn er beschikbaar?
HEX-lijst, CSS-variabelen, SCSS-variabelen, een JSON-array, een Tailwind-configuratie, een Android colors.xml-bestand en Jetpack Compose-kleurwaarden, zodat je het kleurenpalet direct in een project kunt plakken.
Kan ik mijn kleurenpalet delen of opslaan?
Ja. Met ‘Link kopiëren’ wordt een webadres aangemaakt waarmee je dezelfde kleuren opnieuw kunt openen, met ‘PNG downloaden’ sla je een afbeelding van het kleurenpalet op en met ‘Palet opslaan’ kun je maximaal 12 paletten in deze browser bewaren.
Waarom zien mijn kleuren er op een ander scherm anders uit?
Beeldschermen verschillen qua helderheid, kleurnauwkeurigheid en kleurprofiel. Hex-codes geven de kleur numeriek weer, maar hoe deze eruitziet, hangt af van het beeldscherm. Controleer belangrijke kleuren op de apparaten die je doelgroep zal gebruiken.
Hoeveel kleuren moet een kleurenpalet bevatten?
Veel ontwerpen komen goed tot hun recht met vijf kleuren: één hoofdkleur, één of twee accentkleuren, een lichte achtergrondkleur en een donkere tekstkleur. Met deze tool kun je kiezen uit 3 tot 8 kleuren.
Is de generator gratis en worden mijn gegevens opgeslagen?
Het is gratis. De paletten worden in je browser gegenereerd. Opgeslagen paletten blijven op je apparaat in de lokale opslag staan en worden nooit geüpload.
Kan ik een link naar een kleurenpalet plaatsen?
Ja. Voeg ?colors=1f3a5f-ff5733-00aa88 toe aan het adres van de pagina, met 2 tot 8 hexadecimale codes gescheiden door koppeltekens, zonder het #-teken.
Van mensen die deze tool gebruiken
Recensies
Beoordelingen worden geladen…
Ga door
Nog meer gereedschap in de gereedschapskist
Op de startpagina vind je nog tientallen andere gratis tools waarvoor geen API-sleutel nodig is.
Hoofdletterconverter
Zet tekst om naar hoofdletters, camelCase, titelvorm, snake_case en meer.
Gereedschap openenWoordenteller
Tel tijdens het typen het aantal woorden, tekens, zinnen en de leestijd.
Gereedschap openenWhitespace Remover
Verwijder overtollige spaties en breng orde in de rommelige regelafstand.
Gereedschap openenTekstvergelijkingsprogramma
Vergelijk twee teksten regel voor regel om te zien wat er is veranderd.
Gereedschap openen