Generer endeløse fargepaletter med Khroma

Sep 12, 2025
hvordan
[1. 3]

Utmerket bruk av fargeteori I design er en av de tingene som skiller det store fra gjennomsnittet. Mens subjektiv og nyansert, er farge et kraftig verktøy som kan definere følelsen og tonen i en digital opplevelse. For noe så viktig, manglet min egen arbeidsflyt rundt farge alvorlig.

  • 3 store fargetrender for 2018

Selv om det er mange gode ressurser som allerede er der ute, fant jeg at det ikke var mulig å bla gjennom og sammenligne originale fargekombinasjoner raskt som følte seg klar til bruk. Det er det jeg hadde tenkt å løse ved å bygge Khroma. .

Velg en farge, hvilken som helst farge

The Khroma training screen with the chosen colour bar up top

Khroma Training Screen med den valgte fargestangen oppe

En av de spennende tingene om Khroma er at du får til å trene en AI-algoritme for å fungere som en utvidelse av fargedesignerhjernen. Utfordringen er at for å gjøre det bra, må du velge 50 farger du liker. Når jeg bygger algoritmen, prøvde jeg å få det til å fungere med mindre, men resultatene var ikke gode nok.

Femti sikrer at generatoren har et anstendig område som skal varieres og fleksibelt nok til å hjelpe med alle dine design. Opplæringsprosessen er relativt ustrukturert og er sannsynligvis likeverdige vitenskap og kunst. Noen få protips fra min erfaring bør hjelpe deg med å få mest mulig ut av det.

Det er verdt å nevne kort her hvordan algoritmen fungerer. Dine 50 farger vil bli brukt til å trene et neuralt nettverk som vil kunne gjenkjenne hundretusener av andre lignende farger som du vil like (vi kaller dette din fargeaffinitet). Det vet hvilke farger du ikke liker fordi det ikke er i den opprinnelige 50 du valgte. Det betyr at hvis du ikke velger mørkbrun, vil du ikke se den. Det er greit hvis du ikke er en mørk brun fan, men ikke hvis du savner noe du virkelig liker. Det er det som gjør å gå for variasjon så viktig.

For å begynne å trene Khroma-generatoren, gå til khroma.co og klikk på Tilpass. Du vil se noen instruksjoner og en uendelig rullende vegg av fargeblokker. Et klikk på en av disse blokkene vil legge det til den valgte fargerbaren, og en annen vil fjerne den. Den beste måten å fortsette er å bla gjennom og velge hvilken som helst farge som hopper ut som noe du kanskje vil bruke i et design. Dette fungerer bra for de første 30 fargene.

Tid til å forfine

På dette punktet vil du se opp på den valgte fargelinjen og se hvordan den skal forme seg. Hvis dette var dokumentets farger i skisse, ville du ha alt du trenger? De neste 20 fargene herfra bør være om raffinement. Når du fortsetter, vil en liten verktøytips dukke opp med noen forslag, for eksempel "å plukke litt mer magenta, gule og bleke farger, vil forbedre resultatene dine". Jeg anbefaler å prøve å holde fast i disse, men vær ikke redd for å fortsette å plukke nye farger. Herfra bør du velge 10 mer, og bringe totalen til 40.

Se opp i baren igjen. Ser du farger som er nesten det samme? Det er ikke uvanlig å velge de samme fargene mer enn en gang siden, vel, du liker dem. Men det vil ikke være nyttig for algoritmen din.

Jeg hadde en venn prøve en tidlig prototype, og han fortalte meg at resultatene ikke var veldig bra. "Det er for det meste bare blått," sa han. "Har du valgt det meste blått i treningen din?" Jeg svarte. "Ja. Jeg liker virkelig blå."

Det beste resultatet kommer fra å finne den bredeste bredden av fargeaffiniteten mulig. Den musen over en gjentatt farge i topplinjen, kan du klikke for å fjerne den. Dette frigjør at sporet for en farge du ennå ikke har valgt. Gjør litt beskjæring av noen gjentakelser og fortsett å fylle ut nye farger til du har fem plukker igjen.

Toss i noen jokertegn

Jeg har funnet det givende å kaste inn noen jokertegn for mine siste fem plukker. Dette er farger som jeg ikke tror jeg noensinne vil bruke på egen hånd. Ofte har jeg blitt hyggelig overrasket over hva Khroma gjør med dem. Når ved siden av andre farger, synes de å passe perfekt på en måte som jeg ikke ville ha forestilt meg.

Når du har valgt dine jokertegn, ser du en togknapp dukker opp øverst til høyre. Du kan fortsette å velge farger så lenge du vil ha fra dette punktet, men hvis dine valgte farger ser ut som en fin mørk til lyspalett med mye variasjon, er du sannsynligvis satt til å begynne å trene.

Trening bør ta omtrent tre minutter. Du kan forvente at nøyaktigheten skal komme opp til de høye 90-tallet. Dette representerer i hovedsak hvor godt algoritmen kan identifisere fargene dine. Du kan faktisk gå tilbake og redigere treningsfarger senere hvis du vil prøve noen tweaks.

Bygg samlingen din

Når treningsprosessen er ferdig, blir du droppet inn i generatoren. Du vil bli presentert med et uendelig rullende rutenett med fargekombinasjoner i typemalen. Hver combo har et info-panel du kan åpne for å se detaljer som navnet, Hex og RGB-verdier, samt et WCAG-tilgjengelighetsforhold. Med hjerteikonet øverst til høyre kan du begynne å bygge en samling av dine favoritter.

Finn den rette kombinasjonen

Doing a palette search with #8BD2CA and #32514E. If you're not seeing anything you like, try rearranging the colours in the search bar

Å gjøre en palettsøk med # 8BD2CA og # 32514E. Hvis du ikke ser noe du liker, kan du prøve å omorganisere fargene i søkefeltet

Søk er en av de kraftigste funksjonene i Khroma. Ofte får jeg en løs ide om hva jeg leter etter, eller jeg jobber allerede med en bestemt farge og vil finne komplementer. Siden Khroma gir deg tilgang til hundretusener av RGB-farger i ditt affinitetsområde, virket det viktig å kunne sile gjennom dem.

Det finnes forskjellige parametere du kan søke med: Type, Hue, Navn, Hex og RGB. Typer inkluderer mørk, lys, pastell, blek, dyp, dempet, rik, lys og neon. Hues er varm, kul, rød, oransje, gul, grønn, cyan, blå, fiolett, lilla og magenta. Det er 1,566 spesifikke farger du kan søke etter med navn som 'Royal Blue' og 'Coffee'. Til slutt aksepterer det HEX- og RGB-verdier.

Siden Khroma jobber med to fargekombinasjoner, lagre for paletter, er det to spor for søkespørsmål. Hvis du skriver inn et begrep i søkefeltet og søker, får du resultater som samsvarer med dette begrepet for den første fargesporet og den andre vil være tilfeldig.

For eksempel, hvis du søker etter "Bright", får du en høymetningsfarge og et tilfeldig par med det. Hvis du søker "lyse og blå", får du de lyse farger og en tilfeldig blå i det andre sporet. Du kan også kjede type og nyansevilkår sammen, som "lyseblå" og "blekgul", for eksempel.

The details of each pair of colours. Everything can be copied with just a click for quick usage 

Detaljene i hvert par farger. Alt kan kopieres med bare et klikk for rask bruk

En stor bruk tilfeller hvor søk er spesielt nyttig er når du har to farger du liker og ønsker å finne komplementer til dem. Du vil bare skrive inn de eksakte fargene (# 8BD2CA og # 32514E si) og søk under palettmalen.

Noen ganger vil du søke etter en farge eller begrep som ikke er i ditt affinitetsområde. Det er der bias kontrollene kommer inn i spill. Du ser dem som to klikk og dra felt øverst til høyre på verktøylinjen. Bias representerer hvor streng generatoren er i matchende farger til de 50 du valgte.

Hver farge Khroma genererer løp gjennom algoritmen og får en prosentandel (hvor sannsynlig det tror du vil like fargen) som svar. Hvis den prosentandelen er under forspenningen, vil den bli kastet ut og prosessen gjentas.

I tilfelle av et utvalgssøk, blir biaset automatisk senket til det kan passere terskeletesten. Hvis det er helt ute av ditt til de fargene.

Egendefinerte bilder

The five templates of Khroma – you can see the palette adding a couple more colours to the mix

De fem malene til Khroma - du kan se paletten som legger til et par flere farger til blandingen

Du kan finne noen få praktiske alternativer øverst til høyre under ikonet Innstillinger. En av dem er muligheten til å laste opp et egendefinert bilde til bildemalen. Du trenger ikke å gjøre noe for bildet på forhånd; Bare vær sikker på at det er riktig størrelse.

Mens du kan gå videre og bruke ditt eget headshot (jeg vil ikke dømme), er det bedre å tenke på det som evnen til å lage din egen mal. Ta et skjermbilde av noe du jobber med i skisse eller ditt designverktøy for valg, last opp det, og begynn å surfe på ubegrensede kombinasjoner!

Jeg håper du gir Khroma et forsøk og finner det et nyttig og kraftig tillegg til designverktøyet ditt.

Denne artikkelen ble opprinnelig publisert i utgave 303 av nett , verdens bestselgende magasin for webdesignere og utviklere. Kjøp problem 303. eller Abonner her .

Relaterte artikler:

  • 5 tips for å forstå fargeteori
  • De beste fargeverktøyene for webdesignere
  • 7 tips for å administrere farge bedre på nettet

hvordan - Mest populære artikler

Tegnark for 3D Modellers: 15 Top Tips

hvordan Sep 12, 2025

[1. 3] (Bilde Kreditt: Dahlia Khodur) Karakterark er dagens ordre i denne opplæringen, som dekker hvordan du lager en..


Hvordan bygge en blogg med Jekyll

hvordan Sep 12, 2025

[1. 3] (Bilde Kreditt: Net) Denne opplæringen er for folk som har hørt om statiske nettverksgeneratorer og har beste..


Hvordan bygge et bloggingsted med Gatsby

hvordan Sep 12, 2025

[1. 3] Rammer som Reagerer bare send Javascript ned til klienter, som deretter brukes til å lage elementene på skjermen. HTML so..


Affinity Designer: Slik bruker du begrensninger

hvordan Sep 12, 2025

[1. 3] Affinity Designer er en populær Vector Art. verktøy. I tillegg til Mac og Windows-versjoner, ut..


maling rippling vann i oljer

hvordan Sep 12, 2025

Når du maler ripplende vann med noe i det, tar du på oppgaven med å male en forstyrret refleksjon. Dette kan være vanskelig å forestille seg, så jeg liker ofte å lage min egen referans..


Hvordan oppnå bedre belysning med v-ray

hvordan Sep 12, 2025

[1. 3] Chaos Group Labs Director Chris Nichols vil gjøre en Keynote Talk på Vertex. , V�..


Hvordan bygge raskere nettsteder

hvordan Sep 12, 2025

[1. 3] Foran hans snakk på Generere London 21. september fanget vi opp med Patrick Hamann. , en web..


7 Killer måter å påvirke brukeradferd

hvordan Sep 12, 2025

Nettsteder bruker psykologiske teknikker for å påvirke oppførselen til brukerne. Tegning i flere tiår med akademisk forskning som forklarer hvordan vårt sinn fungerer og hvordan vi tar a..


Kategorier