De kleurkiezer van Morph laat je elke kleur visueel kiezen en onmiddellijk het bijbehorende codeformaat lezen: HEX (`#3A7BD5`), RGB (`rgb(58, 123, 213)`) en HSL (`hsl(214, 64%, 53%)`). Sleep over het kleurveld om saturatie en helderheid in te stellen, verfijn met de tintschuif, en kopieer de waarde direct in je CSS, ontwerpbestand of waar je die nodig hebt.
Alle drie de codes beschrijven dezelfde kleur — het zijn gewoon verschillende manieren om het op te schrijven, en elk heeft zijn eigen functie:
Verander de kleur op welke manier je wilt en alle drie de codes blijven synchroon, zodat je altijd de juiste code kunt kopiëren voor je project.
Ontwerpers gebruiken het om een kleurenpalet precies vast te leggen en exacte waarden naar een ontwerpbestand of een stijlgids te kopiëren. Front-end ontwikkelaars gebruiken het om een HEX voor een knop te pakken of een ontwerper's RGB om te zetten naar HSL om een hoverstaat te bouwen. Iedereen die een thema, een grafiekkleur of een e-mailtemplate aanpast, kan direct de juiste schaduw kiezen en in één klik kopiëren. Omdat HSL naast HEX staat, is het veel eenvoudiger om lichtere en donkerdere varianten van een basiskleur te bouwen dan door hex-cijfers te raden.
De kleurkiezer is puur browsercode — de kleurwiskunde en de interface draaien allebei op jouw apparaat. Er is geen upload, geen account en niets wordt naar een server gestuurd. Het laadt snel en blijft werken offline zodra de pagina geopend is, want het kiezen van een kleur en het berekenen van de codes heeft nooit een netwerkverbinding nodig.
Wanneer je een HEX-waarde kopieert, is deze klaar om in CSS te plakken. Als je een kleur met transparantie nodig hebt, converteer dan naar RGB en voeg een alfa-kanaal (`rgba(...)`) toe in je code. Om een consistente kleurenpalet te bouwen, kies een basiskleur en gebruik de HSL-helderheidswaarde om tinten en schaduwen te genereren door de helderheid iets op te schuiven of af te laten lopen terwijl tint en verzadiging vast blijven — dit zorgt ervoor dat een set kleuren als een familie voelt in plaats van een willekeurige verzameling.
Het toont HEX, RGB en HSL voor elke gekozen kleur, allemaal synchroon gehouden, zodat je het formaat kunt kopiëren dat je project nodig heeft.
HSL maakt het gemakkelijk om een kleur intuïtief aan te passen — verhoog de helderheid voor een tint, verlaag hem voor een schaduw, of verschuif de tint — zonder te raden naar hex-cijfers.
Kies je kleur, kopieer de RGB-waarden en voeg een alfa-kanaal toe in je code als rgba(...) om het transparantieniveau in te stellen dat je wilt.
Nee. De kleurkiezer draait volledig in jouw browser. Er is geen upload en niets wordt naar een server gestuurd — het werkt zelfs offline nadat het geladen is.
Kies een basiskleur en gebruik zijn HSL-waarde, verplaats vervolgens de helderheid iets omhoog of omlaag terwijl tint en verzadiging vast blijven om tinten en schaduwen te creëren die als een set voelen.