Eindeloze kleurenpaletten genereren met Khroma

Sep 16, 2025

Procedures

Uitstekend gebruik van kleurentheorie In het ontwerp is een van die dingen die het grote van het gemiddelde scheidt. Hoewel subjectief en genuanceerd, is kleur een krachtige tool die de emotie en toon van een digitale ervaring kan definiëren. Voor iets dat zo belangrijk is, was mijn eigen workflow rond de kleur ernstig ontbreekt.

3 enorme kleurentrends voor 2018

Hoewel er al genoeg geweldige middelen zijn, vond ik dat er geen manier was om te bladeren en de originele kleurencombinaties snel te vergelijken die zich klaar voor gebruik voelde. Dat is wat ik van plan was om op te lossen door te bouwen Khroma

Kies een kleur, elke kleur

The Khroma training screen with the chosen colour bar up top — Het Khroma-trainingscherm met de gekozen kleurstaaf bovenaan

Een van de spannende dingen over Khroma is dat je een AI-algoritme kunt trainen om te gedragen als een uitbreiding van je kleurontwerper hersenen. De uitdaging is dat om dat goed te doen, je moet 50 kleuren kiezen die je wilt. Bij het bouwen van het algoritme probeerde ik het met minder te laten werken, maar de resultaten waren niet goed genoeg.

Vijftig zorgt ervoor dat de generator een behoorlijk bereik heeft om te worden gevarieerd en flexibel genoeg om te helpen met al uw ontwerpen. Het trainingsproces is relatief ongestructureerd en is waarschijnlijk gelijke delen wetenschap en kunst. Een paar pro-tips uit mijn ervaring zouden u moeten helpen het meeste uit te halen.

Het is de moeite waard om hier kort te vermelden hoe het algoritme werkt. Je 50 kleuren zullen worden gebruikt om een neuraal netwerk te trainen dat in staat zal zijn om honderdduizenden andere soortgelijke kleuren te herkennen die je wilt (we zullen dit je kleur affiniteit noemen). Het weet welke kleuren je niet leuk vindt omdat het niet in de oorspronkelijke 50 is die je hebt gekozen. Dat betekent dat als u geen donkerbruin selecteert, u zult het niet zien. Dat is prima als je geen donkerbruine fan bent, maar niet als je iets mist dat je echt leuk vindt. Dat maakt wat voor verscheidenheid zo belangrijk maakt.

Om uw Khroma-generator te trainen, gaat u naar Khroma.co en klikt u op Personaliseren. Je ziet een instructie en een oneindige scroll-muur van kleurenblokken. Een klik op een van deze blokken zal het toevoegen aan de door u gekozen kleurenbalk en een andere zal het verwijderen. De beste manier om door te gaan, is door te bladeren en elke kleur te kiezen die uitspringt als iets dat u in een ontwerp wilt gebruiken. Dit werkt goed voor de eerste 30 kleuren.

Tijd om te verfijnen

Op dit punt wil je opkijken naar de gekozen kleurbalk en zie hoe het vormt. Als dit je documentkleuren in Sketch was, zou je dan wat je nodig hebt? De volgende 20 kleuren van hier moeten over de verfijning gaan. Terwijl je doorgaat, springt een kleine tooltip uit met enkele suggesties, bijv. 'Sommige meer magenta, geel en bleke kleuren zullen je resultaten verbeteren'. Ik raad aan om aan deze te blijven, maar wees niet bang om nieuwe kleuren te blijven kiezen. Vanaf hier moet je 10 meer kiezen, waardoor het totaal tot 40 is.

Kijk opnieuw naar de bar. Zie je kleuren die vrijwel hetzelfde zijn? Het is niet ongebruikelijk om meer dan eens dezelfde kleuren te plukken, nou, je vindt ze leuk. Maar dat zal niet nuttig zijn voor uw algoritme.

Ik had een vriend Probeer een vroeg prototype en hij vertelde me dat zijn resultaten niet erg goed waren. "Het is meestal gewoon blauw," zei hij. "Heb je meestal blauw gekozen in je training?" Ik antwoordde. "Ja, ik hou echt van blauw."

Het beste resultaat zal komen van het vinden van de breedste breedte van kleuraffiniteit mogelijk. Je muis over een herhaalde kleur in de bovenste balk, je kunt klikken om het te verwijderen. Dit bevrijdt die slot voor een kleur die je nog niet hebt gekozen. Doe wat snoeien van alle herhalingen en blijf nieuwe kleuren invullen totdat je nog vijf keuzes hebt.

Gooi in sommige jokertekens

Ik heb het geloneerd gevonden om wat jokertekens in te gooien voor mijn laatste vijf picks. Dit zijn kleuren die ik niet denk dat ik ooit alleen gebruik. Vaak ben ik aangenaam verrast door wat Khroma met hen doet. Wanneer ze naast andere kleuren, lijken ze perfect te passen op een manier die ik me niet had kunnen voorstellen.

Wanneer u uw jokertekens hebt gekozen, ziet u een treinknop in de rechterbovenhoek. Je kunt kleuren blijven kiezen zolang je van dit punt zou willen, maar als je gekozen kleuren eruit zien als een leuk donker naar licht palet met veel afwisseling, je bent waarschijnlijk ingesteld om op training te beginnen.

Training moet ongeveer drie minuten duren. Je kunt verwachten dat de nauwkeurigheid op de hoogte is van de hoge jaren 90. Dit vertegenwoordigt in wezen hoe goed het algoritme uw kleuren kan identificeren. Je kunt later teruggaan en je trainingskleuren later bewerken als je wat tweaks wilt uitproberen.

Bouw je verzameling

Wanneer het trainingsproces eindigt, wordt u in de generator gevallen. Je krijgt een oneindig scrollende raster van kleurencombinaties in de typesjabloon. Elke combo heeft een info-paneel die u kunt openen om details te zien zoals de naam, HEX en RGB-waarden, evenals een Toegankelijkheidsverhouding van WCAG. Met het hartpictogram in de rechterbovenhoek kunt u beginnen met het bouwen van een verzameling van uw favorieten.

Vind de juiste combo

Doing a palette search with #8BD2CA and #32514E. If you're not seeing anything you like, try rearranging the colours in the search bar — Een palet zoeken met # 8bd2ca en # 32514E. Als je niets ziet dat je leuk vindt, probeer dan de kleuren in de zoekbalk te herschakelen

Zoeken is een van de krachtigste kenmerken van Khroma. Vaak zal ik een losse idee hebben van wat ik zoek, of ik werk al met een bepaalde kleur en wil aanvullingen vinden. Omdat Khroma u toegang geeft tot honderdduizenden RGB-kleuren in uw affiniteitsbereik, leek het belangrijk om door hen heen te kunnen komen.

Er zijn verschillende parameters waarmee u kunt zoeken: Type, Hue, Name, HEX en RGB. Types zijn donker, licht, pastel, bleek, diep, gedempt, rijk, helder en neon. Tinten zijn warm, cool, rood, oranje, geel, groen, cyaan, blauw, violet, paars en magenta. Er zijn 1.566 specifieke kleuren waar je naar kunt zoeken met namen zoals 'Royal Blue' en 'Koffie'. Ten slotte accepteert het HEX- en RGB-waarden.

Sinds Khroma werkt met twee kleurencombinaties, opslaan voor paletten, er zijn twee slots voor zoekopdrachten. Als u een term in de zoekbalk invoert en zoekt, krijgt u resultaten die overeenkomen met die term voor de eerste kleursleuf en de tweede zal willekeurig zijn.

Als u bijvoorbeeld zoekt naar 'Helder', krijgt u een hoge verzadigingkleur en een willekeurig paar ermee. Als je 'helder en blauw' zoekt, krijg je die felle kleuren en een willekeurig blauw in de tweede slot. Je kunt ook een kettingstype en tintwoorden samen, zoals 'helder blauw' en 'lichtgeel', bijvoorbeeld.

The details of each pair of colours. Everything can be copied with just a click for quick usage — De details van elk paar kleuren. Alles kan worden gekopieerd met slechts een klik voor snel gebruik

Een groot gebruik gevallen waarin zoeken is vooral handig is wanneer je twee kleuren hebt die je leuk vindt en een aanvulling wilt vinden op hen. Je zou gewoon die exacte kleuren invoeren (# 8bd2ca en # 32514E zeggen) en zoeken onder de paletjabloon.

Soms zoekt u naar een kleur of term die niet in uw affiniteitsbereik is. Dat is waar de bias-controles in het spel komen. U ziet ze als twee klikken en sleep velden in de rechterbovenhoek van de werkbalk. Bias vertegenwoordigt hoe streng de generator in bijpassende kleuren is in de 50 die u hebt gekozen.

Elke kleur Khroma genereert loopt door het algoritme en krijgt een percentage (hoe waarschijnlijk het gelooft dat je de kleur leuk vindt) als reactie. Als dat percentage onder de voorspanning is, wordt het eruit gegooid en wordt het proces herhaald.

In het geval van een zoekopdracht uit bereik, wordt de bias automatisch verlaagd totdat deze de drempeltest kan passeren. Als het volledig uit je bereik is (zoals ons donkerbruin uit eerder), draait het automatisch naar 0. Op deze manier, elke kleur die je krijgt in Khroma standaard in je affiniteit, maar kan je aanpassen, zodat je niet alleen beperkt bent naar die kleuren.

Aangepaste afbeeldingen

The five templates of Khroma – you can see the palette adding a couple more colours to the mix — De vijf sjablonen van Khroma - je kunt het palet zien dat een paar meer kleuren aan de mix toevoegt

U kunt een paar handige opties in de rechterbovenhoek vinden onder het pictogram Instellingen. Een van hen is de mogelijkheid om een aangepaste afbeelding naar de afbeeldingssjabloon te uploaden. U hoeft niet van tevoren iets aan het beeld te doen; Zorg ervoor dat het de juiste maat is.

Terwijl je door kunt gaan en je eigen headshot kunt gebruiken (ik zal niet oordelen), het is beter om eraan te denken als het vermogen om je eigen sjabloon te maken. Maak een screenshot van iets waar je aan werkt in Sketch of Your Design Tool of Choice, upload het en begin met het bladeren van onbegrensde combinaties!

Ik hoop dat je Khroma een probeert te proberen en het een nuttige en krachtige toevoeging vindt aan je ontwerptoolkit.

Dit artikel is oorspronkelijk gepubliceerd in kwestie 303 van netto- , 's werelds best verkochte magazine voor webontwerpers en ontwikkelaars. Koop uitgave 303 of Abonneer hier

Gerelateerde artikelen:

5 tips voor het begrijpen van kleurentheorie
De beste kleurenhulpmiddelen voor webontwerpers
7 tips om kleur beter op het web te beheren

Eindeloze kleurenpaletten genereren met Khroma

Kies een kleur, elke kleur

Tijd om te verfijnen

Gooi in sommige jokertekens

Bouw je verzameling

Vind de juiste combo

Aangepaste afbeeldingen

Procedures - Meest populaire artikelen

Verken de gegevensvisualisatie met P5.JS

Bouw een spraakgestuurde UI

Hoe kleurrijke animatiekunst te schilderen in Photoshop

5 tips voor supersnelle CSS

Hoe CSS-klassen te beheren met JavaScript

Teken een potloodportret van een hond

Maak een gietwater-effect in RealFlow

Bouw een aangepaste Maya-interface

Categorieën