Ga naar inhoud
100% lokaal

Kleurenpaletgenerator

Zet één basiskleur om in een volledig palet met kleurharmonieregels.

Invoer
0
0
Uitvoer

Kleurenpaletgenerator

Plak een basiskleur in als hex-code, rgb() of hsl()-waarde en dit hulpmiddel bouwt een volledig palet eromheen met behulp van kleurharmonieregels, niet alleen door verlichting van dezelfde tint. Kies Complementair voor één tegenovergestelde kleur, Gesplist complementair of Triadisch voor gebalanceerd contrast, Tetradic voor een vier-kleurrechthoek, Analoog voor aangrenzende tinten die natuurlijk bij elkaar passen, of Monochromatisch voor tonen en tinten van één tint.

De harmonie-optie bepaalt hoeveel kleuren eruit komen — Complementair geeft altijd twee, Triadisch en Gesplist complementair geven drie, Tetradic geeft vier — terwijl het kleurentaal en de tinthoekstap alleen van toepassing zijn op Analoog en Monochromatisch, waar u kiest hoeveel kleuren en hoe ver uit elkaar. Bereken in HSL voor klassieke kleurwielmechanica, of schakel over naar OKLCH, dat dezelfde waargenomen helderheid over elke tint behoudt, zodat een palet niet per ongeluk met één kleurveld dat er donkerder of verbleekt uitziet naast de rest uitkomt. Verzadigings- en helderheidregelaars stellen het hele palet fijn af nadat de harmonie is ingesteld, en de kleurformaatoptie drukt elk resultaat af als hex, rgb(), hsl() of oklch().

Elk kleurveld wordt gecontroleerd tegen WCAG AA (4.5:1) als tekst op wit en zwart, gemarkeerd met een vinkje of kruis naast elke verhouding — handig om te kiezen welke kleuren in een gegenereerde palet veilig zijn voor bodytekst versus alleen decoratie. Exporteer het resultaat als een gewone lijst, een blok CSS custom properties klaar om in een stylesheet te plakken, of een Tailwind-configkleurobject.

Alles draait lokaal in uw browser — de kleur die u invoert, wordt nergens geüpload. Kopieer de uitvoer, download deze als .txt-bestand, of stuur deze naar de invoer van een ander hulpmiddel om ermee verder te werken.

FAQ

Welke invoerformaten accepteert het voor de basiskleur?
Hex-codes (#3b82f6, #38f, met of zonder de #), rgb()/rgba() en hsl()/hsla(). Plak één ervan in en het palet wordt direct bijgewerkt.
Wat is het verschil tussen HSL en OKLCH voor de berekening?
HSL is de klassieke kleurwielmechanica en is snel en voorspelbaar. OKLCH is een perceptueel uniforme ruimte, dus een palet erin voert een meer gelijkmatige waargenomen helderheid over nyanzen behouden in plaats van dat sommige kleuren per ongeluk donkerder of lichter uitzien dan anderen.
Waarom beïnvloedt het veranderen van "kleuren in palet" alleen enkele harmonieën?
Complementair, Gesplist complementair, Triadisch en Tetradic zijn per definitie vast — twee, drie, drie en vier kleuren. De telling controleert alleen Analoog en Monochromatisch, die redelijkerwijze elk aantal kleuren kunnen hebben.
Wat betekent het AA-vinkje/kruis naast elke kleur?
Het is de WCAG contrastverhouding van die kleur gebruikt als tekst op witte en zwarte achtergrond, met een vinkje wanneer het de AA-drempel van 4.5:1 haalt en een kruis wanneer niet.
Wordt mijn kleur ergens geüpload?
Nee. Het palet wordt volledig in uw browser gegenereerd — niets wat u invoert, wordt naar een server verzonden.