Kleurpalet-generator
Genereer schakeringen, tinten en harmonieuze kleuren uit één HEX-basiskleur, elk met een kopieerbare HEX-waarde.
Kleurpalet-generator — Voer één basiskleur in HEX in en krijg meteen een volledig palet eromheen — lichtere tinten, donkerdere schakeringen, de complementaire kleur en een analoge en triadische set. Elk staal toont zijn HEX-waarde met een kopieerknop met één klik. Alles draait volledig in je browser; er wordt nooit een kleur naar een server verzonden.
Wat is Kleurpalet-generator?
De Kleurpalet-generator is een gratis online kleurenschemamaker voor ontwerpers en front-endontwikkelaars die een volledig palet rond één basiskleur moeten opbouwen. Voer één HEX-kleur in en de tool leidt er meteen lichtere tinten, donkerdere schakeringen, de complementaire kleur en analoge en triadische harmonieën uit af met behulp van HSL-kleurwiskunde — elk staal wordt getoond met zijn HEX-waarde en een kopieerknop met één klik. Gebruik het om UI-kleuren te kiezen, een schakering-/tintschaal op te bouwen of bijpassende accentkleuren voor een merk te vinden. Het is een HEX-kleurpalet-generator, een schakering-/tintmaker en een complementaire-kleurzoeker in één.
Kleurpalet-generator gebruiken
- Typ een basiskleur in het veld Basiskleur (HEX) met het formaat #rrggbb of #rgb, of klik op het grote kleurkiezer-staal om er visueel een te kiezen.
- Stel Schakeringen per kant in op 2, 3 of 4 om te bepalen hoeveel lichtere tinten en donkerdere schakeringen er aan elke kant van de basiskleur worden gegenereerd.
- Bekijk de sectie Schakeringen en tinten: lichtere tinten verschijnen boven de basiskleur en donkerdere schakeringen eronder, elk gelabeld (Lighter N / Base / Darker N) en getoond met hun HEX-waarde.
- Bekijk de sectie Harmonieuze kleuren voor de complementaire, analoge (+30deg / -30deg) en triadische (+120deg / -120deg) kleuren.
- Klik op de kopieerknop naast een willekeurig staal (of naast het basisveld) om die HEX-waarde naar je klembord te kopiëren.
Voorbeelden
Complementaire kleur uit puur rood
Invoer
#ff0000
Uitvoer
#00ffff
Triadische kleur uit puur rood
Invoer
#ff0000
Uitvoer
#00ff00
Een merk-schakeringschaal opbouwen
Voer je merkblauw in (bijv. #4f86f7) en stel Schakeringen per kant in op 4 om vier lichtere tinten boven en vier donkerdere schakeringen onder de basiskleur te krijgen, wat je een schaal van 9 stappen geeft die je kleur voor kleur naar je design-tokens kunt kopiëren.
Veelgestelde vragen
- Welke kleurformaten kan ik invoeren?
- De basiskleur wordt ingevoerd als een HEX-waarde in het formaat #rrggbb (zes cijfers) of de verkorte vorm #rgb (drie cijfers). Als de waarde geen geldige HEX-kleur is, verschijnt de melding 'Invalid HEX color' en wordt er geen palet gegenereerd. Alle uitvoerstalen worden weergegeven als #rrggbb-HEX.
- Hoeveel schakeringen en tinten genereert het?
- Je kiest 2, 3 of 4 schakeringen per kant. De tool produceert dat aantal lichtere tinten (geïnterpoleerd naar wit) en hetzelfde aantal donkerdere schakeringen (geïnterpoleerd naar zwart), plus de basiskleur in het midden.
- Welke harmonieuze kleuren zijn inbegrepen?
- Het geeft de complementaire kleur (tint 180deg geroteerd), twee analoge kleuren (+30deg en -30deg) en twee triadische kleuren (+120deg en -120deg), allemaal berekend door de tint van de basiskleur in HSL te roteren.
- Kan ik een kleur visueel kiezen in plaats van HEX te typen?
- Ja. Klik op het grote staal met de ingebouwde kleurkiezer om een kleur te kiezen; het HEX-veld wordt automatisch bijgewerkt en het palet wordt direct opnieuw berekend terwijl je het wijzigt.
- Worden mijn kleurgegevens ergens geüpload?
- Nee. Alles draait volledig in je browser met lokale kleurwiskunde — er wordt nooit een kleurwaarde naar een server verzonden, dus het werkt offline en houdt je palet privé.
Gerelateerde tools
Base32 / Base58 coderen / decoderen
Codeer tekst naar Base32 (RFC 4648) of Base58 (het Bitcoin-alfabet) en decodeer beide weer terug naar tekst, volledig UTF-8-veilig en geheel in je browser.
Base64 coderen / decoderen
Codeer tekst naar Base64 of decodeer Base64 terug naar tekst (UTF-8-veilig).
Hoofdletterconverter & teller
Wijzig de hoofdlettervorm van tekst en tel tekens, woorden en regels.
Code-formatter & minifier
Maak HTML, CSS en JavaScript direct in je browser mooier of minificeer ze, met inspringing van 2 spaties, 4 spaties of een tab en JavaScript-compressie op basis van Terser.