Luo endless Color Palettes Khroma

Feb 2, 2026

Miten tehdään

Erinomainen käyttö väriteoria Suunnittelussa on yksi niistä asioista, jotka erottavat suuren keskimäärin. Vaikka subjektiivinen ja nuanced, väri on tehokas työkalu, joka voi määrittää digitaalisen kokemuksen tunteet ja sävyn. Jotain niin tärkeää, oma työnkulku väri oli voimakkaasti puuttunut.

3 valtava väri trendit vuodelle 2018

Vaikka siellä on runsaasti suuria resursseja, löysin, ettei ole mitään keinoa selata ja vertailla alkuperäisiä väriyhdistelmiä nopeasti, joka tuntuu käyttövalmiina. Sitä halusin ratkaista rakentamalla Khroma .

Valitse väri, kaikki värit

The Khroma training screen with the chosen colour bar up top — Khroma-koulutusnäyttö, jossa on valittu väripalkki ylöspäin

Yksi jännittävistä asioista Khroma on, että pääset kouluttamaan AI-algoritmia toimivan kuin pidennyssi Suunnittelijan aivosi. Haaste on se, että jotta niin hyvin, sinun on valittava 50 väriä, jotka haluat. Kun rakennat algoritmia, yritin tehdä sen työskennellä vähemmän, mutta tulokset eivät olleet tarpeeksi hyviä.

Viisikymmentä varmistaa, että generaattorilla on kunnon valikoima monipuolinen ja riittävän joustava auttamaan kaikkia malleja. Koulutusprosessi on suhteellisen rakenteellinen ja se on luultavasti yhtä suuri osa tiedettä ja taidetta. Muutama pro vinkkejä kokemuksestani pitäisi auttaa sinua saamaan irti siitä.

On syytä mainita lyhyesti täällä, miten algoritmi toimii. 50 väriä käytetään kouluttamaan hermoverkkoa, joka pystyy tunnistamaan satoja tuhansia muita vastaavia värejä, jotka pidät (me kutsumme tämän väri-affiniteetin). Se tietää, mitkä värit eivät pidä, koska se ei ole alkuperäisessä 50 valitsit. Tämä tarkoittaa, että jos et valitse tummanruskea, et näe sitä. Se on hieno, jos et ole tummanruskea tuuletin, mutta ei jos kaipaat jotain, mitä todella pidät. Se tekee lajikkeelle niin tärkeä.

Jos haluat aloittaa Khroma Generatorin koulutuksen, siirry Khroma.co ja napsauta Muokkaa. Näet joitakin ohjeita ja värilohkojen ääretön vieritysseinää. Klikkaus jollakin näistä lohkoista lisää sen valittuun väreihin ja toinen poistaa sen. Paras tapa edetä on selata ja valita minkä tahansa värin, joka hyppää ulos kuin mitä haluat käyttää suunnittelussa. Tämä toimii hyvin ensimmäisten 30 värin osalta.

Aika tarkentaa

Tässä vaiheessa haluat etsiä valittua väripalkkia ja nähdä, miten se muotoilee. Jos tämä oli asiakirjan värit luonnoksessa, olisitko kaikki mitä tarvitset? Seuraavien 20 väriä täältä tulisi olla hienostuneisuudesta. Kun jatkat vähän työkaluja, ponnahtaa ulos joitakin ehdotuksia, esim. "Poimin lisää magenta, keltainen ja vaaleat värit parantavat tuloksia". Suosittelen yrittää kiinni näistä, mutta älä pelkää jatkaa uusien värejä. Täältä sinun pitäisi valita 10 enemmän, tuo yhteensä 40.

Katsokaa jälleen baaria. Näetkö värejä, jotka ovat käytännöllisesti katsoen samoja? Se ei ole epätavallista valita samat värit enemmän kuin kerran, hyvin, pidät niistä. Mutta se ei ole hyödyllinen algoritmillesi.

Minulla oli ystävä kokeilla varhaista prototyyppiä ja hän kertoi minulle, että hänen tuloksensa eivät ole kovin hyviä. "Se on enimmäkseen vain sininen", hän sanoi. "Oletko poiminnut enimmäkseen sinistä koulutuksessa?" Vastasin. "Kyllä. Pidän todella sinisestä."

Paras lopputulos tulee löytämään mahdollisimman laajimman värin affiniteetin. Se hiirellä toistuvan värin yläosassa, voit poistaa sen poistamalla sen. Tämä vapauttaa, että värillinen väri, jota et ole vielä valinnut. Tee joitakin toistoja ja täytä uusia värejä, kunnes sinulla on viisi poiminta jäljellä.

Heitä joitakin villikortteja

Olen löytänyt sen palkitsevan heittämään joitakin viiltokortteja viimeisten viiden poimiilleni. Nämä ovat värejä, joita en usko, että olisin koskaan käyttänyt yksin. Usein olen ollut iloisesti yllättynyt siitä, mitä Khroma tekee heidän kanssaan. Kun vierekkäin muiden väreihin ne näyttävät sopiviksi täydellisesti tavalla, jota en olisi kuvitellut.

Kun olet valinnut Wildcards näet juna-painikkeen, joka ponnahtaa ylös oikeassa yläkulmassa. Voit jatkaa värejä niin kauan kuin haluat tästä vaiheesta, mutta jos valitut värisi näyttävät mukavaksi pimeänä valopalettiin, jossa on paljon erilaisia, olet todennäköisesti asetettu aloittamaan koulutuksen.

Koulutuksen pitäisi kestää noin kolme minuuttia. Voit odottaa tarkkuuden nousta korkeintaan 90-luvulle. Tämä edustaa olennaisesti, kuinka hyvin algoritmi voi tunnistaa värisi. Voit todella palata ja muokata koulutusvärejä myöhemmin, jos haluat kokeilla joitakin tweaks.

Rakenna kokoelma

Kun koulutusprosessi päättyy, sinut pudotetaan generaattoriin. Sinua esitellään äärettömän vieritysverkko värikomboja tyyppimalliin. Jokaisessa Combolla on Info-paneeli, johon voit avata tiedot, kuten nimi, HEX- ja RGB-arvot sekä WCAG-esteettömyyssuhde. Sydämen kuvakkeen oikeassa yläkulmassa voit aloittaa kokoelman suosikkisi kokoelman.

Etsi oikea yhdistelmä

Doing a palette search with #8BD2CA and #32514E. If you're not seeing anything you like, try rearranging the colours in the search bar — Paletti haku # 8bd2ca ja # 32514e. Jos et näe mitä haluat, yritä järjestää hakupalkin värit uudelleen

Haku on yksi Khroman tehokkaimmista ominaisuuksista. Usein minulla on löysä ajatus siitä, mitä etsin, tai olen jo työskennellyt tietyn värin kanssa ja haluan löytää täydennyksiä. Koska Khroma antaa pääsyn satoja tuhansia RGB-värejä affiniteettivalikoimassasi, se tuntui tärkeältä voidakseen sijoittaa niiden läpi.

On olemassa erilaisia parametreja, joita voit etsiä: tyyppi, sävy, nimi, hex ja RGB. Tyypit ovat tumma, valo, pastelli, vaalea, syvä, mykistetty, rikas, kirkas ja neon. Hues on lämmin, viileä, punainen, oranssi, keltainen, vihreä, syaani, sininen, violetti, violetti ja magenta. On 1 566 erityistä väriä voit etsiä nimiä kuten "kuninkaallinen sininen" ja "kahvi". Lopuksi se hyväksyy HEX- ja RGB-arvot.

Koska Khroma toimii kahden värikombon kanssa, säästää Paletteja, hakukyselyjä on kaksi paikkaa. Jos kirjoitat yhden termin hakupalkkiin ja haku, saat tuloksia, jotka vastaavat tätä termiä ensimmäiselle väripaikalle ja toinen on satunnainen.

Esimerkiksi, jos etsit "kirkas", saat suuren kyllästysvärin ja satunnaisen parin. Jos etsit "kirkas ja sininen", saat nämä kirkkaat värit ja satunnainen sininen toisessa paikassa. Voit myös esimerkiksi ketjun tyypin ja Hue-ehdot, kuten "kirkas sininen" ja "vaaleankeltainen".

The details of each pair of colours. Everything can be copied with just a click for quick usage — Kunkin värin parin yksityiskohdat. Kaikki voidaan kopioida vain napsauttamalla nopeaa käyttöä

Yksi iso käyttötapa, jossa haku on erityisen hyödyllinen, on silloin, kun sinulla on kaksi väriä, jotka haluat täydentää niille täydentää. Syötät vain nämä tarkat värit (# 8bd2ca ja # 32514E sanovat) ja etsiä palettipohjan alla.

Joskus etsit väriä tai termiä, joka ei ole sinun affinity-alueella. Siellä bias-ohjaimet tulevat pelaamaan. Näet ne kaksi napsautusta ja vetämällä kentät työkalurivin oikeassa yläkulmassa. Bias edustaa, kuinka tiukka generaattori on vastaavilla väreillä, jotka valitsit.

Jokainen väri Khroma tuottaa algoritmin läpi ja saa prosenttiosuuden (kuinka todennäköisesti se uskoo, että pidät väriä) vastauksena. Jos tämä prosenttiosuus on bias alla, se heitetään ulos ja prosessit toistuvat.

Jos kyseessä on ulkopuolinen hakukysely, bias laskee automaattisesti, kunnes se voi siirtää kynnyskokeet. Jos se on täysin pois valikoimastasi (kuten tummanruskea aikaisemmasta), niin se muuttuu automaattisesti 0. Näin jokainen väri, jonka saat Khroman oletusarvoisesti affiniteesi, mutta pystyy säätämään, joten et ole vain rajoitettu näihin väreihin.

Mukautetut kuvat

The five templates of Khroma – you can see the palette adding a couple more colours to the mix — Khroman viisi mallia - näet paletin lisäämällä pari väriä sekoitukseen

Löydät muutamia käteviä vaihtoehtoja yläosassa Asetukset-kuvakkeen alla. Yksi niistä on kyky ladata mukautettu kuva kuvamalliin. Sinun ei tarvitse tehdä mitään kuvaan etukäteen; Varmista, että se on oikea koko.

Vaikka voit mennä eteenpäin ja käyttää omaa headshot (en tuomitse), on parempi ajatella sitä kykyyn tehdä oma malli. Ota kuvakaappaus jotain, jota työskentelet luonnoksessa tai suunnittelutyökalulla, lataa se ja aloita rajattomat yhdistelmät!

Toivon, että annat Khromalle kokeilla ja löytää sen hyödyllisenä ja tehokkaan lisäyksen suunnittelusi työkalupakettisi.

Tämä artikkeli julkaistiin alun perin kohdassa 303 netto , maailman myydyin aikakauslehti web-suunnittelijoille ja kehittäjille. Osta numero 303 tai Tilaa täältä .

Aiheeseen liittyvät artikkelit:

5 Vinkkejä väriteorian ymmärtämiseen
Parhaat värityökalut web-suunnittelijoille
7 Vinkkejä hallita väriä paremmin verkossa

Luo endless Color Palettes Khroma

Valitse väri, kaikki värit

Aika tarkentaa

Heitä joitakin villikortteja

Rakenna kokoelma

Etsi oikea yhdistelmä

Mukautetut kuvat

Miten tehdään - Suosituimmat artikkelit

Aloita webvr

Aloita GreenSock Animation Platform

Taso VR Art

Miten Suunnittele uskollisia Fantasia-eläimiä

Master the Bridge Tool

Maalaa muotokuva öljyissä

Miten aloittaa öljymaalauksen

Rakenna monimutkaisia asetteluja postcss-flexboxilla

Luokat