Hoe genereer ik een kleurenpalet op basis van één merkkleur?

Voer een hexadecimale code, een kleurnaam zoals teal of een rgb()- of hsl()-waarde in het veld Basiskleur in en druk op Enter. Kies vervolgens een type zoals Merkpalet, Complementair, Triadisch of Monochromatisch en klik op een staal om het te kopiëren.

Welke exportformaten ondersteunt de paletgenerator?

Je kunt kleuren kopiëren als hex, rgb, hsl of oklch, en CSS-, SCSS-, JSON-, Tailwind 50-950-schaal-, PNG-, SVG-, GIMP/Krita GPL-, Adobe ASE- of Photoshop ACO-bestanden exporteren. Welke opties je ziet, hangt af van de exportinstellingen.

Hoe kan ik controleren of mijn paletkleuren leesbaar zijn op wit of zwart?

Elke kleur toont badges Op wit en Op zwart met WCAG-niveaus: AAA, AA, AA groot of Onvoldoende. In het gedeelte Controle tekst en achtergrond kun je ook een tekstkleur en achtergrond kiezen om een specifiek paar te testen.

Hoe houd ik sommige kleuren vast en hussel ik de rest?

Klik op Deze kleur vergrendelen bij de stalen die je wilt behouden en druk daarna op Husselen. Vergrendelde kleuren blijven staan en de andere veranderen. Je kunt ook Deze kleur bewerken gebruiken om één staal te wijzigen; daarmee wordt het palet als bewerkt gemarkeerd.

Kan ik mijn palet delen of een kleur van mijn scherm kiezen?

„Resultaat delen“ maakt een link met de basiskleur, het type en eventuele aanpassingen, zodat iedereen die hem opent hetzelfde palet ziet. Op een telefoon opent het het deelmenu; op een computer kopieert het de link. „Kiezen van scherm“ gebruikt de pipet van de browser (EyeDropper), die alleen wordt aangeboden door browsers die dit ondersteunen, vooral Chromium-browsers.

Ja. Elke tool is gratis te gebruiken, zonder account en zonder creditcard. Het werk gebeurt op jouw apparaat in plaats van op onze servers, en daarom is het gratis te gebruiken.

Ja. Het werkt in actuele mobiele browsers op iOS en Android, zonder iets te installeren.

🎨

Gratis Kleurpalet-generator

Genereer complementaire, analoge, triadische en monochromatische kleurpaletten van elke basiskleur. Kopieer hexcodes met één klik.

Draait in je browserGeen aanmelding, geen pop-upsGeen aanmelding vereistVoor altijd gratis

Werkt offline na het laden

Basiskleur

Typ een hexcode, een kleurnaam zoals teal of tomato, of rgb(20, 184, 166) / hsl(174, 80%, 40%) en druk op Enter.

Merkpalet · 7 kleuren

Kopieerformaat

Exporteren:Hexlabels op PNG/SVG

Basis

Op wit 2,5Onvoldoende

Op zwart 8,4AAA

Accent

Op wit 2,9Onvoldoende

Op zwart 7,2AAA

Lichte tint

Op wit 1,1Onvoldoende

Op zwart 19,4AAA

Donkere schakering

Op wit 9,0AAA

Op zwart 2,3Onvoldoende

Neutraal licht

Op wit 1,1Onvoldoende

Op zwart 19,3AAA

Neutraal midden

Op wit 4,1AA groot

Op zwart 5,1AA

Neutraal donker

Op wit 16,1AAA

Op zwart 1,3Onvoldoende

Controle tekst en achtergrond

TekstkleurAchtergrond

Voorbeeld van grote kop

Voorbeeld van lopende tekst voor dit paar

8,44:1Normale tekst AAAGrote tekst AAA

Probeer deze

Kleuren uit een foto nodig? Gebruik de kleurkiezer voor afbeeldingen

Veelvoorkomend gebruik

Genereer kleurpaletten voor webontwerpMaak harmonieuze kleurschema's voor websites, webapps en UI-componenten.
Maak merkkleurpalettenOntwikkel een volledig merkkleuraceringsysteem uit een enkele merkkleur — primair, secundair, accent en neutrale.
Genereer kleurpaletten voor kunst en illustratieMaak harmonieuze kleurcombinaties voor digitale kunst, illustratie en creatieve projecten.
Genereer kleurstijlen voor FigmaMaak kleurpaletten om te gebruiken als Figma-kleurstijlen en ontwerptokenonelanden.
Maak donkermoduskleurpalettenGenereer lichte en donkere varianten van uw kleurpalet voor het bouwen van ondersteuning in donkermodus.

Hoe het werkt

De tool gebruikt geen enkele externe bibliotheek — alle kleurwiskunde draait in zelfgeschreven JavaScript direct in je browser. Hij rekent je gekozen kleur om tussen hex en HSL en past daarna klassieke kleurharmonieregels uit de kleurenleer toe (complementair, triadisch, analoog enz.) via rekenkunde op de kleurencirkel om elk palet te maken.

1
Omzetting van hex naar HSL
Als je een kleur kiest, parst de tool de hextekenreeks tot RGB-componenten en zet die om naar HSL (tint, verzadiging, lichtheid). Tint is de positie van 0–360 graden op de kleurencirkel; alle paletberekeningen gebeuren in deze ruimte.
2
Tintrekenkunde voor harmonie
Elk palettype is een vaste rotatieformule op de basistint. Complementair telt 180° op, triadisch 120° en 240°, tetradisch gaat in stappen van 90°, split-complementair gebruikt 150° en 210°. Monochromatisch en tinten houden tint en verzadiging gelijk en variëren de lichtheid omhoog en omlaag.
3
Uitvoer van HSL naar hex
Elk berekend HSL-drietal wordt met de standaard chromaformule teruggezet naar een hexkleur. De resultaten verschijnen als kleurstrook met automatisch contrasterende labels (donkere tekst op lichte stalen, lichte tekst op donkere), bepaald door een eenvoudige luminantiedrempel.
4
Exporteren in je favoriete formaat
Het palet kan worden gekopieerd als hextekenreeksen of geëxporteerd als CSS-variabelenbestand (:root { --color-1: … }), SCSS-variabelen, een Tailwind-configuratiefragment, een JSON-object of een PNG-kleurstrook. De PNG-export gebruikt de Canvas API van de browser (toDataURL) om elk staal met zijn hexlabel te tekenen — alles wordt bij de klik lokaal gegenereerd.

Gerelateerde tools

🎨

Willekeurige kleurengenerator

Genereer willekeurige kleuren één voor één of als palet van vijf, vergrendel de kleuren die je mooi vindt, kopieer HEX-, RGB- of HSL-waarden en exporteer het palet als PNG of CSS.

Probeer het

🎨