Generera oändliga färgpaletter med Khroma

Jan 23, 2026

Hur

Utmärkt användning av färgteori I design är en av de saker som skiljer den stora från genomsnittet. Medan subjektiv och nyanserad är färg ett kraftfullt verktyg som kan definiera känslor och ton av en digital upplevelse. För något så viktigt, var mitt eget arbetsflöde runt färg sakta saknade.

3 stora färgtrender för 2018

Även om det finns gott om bra resurser redan där ute, fann jag att det inte fanns något sätt att bläddra och jämföra originalfärgskombinationer snabbt som kände sig redo att använda. Det var det jag tänkte lösa genom att bygga Khroma .

Välj en färg, vilken färg som helst

The Khroma training screen with the chosen colour bar up top — Khroma träningsskärmen med den valda färgstången uppåt

En av de spännande sakerna om Khroma är att du får träna en AI-algoritm för att fungera som en förlängning av din färgdesignerhjärna. Utmaningen är att för att göra det bra måste du välja 50 färger som du vill. När jag bygger algoritmen försökte jag göra det att fungera med mindre men resultaten var inte tillräckligt bra.

Femtio säkerställer att generatorn har ett anständigt sortiment för att varieras och vara tillräckligt flexibel för att hjälpa till med alla dina mönster. Utbildningen är relativt ostrukturerad och är förmodligen lika delar vetenskap och konst. Några pro tips från min erfarenhet bör hjälpa dig att få ut det mesta av det.

Det är värt att nämna kort här hur algoritmen fungerar. Dina 50 färger kommer att användas för att träna ett neuralt nätverk som kommer att kunna känna igen hundratusentals andra liknande färger som du gillar (vi kallar detta din färgaffinitet). Det vet vilka färger du inte gillar eftersom det inte är i det ursprungliga 50 du valde. Det betyder att om du inte väljer mörkbrun, ser du inte det. Det är bra om du inte är en mörkbrun fan men inte om du saknar något du verkligen gillar. Det är det som gör det möjligt för sortiment så viktigt.

För att börja träna din Khroma Generator, gå till Khroma.co och klicka på Anpassa. Du ser lite instruktion och en oändlig rullningsvägg av färgblock. Ett klick på ett av dessa block lägger till det i dina valda färger och en annan kommer att ta bort det. Det bästa sättet att fortsätta är att bläddra igenom och välja vilken färg som helst som hoppar ut som något du kanske vill använda i en design. Detta fungerar bra för de första 30 färgerna.

Tid att förfina

Vid denna tidpunkt vill du titta upp på den valda färgfältet och se hur det utformas. Om detta var dina dokumentfärger i skiss, skulle du ha allt du behöver? De närmaste 20 färgerna härifrån bör handla om förfining. När du fortsätter kommer ett litet verktygstips att dyka upp med några förslag, t.ex. "plocka lite mer magenta, gula och bleka färger kommer att förbättra dina resultat". Jag rekommenderar att du försöker hålla mig till dessa men var inte rädda för att fortsätta att välja nya färger. Härifrån bör du välja 10 mer, vilket ger totalt 40.

Titta upp i baren igen. Ser du färger som är praktiskt taget samma? Det är inte ovanligt att välja samma färger mer än en gång sedan, ja, du gillar dem. Men det kommer inte vara användbart för din algoritm.

Jag hade en vän prova en tidig prototyp och han berättade för mig att hans resultat inte var mycket bra. "Det är mestadels bara blått," sa han. "Valde du mestadels blå i din träning?" Jag svarade. "Ja, jag gillar verkligen blått."

Det bästa resultatet kommer från att hitta den bredaste bredden av färgaffiniteten möjligt. Det du musen över en upprepad färg i toppstången, du kan klicka för att ta bort den. Detta frigör att slitsen för en färg du ännu inte har valt. Gör lite beskärning av några upprepningar och fortsätt att fylla i nya färger tills du har fem picks kvar.

Kasta i vissa jokertecken

Jag har funnit det givande att kasta i vissa jokertecken för mina sista fem val. Det här är färger som jag inte tror att jag någonsin skulle använda på egen hand. Ofta har jag blivit positivt överraskad av vad Khroma gör med dem. När de är bredvid andra färger verkar de passa perfekt på ett sätt som jag inte skulle ha föreställt mig.

När du har valt dina jokertecken ser du en tågknapp pop upp längst upp till höger. Du kan fortsätta att välja färger så länge du vill från den här punkten, men om dina valda färger ser ut som en fin mörk för att lätta palett med massor av variation, är du förmodligen inställd på att börja träna.

Utbildning ska ta cirka tre minuter. Du kan förvänta dig noggrannheten att komma upp till de höga 90-talet. Detta representerar i huvudsak hur väl algoritmen kan identifiera dina färger. Du kan faktiskt gå tillbaka och redigera dina träningsfärger senare om du vill prova lite tweaks.

Bygg din samling

När träningsprocessen slutar, kommer du att släppas in i generatorn. Du kommer att presenteras med ett oändligt rullningsnät med färgkombinationer i typmallen. Varje combo har en informationspanel Du kan öppna för att se detaljer som namn, hex och rgb-värden, liksom ett WCAG-tillgänglighetsförhållande. Med hjärtatikonen längst upp till höger kan du börja bygga en samling av dina favoriter.

Hitta rätt 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 — Gör en palettsökning med # 8bd2ca och # 32514e. Om du inte ser något du vill, försök omarrangera färgerna i sökfältet

Sökningen är en av de mest kraftfulla egenskaperna hos Khroma. Ofta får jag en lös uppfattning om vad jag letar efter, eller jag arbetar redan med en viss färg och vill hitta komplement. Eftersom Khroma ger dig tillgång till hundratusentals RGB-färger i ditt affinitetsområde verkade det viktigt att kunna sikta igenom dem.

Det finns olika parametrar Du kan söka med: Typ, Hue, Name, Hex och RGB. Typer inkluderar mörk, ljus, pastell, blek, djup, dämpad, rik, ljus och neon. Nyer är varma, coola, röda, orange, gula, gröna, cyan, blå, violett, lila och magenta. Det finns 1 566 specifika färger som du kan söka efter med namn som "Royal Blue" och "Coffee". Slutligen accepterar det hex- och RGB-värden.

Eftersom Khroma arbetar med två färgkombinationer, spara för paletter, finns det två slots för sökfrågor. Om du anger en term i sökfältet och sök får du resultat som matchar den termen för den första färgplatsen och den andra kommer att vara slumpmässig.

Till exempel, om du söker efter "ljus" får du en högmättnadsfärg och ett slumpmässigt par med det. Om du söker "ljus och blå" får du de ljusa färger och en slumpmässig blå i den andra luckan. Du kan också kedja typ och Hue-termer tillsammans, som "ljusblå" och "blekgul", till exempel.

The details of each pair of colours. Everything can be copied with just a click for quick usage — Detaljerna i varje par färger. Allt kan kopieras med bara ett klick för snabb användning

En stor användningsfall där sökningen är särskilt användbar är när du har två färger du gillar och vill hitta komplement till dem. Du skulle bara ange de exakta färger (# 8bd2ca och # 32514e säga) och söka under palettmallen.

Ibland söker du efter en färg eller term som inte är i ditt affinitetsområde. Det är där förspänningsreglagen kommer till spel. Du ser dem som två klick och dra fält längst upp till höger på verktygsfältet. Bias representerar hur strikt generatorn är i matchande färger till de 50 du valde.

Varje färg Khroma genererar går genom algoritmen och får en procentandel (hur sannolikt det tror att du kommer att gilla färgen) som svar. Om den procentsatsen är under förspänningen, kommer den att kastas ut och processen upprepas.

I fallet med en utomstående sökfråga sänks bias automatiskt tills det kan passera tröskelprovet. Om det är helt ur ditt sortiment (som vår mörkbrun från tidigare), kommer det automatiskt att vända det till 0. På det här sättet, varje färg du får i Khroma standard till din affinitet men kan justera så att du inte bara är begränsad till dessa färger.

Anpassade bilder

The five templates of Khroma – you can see the palette adding a couple more colours to the mix — De fem mallarna i Khroma - du kan se paletten som lägger till ett par färger till blandningen

Du kan hitta några praktiska alternativ längst upp till höger under ikonen Inställningar. En av dem är möjligheten att ladda upp en anpassad bild till bildmallen. Du behöver inte göra något för bilden i förväg; Se till att det är rätt storlek.

Medan du kan fortsätta och använda din egen headshot (jag kommer inte att döma), det är bättre att tänka på det som förmågan att göra din egen mall. Ta en skärmdump av något du jobbar med i Sketch eller ditt designverktyg, ladda upp det och börja bläddra obegränsade kombinationer!

Jag hoppas att du ger Khroma ett försök och hitta det ett användbart och kraftfullt tillägg till din designverktyg.

Denna artikel publicerades ursprungligen i utgåva 303 av netto , världens bästsäljande tidning för webbdesigners och utvecklare. Köp nummer 303 eller prenumerera här .

Relaterade artiklar:

5 tips för förståelse av färgteori
De bästa färgverktygen för webbdesigners
7 tips för att hantera färg bättre på webben

Generera oändliga färgpaletter med Khroma

Välj en färg, vilken färg som helst

Tid att förfina

Kasta i vissa jokertecken

Bygg din samling

Hitta rätt combo

Anpassade bilder

Hur - Mest populära artiklar

Hur man skriver HTML-kod snabbare

Hur man storyboard i Photoshop

Bygg en SEO-vänlig huvudkomponent för NEXTJS / reagera

4 steg för att använda variabla teckensnitt

Skapa en animerad ångtexteffekt

Hur man skapar digitala tillgångar

Vad är nytt i vinkel 4?

Hur man utformar ett bokomslag i InDesign

Kategorier