Parimad värvikombinatsioonid. Värviratas. Värvipalett. Kuidas valida värvipaletti? Paleti valik

Disainer digiajastul ei pea muidugi piirduma värvidega, mida on võimalik saada värvidest, tintidest või muudest pigmentidest, kuigi ka kaunite kunstiteoste värvikäsitlusest on palju õppida. Inimsilm suudab eristada miljoneid erinevaid toone, kuid mõnikord võib isegi kahe värvi kombineerimine olla keeruline.

Hämmastavad värviomadused

Seda seetõttu, et disaini varjundite valik on väga subjektiivne ja nõuab teatud teadmisi. Mida peaksid siis disainerid tegema, kui tahavad kokku panna kauni värvipaleti, mis võib kliendi õnnelikuks teha? Meeldib see teile või mitte, aga parimad värvikombinatsioonid ulatuvad kaugemale ainult isiklikest eelistustest, kuna neil on hämmastav võime mõjutada meeleolu, emotsioone ja taju, omandada kultuurilise ja isikliku tähenduse ning meelitada tähelepanu – nii teadlikult kui ka alateadlikult.

Disainerite ja turundajate väljakutse on tasakaalustada varjundite keerulisi funktsioone, et luua atraktiivne ja mõjuv värvikombinatsioonide palett. Siin tulevad kasuks põhiteadmised värviteooriast. See võib aidata teil mõista, millised toonid sobivad hästi koos (või mitte) ja millise efekti erinevad kombinatsioonid antud kujunduses loovad.

värvikombinatsioon

Koolis õpivad lapsed seda teemat kunstitundides, nii et ilmselt on kõigile tuttav selle tõmmatud vorm: punased, kollased ja sinised põhitoonid. Traditsiooniline värviratas koosneb 12 toonist ja seda kasutavad sageli kunstnikud. See on lihtne visuaalne viis värvisuhete mõistmiseks.

Värviratta põhiülesanne on värvide kombineerimine. Alus- või põhitoonide (kollane, sinine ja punane) segamisel moodustuvad sekundaarsed toonid: roheline, lilla ja oranž. Nende kombineerimine põhitooniga võimaldab teil saada ringi kolmanda taseme - tertsiaarsed värvid. Nende hulka kuuluvad punane-oranž, roheline-sinine, sinine-violetne ja violetne-punane. Primaarsed ja sekundaarsed toonid on osa nähtavast spektrist ehk vikerkaarevärvidest. Nende järjekorda on lihtne meeles pidada, kasutades mnemoonilist fraasi "Iga jahimees tahab teada, kus faasan istub": punane, oranž, kollane, roheline, sinine, indigo ja violetne.

Sellist värvi mõistmise viisi tuntakse lahutava mudelina, mis hõlmab pigmentide, nagu värvide või tindide, segamist ja mida kasutatakse nii traditsioonilises värvirattas kui ka trükiseadmetes kasutatavas CMYK-süsteemis. See erineb lisandmudelist, mis hõlmab erineva sagedusega valguse segamist (näiteks arvuti või teleri ekraanil), mis koosneb erinevast punase, rohelise, sinise (RGB) komplektist.

Graafilised redaktorid kasutavad värviratta teistsugust versiooni. Iga tooni saab valida kuueteistkümnendkoodi abil.

Terminoloogia

Enne palettide koostamist peate omandama terminoloogia, mis aitab teil mõista erinevat tüüpi toone:

  • toon on värvi sünonüüm ja viitab traditsiooniliselt ühele 12 värvist;
  • heledus: värvitooni kauguse määr mustast;
  • kergus: tooni lähedus valgele;
  • küllastus - värvi intensiivsus või puhtus (mida lähemal on toon hallile, seda vähem küllastunud see on).

Parimad värvikombinatsioonid

Värviringist on mitmeid klassikalisi palette, mida kunstnikud on sajandeid kasutanud. Enamiku disainiotsuste puhul tuleks nendest skeemidest tuvastada üks domineeriv värv – selle kasutusmahu või muude toonide hulgast valiku järgi – üks või mitu aktsenti:

1. Ühevärviline skeem: sama värvi toonide erineva heleduse, heleduse või küllastuse kasutamine vahemikus heledast tumedani. Eduka ühevärvilise kombinatsiooni näide on punane musta ja valgega. See skeem tagab õhukese ja konservatiivse disaini. Sinine ja valge on klassikaline kombinatsioon Hiina portselanist 9. sajandist. ja 18. sajandi prantsuse tekstiilid.

2. Sarnased, mis asuvad värvirattal kõrvuti. See on universaalne ja projektide arendamisel hõlpsasti kasutatav. Näiteks võib tuua lilla ja sinakasvioletse kombinatsiooni.

3. Täiendav skeem: kasutab toone, mis asuvad värviratta vastasotstes. Näiteks sinine ja oranž, punane ja roheline. Täiendavad värvid on suure intensiivsuse ja kontrastiga, kuid neid on raske puhtal kujul harmooniliselt ja tasakaalustatult rakendada, kuna need võivad disainis kergesti kokku puutuda.

4. Split-complementary skeem: mis tahes toon värvirattal pluss kaks värvi, mis piirnevad selle täiendusega. Näiteks kollane koos rohelise ja punakasvioletiga. Sellel skeemil on ka tugev visuaalne kontrast, kuigi nõrgem kui eelmine. Pakub parimaid värvikombinatsioone disainialgajatele, kuna seda on raske segamini ajada.

5. Kolmikskeem: mis tahes kolm tooni, mis on värvirattal ühtlaselt jaotunud. Pakub üsna eredaid kombinatsioone, isegi kui toonid on kahvatud ja küllastumata. Edukaks kasutamiseks on vaja saavutada täielik tasakaal - üks värv peaks muutuma domineerivaks ja ülejäänud kaks peaksid olema aktsendid.

6. Tetrad ehk topeltkomplementaarne: koosneb kahest üksteist täiendavast paarist. See skeem on äärmiselt atraktiivne, kuid seda on keerulisem kasutada kui ühte paari täiendavaid värve, sest rohkem toone on keerulisem tasakaalustada. Selle skeemi kasutamisel peaksite valima domineerivaks värviks ühe värvi ja reguleerima mõne või kõigi toonide värviküllastust, heledust ja heledust, et need pakuksid disaini erinevates osades parimaid värvikombinatsioone.

Inspiratsioon

Lisaks värviratta kombinatsioonidele pakub loodus palju valmislahendusi harmooniliste värvilahenduste jaoks.

Värvide sidumise võimalused hõlmavad nende temperatuuri (kuum või jahe), küllastust (erksad värvid näevad sageli nooruslikud, kahvatud värvid vanad välja), meeleolu (särav ja rõõmsameelne, tume ja tõsine), teema (asukoht, aastaaeg, puhkus) ja muud. omadused.

Teine suurepärane tehnika värvi leidmiseks on otsida inspiratsiooni erinevatest ajaloolistest perioodidest ja kunstilistest liikumistest: impressionistide soojad heledad värvid; eredad, ootamatud postimpressionistide kombinatsioonid; pehmed, maalähedased juugendvärvid; popkunsti heledad, julged toonid.

Värvi psühholoogia

Värvid ümbritsevad meid. Kas me mõistame seda või mitte, mängib see meie igapäevaelus suurt rolli. Kas olete täna teel näinud oranži või kollast liiklusmärki? Ta tõmbas tähelepanu mingil põhjusel. Värvil on hämmastav seos meie meeleolude ja emotsioonidega.

Kuid mitte kõik ei koge värvi ühtemoodi. Tähendus ja sümboolika, mida me erinevate toonidega seostame, sõltuvad suuresti nende kultuuriliste ja sotsiaalsete rühmade mõjust, kuhu me kuulume. Siin on mõned levinud tähendused, mis on lääne kultuuris põhivärvidega seotud.

Punane

See värv annab olenevalt kontekstist edasi palju erinevaid ideid. Tulega seostatuna võib see sümboliseerida soojust või ohtu. Kuna punane on vere värv, peetakse seda energiliseks, elavaks tooniks ja seetõttu seostatakse seda südameasjade ja mõnikord ka vägivallaga.

Alternatiivsed tähendused: Mõnes idakultuuris sümboliseerib punane õnne ja õitsengut ning on värv, mida pruudid oma pulmapäeval kannavad. Kogu maailmas seostatakse punast erinevate poliitiliste liikumistega ja sümboliseerib revolutsiooni.

Brändingus: tähistab sageli tugevust, enesekindlust ja võimu ning on hästi nähtav.

Oranž

Ka tulevärv, oranž ühendab punase soojuse kollase rõõmsameelsusega ning sümboliseerib aktiivsust, energiat ja optimismi. Seotud ka saagi või sügisega.

Alternatiivsed tähendused: Indias peetakse pühaks safranit, mille varjund on kollakas kuni oranžikas. Jaapanis sümboliseerib värv armastust.

Brändinduses: esindab sageli noorust ja loovust. Kuld, mis on ka oranži või kollase varjundiga, sümboliseerib luksust ja kõrget kvaliteeti.

Kollane

Päikese värvina sümboliseerib see sageli kevadist õnne, rõõmsameelsust, sõbralikkust ja värskust. Lisaks võib see teatud kontekstides edastada hoiatussignaali või hoiatada ettevaatuse eest. Mõned variatsioonid (eriti küllastumata ja rohekad) näevad haiged või ebameeldivad välja, mis pole üllatav, kuna ajalooliselt on kollast mõnikord seostatud haiguse ja karantiiniga.

Alternatiivsed tähendused: Mõnes Ida- ja Aasia kultuuris seostatakse kollast kõrge sünni või staatusega. Mõnes Aafrikas ja Ladina-Ameerikas on see toon traditsiooniline leinavärv.

Brändimisel: selge või erekollane toon tõmbab tähelepanu, kuid võib olla häiriv või isegi raskesti nähtav (nt valge tekst erkkollasel taustal või vastupidi), kui seda kasutatakse hooletult.

Roheline

See on looduse, taimestiku ja kasvu värv. Sageli sümboliseerib see tervist, värskust või looduslikke omadusi. Tumeroheline võib tähistada rikkust ja stabiilsust.

Alternatiivsed tähendused: islami kultuuride seas on roheline püha värv. Seda seostatakse ka Iirimaa, Püha Patricku päeva ja õnneliku neljalehelise ristikuga.

Brändimisel: Rohelistena (looduslikud, tervislikud, keskkonnasõbralikud, orgaanilised jne) turustatavad kaubamärgid või tooted kasutavad sageli looduslikke värve, nagu roheline ja pruun.

Sinine

Mere ja taeva värv, see sümboliseerib sageli rahu ja puhtust. Erinevalt energilisematest ja soojadest toonidest tajutakse sinist rahustavana. Mõnel juhul võib see tähendada kurbust või depressiooni.

Alternatiivsed tähendused: Lähis-Ida kultuurides kaitseb sinine traditsiooniliselt kurja eest. Seoses taevaga sümboliseerib värv paljudes kultuurides surematust ja vaimsust.

Brändinduses: Sinist kasutatakse laialdaselt ja see on üks mitmekülgsemaid värve. Tavaliselt sümboliseerib see usaldusväärsust, turvalisust ja stabiilsust. Toon on eriti populaarne ettevõtete kontekstis, kuna sellel peetakse tõsiseid, konservatiivseid ja professionaalseid omadusi.

Violetne

Traditsiooniliselt seostatud aadli, ülevuse või autundega. Seega on sellel vaimne, müstiline või religioosne varjund.

Alternatiivsed tähendused: paljudes maailma kultuurides sümboliseerib lilla kombinatsioon aadlit või rikkust, kuid Tais ja Lõuna-Ameerika osades seostatakse seda leinaga.

Brändinduses: lilla tumedad toonid on sageli luksuse sümboliks, heledamad ja heledamad toonid aga naiste ja laste seas.

Must

Sarnaselt punasele on sellel värvil palju (mõnikord vastuolulisi) tähendusi. See võib esindada võimu, luksust, keerukust ja eksklusiivsust. Teisest küljest sümboliseerib must surma, kurjust või saladust. Riietuses on see formaalsuse või leina ja leina sümbol (nagu leinamist kantakse traditsiooniliselt matustel).

Alternatiivsed tähendused: Mõnes Aasia ja Ladina-Ameerika riigis peetakse musta mehelikuks värviks. Egiptuses tähendab see taassündi. Paljudes kultuurides seostatakse värvi maagia, ebausu või halva õnnega, aga ka seletamatu või tundmatuga.

Brändinduses: musta värvi kasutatakse nii laialdaselt, et see on muutunud peaaegu neutraalseks, kuigi see võib olenevalt kontekstist sümboliseerida ülaltoodut. Paljud kujundused on lihtsalt mustvalged (kas tahtlikult või lihtsalt värviprintimise säästmiseks).

Valge

Valguse ja lume värvina sümboliseerib valge sageli puhtust, süütust, headust või täiuslikkust (mida traditsiooniliselt kannavad pruudid), kuid tähistab ka rangust või steriilsust.

Alternatiivsed tähendused: Hiinas on valge leinavärv. Paljudes kultuurides tähistab see rahu – valge lipp on universaalne vaherahu või alistumise sümbol.

Brändinduses: valge edastab sageli lihtsust, puhtust või modernsust. Minimalistlikku esteetikat otsivad disainerid kasutavad sageli palju valget värvi.

Värv disainis

Värvikombinatsiooni valimine on midagi enamat kui kahe või kolme tooni valimine ja nende võrdses proportsioonis jaotamine kogu kujunduses. Nende tõhus kasutamine on paljuski seotud tasakaaluga ja mida rohkem toone kasutad, seda keerulisem on seda saavutada.

Lihtsaim viis selle kontseptsiooni elluviimiseks on jagada valitud värvid domineerivateks ja aktsentvärvideks. Domineeriv toon on kujunduses kõige nähtavam ja enim kasutatud, samas kui üks või mitu aktsenti täiendavad ja tasakaalustavad seda. Tähelepanu pööramine värvide koosmõjule – kontrasti olemasolule või puudumisele, kuidas kõrvuti asetsevad toonid välja näevad, millise meeleolu loob värvide ja varjundite kombinatsioon jne – aitab teil disaini jaoks täpselt valida ideaalse paleti.

Üldtunnustatud reegel põhilise kolmevärvipaleti kasutamiseks on reegel 60-30-10. Seda lähenemist kasutatakse sageli sisekujunduses, kuid seda saab tõhusalt kasutada ka veebi- või trükikujunduses. Piisab, kui pühendada 60% domineerivale värvile ning anda ülejäänud 30% ja 10% kahele aktsendile. Hea näide selle reegli selgitamiseks on meeste ülikond: jope ja püksid moodustavad 60% rõiva värvist, särk moodustab 30% ja lips ülejäänud 10%. Kõik koos annab tasakaalustatud elegantse välimuse.

Teine viis oma paleti lihtsaks ja tasakaalustatud hoidmiseks on kasutada heledust ja heledust (või valitud tooni heledamaid ja tumedamaid versioone). Nii saate oma värvivalikut laiendada ilma disaini üle jõu käimata.

ja bränding

Brändi äratundmine sõltub suuresti värvist. Mõelge vaid Coca-Colale, Facebookile või Starbucksile ja on lihtne meelde jätta toonid, millega neid kaubamärke seostatakse.

Winnipegi ülikoolis läbi viidud uuring näitas, et inimeste esmased hinnangud toodetele põhinevad suuresti värvil (60-90% hinnangust). See tähendab, et disaini toon ei ole ainult kunstiline valik, vaid ka kriitiline äriotsus, mis mõjutab kõike alates sellest, kuidas tarbijad brändi tajuvad, kuni toodete müügini.

Logo värvilahendust valides ei pea aga kinni pidama traditsioonidest, sümboolikast ega stereotüüpidest. Siin pole lollikindlat ega kiireid reegleid. Olulisem on see, kuidas tooni kasutatakse disainis ning harmoneerub brändi turukonteksti ja iseloomuga.

RGB vs CMYK

Prinditud projektiga töötades ei saa teie arvutimonitor kuvada värve nii, nagu need paberil kuvatakse. See, mida näete, ei ole see, mida saate, sest digitaalsed monitorid ja printerid kasutavad kahte erinevat süsteemi: RGB ja CMYK. Esimene viitab väikestele punase, rohelise ja sinise valguse punktidele, mis koos moodustavad ekraanil nähtavad värvid; teine ​​tähendab tsüaani, magenta, kollase ja musta tooni värviprintide loomiseks. Kuna RGB kasutab laiemat spektrit kui CMYK, loovad mõned disainerid algselt RGB prindikujunduse, et säilitada rohkem värvivalikuid ja teisendada valmis kujundus enne printimist CMYK-vormingusse.

Sel põhjusel vajavad nad tööriista, mis tagab värvide ühtluse mõlemas süsteemis – näiteks veebisaidi logo kujundamisel ja selle visiitkaardile printimisel. Üks selline süsteem on Pantone Matching System (PMS). Ühtlase väljanägemise tagamiseks võib see sobitada toone nii veebis kui ka trükis (ja erinevat tüüpi trükipindadel).

Värv: saage aru, uurige ja armastage seda!

Disainerid on spetsialiseerunud värviteooria, psühholoogia või neurobioloogia uurimisele – keerukatele teemadele, mis asuvad kunsti ja teaduse ristumiskohas. Kuid see on osa sellest, mis teeb selle elukutse nii huvitavaks ja nii tõhusaks tööriistaks turul. Kuigi see juhend kirjeldab vaid põhitõdesid, loodetakse, et see aitab teha teadlikumaid ja tõhusamaid värvivalikuid isiklike või tööalaste projektide jaoks.

Tõhus veebilehe kujundus on mõeldamatu ilma värviskeemi valimata. Jääb veel välja mõelda, kuidas seda teha.

Mõne projekti puhul olete võib-olla juba valinud mõned värvid, mis sobivad teie logo või brändipaletiga, ja ehitate oma saiti nende piirangute raames. Teised on ikka vaid visandid. On ka neid, mis vajavad väiksemaid muudatusi, mis võivad saidi ilusamaks ja mugavamaks muuta.

Ükskõik, kas soovite oma tööd lihtsamaks ja kiiremaks muuta või loote veebisaiti esimest korda, need tööriistad aitavad teil lahendust leida.

Alustame värviteooria lühikese sissejuhatusega.

Altpoolt leiate 19 ressurssi, mis aitavad teil oma veebisaidi jaoks värvipaleti valida.

Ettevalmistus

Kas vajate inspiratsiooni?

1.

BrandColors näitab, kuidas juhtivad kaubamärgid kasutavad värve oma äri eristamiseks, lugude jutustamiseks ja väärtuste edastamiseks. Saate vaadata ettevõtete, mittetulundusühingute ja alustavate ettevõtete loendit tähestikulises järjekorras või otsida teid huvitavat kaubamärki.

Kas otsite valmis paletti?

2.

See on värvipalettide kujundamise foorum, kus on ligi 2 000 000 kasutaja esitatud valikut. Saate alla laadida konkreetset värvi sisaldava paleti ja lugeda, mida disainerid kirjutavad. Reeglina antakse ühe kombinatsiooni jaoks mitu erineva intensiivsusega valikut.

Paletti saadavad kõnekad nimed: Storm in the Whitsundays (Vaikse ookeani saarestik korallimeres), Twilight in the Whitsundays, Whitsunday saar

3.

See ressurss võimaldab kasutajatel luua ja üles laadida oma värvilahendusi. Saate neid filtreerida kuupäeva, hinnangu ja allalaadimiste arvu järgi või otsida märksõnade järgi.

4.

ColoRotate'is leiate värviskeemide teegi, mida saate sirvida, valida ja muuta. Spetsiaalne 3D-värvitööriist aitab teil leitud paleti põhjal luua oma paleti. Teie loodud värviskeemi saab PhotoShopis või Fireworksis kohe rakendada, installides ColorRotate'i pistikprogrammi või iPadi rakenduse.

Vastavalt kaubamärgi nõuetele

Mida teha, kui teil on juba pildid, logod või kaubamärginõuded, mida tuleb täita?

1.

See sait ei ole nii funktsioonirikas kui mõned selles loendis, kuid see teeb suurepärase töö selle jaoks, milleks see loodud oli: konkreetse värvi uurimine. Lihtsalt laadige pilt üles ja Color Hunter loob selle põhjal paleti. See on suurepärane viis piltide ja saidi põhivärvide harmoonia saavutamiseks. Lisaks saate siin paigutada teile meeldiva saidi värviskeemi.

2.

Pictaculous teeb fotodest palette. Kõik, mida pead tegema, on foto üles laadida, et saada selle juurde sobivad värvid. Ressurss pakub ka teile sobivaid valmispalette.

3.

Seda tööriista tunti Adobe Kuleri nime all ja see oli mõeldud värvide võrdlemiseks. Nüüd on see täisväärtuslik palettide loomise süsteem, mis võimaldab proovida, võrrelda ja salvestada värvikombinatsioone. Saate valida paleti tüübi ja luua viievärvilisi skeeme automaatselt või käsitsi seadistuste abil.

4.

Paletton kiirendab paleti loomise protsessi. Peate valima skeemi tüübi: mono, ühend, triaad, tetraad, seotud, seotud-kontrast. Kui muudate ühte värvi, kohanduvad teised automaatselt.

5.

Color Spire koostab ka paleti, mis põhineb ühel värvil. Valite algse tooni ja saate sellega kaasnevate skeemide valikud. Samuti saate vaadata eelvaadet, kuidas valitud palett veebisaidil välja näeb.

6.

See Chrome'i pistikprogramm aitab teil värve ühtlustada, värvipimedust kohandada ja HEX-koode tuvastada. Värvipalette saab otse eksportida Illustratori, PhotoShopi ja CoIRD.com-i.

7.

Ressurss võimaldab teil oma värvipaletti muuta, valides ja lisades toone. Tänu sellele saate kiiresti ja lihtsalt luua uue diagrammi olemasoleva diagrammi põhjal.

8.

See tööriist valib teie värvidele vastavad värvid. See on veidi lihtsam kui teised selles loendis olevad ressursid. Peate sisestama reale värvi HEX-koodi või valima selle ratta kujul esitatud spektrist. Generaator toodab 3 värvi, mis sobivad teie värviga ja varustab neid HEX-koodidega.

Looge oma värv

Paljud selle loendi ressursid eeldavad, et teil on algne värv. Kui brändinõudeid pole vaja täita ja BrandColors valiku tegemisel ei aidanud, võib alustada visanditest.

1.

See iOS-i rakendus aitab teil valida mitmete värvide hulgast, mis on paigutatud kõrvuti lühikese vahemaa tagant, mis on palju mugavam kui gradiendi esitus, ringid ja spektrid. Suured värviruudud võimaldavad kasutada kogu ekraani (mis on eriti väärtuslik iPad Pro omanikele). Rakendus võimaldab luua värvinäidiseid, leida RGB-, HEX- ja HSLA-väärtusi ning luua visanditest palette.

3. Värv

HailPixeli valikus Color ei saa te otsustada värvi üle. Saate täpselt aru, mida soovite ja saate varju HEX-koodi.

Liigutate hiirt või liigutate ja värv muutub iga kord veidi. See näeb välja nagu värvisfäär, mis pidevalt saadab värve HEX-koodidega. Kui liigutate ekraanil vasakule ja paremale, muutub värv ning küllastus üles ja alla.

Hankige värvikood

Kui nägite kuskil mõnda värvi ja soovite teada selle koodi ja nime, on need ressursid teie jaoks.

1.

SpyColor pakub teavet mis tahes värvide, sealhulgas Hex-, RGB-, CMYK- ja muude koodide kohta, ning näitab iga tooni jaoks erinevaid mustreid, sealhulgas täiendavaid, jagatud-komplementaarseid, protsessi-, kontrast- ja analoogmustreid.

2.

HTML-värvikoodid leiab pildil olevate värvide HEX-koodi. Valite pildi, avate selle vaatamiseks ja saate värvikoodi, hõljutades kursorit selle kohal.

Testige oma paletti

Kui olete värviskeemi loonud, soovite veenduda, et see on tõhus.

Kontrolli minu värvid kontrollib esiplaani ja tausta värve, et vastata kontrastinõuetele neile, kellel on ebanormaalne värvinägemine. Kui soovite veenduda, et teie sait on värvipimedate sõbralik või soovite saada värvikombinatsioone, mis töötavad ja on kasutajakogemuse seisukohast intuitiivsed, on see ressurss asendamatu. Piisab veebisaidi aadressi sisestamisest, et tutvuda aruandega selle välimuse järgi.

Siin saate valida kuni 5 tooni tohutust paletist ja saada pilte, millel on sarnane värvikombinatsioon ja millele on lisatud HEX-koodid. Pilte saab veebilehel salvestada või alla laadida.

Järeldus

Veebilehe värvipaleti loomine on käsitöö kunsti ja teaduse ristumiskohas. Need ressursid aitavad teil kiiresti ja lihtsalt jõuda visuaalse kogemuseni, mis näeb hea välja ja toimib hästi.

Värvipaleti valimine on alati keeruline ülesanne, olgu selleks siis veebilehe või mobiilirakenduse kujundamine. Värve ei tohiks hooletult valida, sest hästi valitud palett määrab kogu saidi stiili.

Iga kord, kui töötatakse välja uus veebikujundus, kulub palju aega erinevate värvikombinatsioonide valimisele. Alternatiivsed värvipaleti tööriistad võivad tulevikus teie aega säästa.

Värvipaleti valimiseks on palju rakendusi, kuid selles loendis valisime tööriistad, mis erinevad pisut tavaprogrammidest.

Selge nimega sait, kus kogutakse teavet värvide kohta ja esitatakse üksikasjalikult. See on rohkem nagu arendaja tööriist, kus on liitmised ja lahutamised, gradientide loomine on saadaval täpse värvikoodi näiduga kõigis võimalikes värviruumides. See lähenemine on mugav neile, kellel on vaba aega, aga ka seletamatu armastus arvutuste vastu.

Sõbralik ja soe lambiteenus, mis rõõmustab teid kohtumise esimesest minutist. Saidi loogika seisneb selles, et valite "ühe värvi" ja teenus pakub sellele sobivaid lahendusi: gradient, valitud värvi tumedamate ja heledamate toonide vahemik, veidi summutatud või heledad toonid.

Erinevalt eelmistest teenustest demonstreerib see sait valmis, valitud palette, mis näitavad, kuidas lisatud fotodel värvid üksteisega suhtlevad. Vaadates merelaineid või lilli, imestad, kui rikas on loodus oma loomingulise impulsi poolest ja kui kehvad on meie teadmised värvidest. Üldiselt on see väärtuslik ressurss neile, kes alles hakkavad mõistma värvikombinatsioone ja kes armastavad ilusaid pilte.

Nagu autor oma ressurssi kirjeldab: "Tegin oma töö lihtsustamiseks veebisaidi 0to255." Veebidisainerid ja sarnaste elukutsete esindajad töötavad iga päev lilledega. Vajaliku valimisel vajavad nad selle erinevaid toone ja seda teenust kasutades saavad nad hõlpsalt aega säästa, ilma et nad koormaksid end kuueteistkümnendkoodi redigeerimisega.


Lahendus neile, kellele meeldib piltidelt värve leida. Lihtsalt laadige pilt üles ja teenus kuvab põhivärvide paleti kuueteistkümnendkoodiga.

Kes võib vajada rakendust tahvelarvuti värvilahenduste valimiseks? Tõenäoliselt neile, kes mitte ainult ei tööta värviga, vaid elavad sellega kaasa, või inimestele, kellel on sünesteesia võime. Sait pakub sarnaseid, kuid veidi vähendatud liidese funktsioone, mis on mõeldud tahvelarvuti jaoks. Kahjuks on saidil mõned puudused, näiteks 3D-spekter, mis on saidi omadus, osutub ebamugavaks.

Ameerika telesarjades öeldakse sageli fraasi "Ainult siis, kui sa olid viimane mees maa peal", meie puhul "Kui teil pole käepärast ühtegi graafikaredaktorit". Kuiv, tavaliselt ebahuvitav. Ilmselt pole selles mingit võlu ega soovi suhelda, toodet pole pikka aega arendatud.


Seda saiti on raske lihtsaks nimetada, sest loojad on kaasanud kõik, mida värviga töötamisel vaja läheb. Sellel on kõik olemas: suur valik kollektsioone, kanaleid, trende, erinevat tüüpi tööriistu mustrite loomiseks, värvide otsimiseks pildi järgi. Üldiselt kõike, mida süda soovib.




Teeme kokkuvõtte:

Vaatamata värvide valimise teenuste mitmekesisusele, võib meie toimetajate arvates nimetada Adobe Kulerit parimaks, otsustades värvikombinatsioonide valimise võimaluse järgi.

Selle värvimikseri üks peamisi eeliseid on võimalus salvestada oma valikuid, vaadata valitud värve täisekraanil, samuti jagada oma leide ja vaadata teisi. Ja neile, kes ei soovi enam hetkekski sellest teenusest osa saada, on Photoshopi pistikprogramm, mis võimaldab kasutada programmi redaktorist lahkumata.

Värv on disaineri töös üks olulisemaid elemente. Kuid kontseptsioonina võib selle valdamine olla üsna keeruline: palettide paljude kombinatsioonide tõttu on sageli raske otsustada, kuidas veebilehtede ja rakenduste liidest kõige paremini kujundada. Oleme varem avaldanud ülevaated valitud tööriistade ja . Ja täna tahame teemat laiendada, postitades ajaveebi Nick Babichi artikli Essential Color Tools for UX Designers tõlke.

Märkus sisaldab veebisaitide parimate värvivaliku teenuste ja UX-i disaini nimekirja, mis aitab säästa palju aega. Nende projektide kaudu õpid:

  • kust inspiratsiooni ammutada;
  • kuidas luua oma paletti;
  • kuidas teha disain kättesaadavaks värvinägemispuudega inimestele.

1. Inspiratsiooni otsimine

Looduse värvid

Joonistage teid ümbritsevast maailmast. Kõik, mida pead tegema, on lihtsalt ringi vaadata. Moodsad riided, raamatukaaned, sisekujundus... teie ümber on nii palju hämmastavaid asju. Parimad värvikombinatsioonid on aga looduse värvid. Jäädvustage ilus hetk ja proovige luua oma valik konkreetse pildi põhjal.

Parimad värvikombinatsioonid leiab loodusest. Värviskeemi saate igalt fotolt

Behance

Sellest populaarsest teenusest leiate huvitavaid töid, mis kuuluvad oma ala tõeliste professionaalide parimatesse veebiportfellidesse. See sait on ka suurepärane inspiratsiooniallikas. Uute väärikate projektide näidete vaatamiseks valige lihtsalt soovitud värv.

Dribbble värvid

Dribbble on üks parimaid, mis kasutajaliidese loomisel kasuks tulevad. Kui soovite visuaalselt mõista, kuidas teised on teatud värvi kasutanud, minge aadressile dribbble.com/colors ja sisestage soovitud väärtus.

Saidi värvi valimisel saate siin määrata selle minimaalse protsendi - katsetage näiteks 30% sinist.

Proovige määrata Dribbble'is teatud värvi minimaalne protsent

Disaini inspiratsioon

Designspiration on kasulik tööriist eelkõige neile, kellel on juba ideid värvikombinatsioonideks ja kes soovivad näha selliste kombinatsioonide näiteid. Valige 1 kuni 5 valikut ja leiate pildid, mis vastavad määratud parameetritele.

Designspirationist leiate erinevaid näiteid värvikombinatsioonidest

Tineye Multicolr

Tineye Multicolri värvide sobitamise teenust kasutades saate määrata pildi soovitud gamma ja isegi määrata nende kõigi protsendi (suhte). Sait on integreeritud Flickri 20 miljoni Creative Commonsi fotoga andmebaasiga. See on kindlasti üks kiiremaid viise täiusliku paleti leidmiseks.

Colorzilla

ColorZilla on Chrome'i ja Mozilla Firefoxi brauseritesse installimiseks mõeldud laiendus. See sisaldab selliseid tööriistu nagu tilguti, paleti sirvimine, loomine ja palju muud.

ColorZilla laiendus on saadaval Chrome'is ja Firefoxis

Shutterstocki spekter

Üks parimaid viise värvilahenduse kujutlemiseks on vaadata vastavaid pilte. Enamik lahendusi, mis pakuvad veebilehtede kujunduse jaoks värvivalikuid, sisaldavad seda funktsiooni, kuid Shutterstock Spectrumil on uskumatult kasutajasõbralik liides ja eelvaade, mis võivad tõesti kasulikud olla.

Lisaks pole teil vaja tellimust, kuna pildi eelhinnangust piisab (kuigi sellel on vesimärk).

W3Schools

Hiljuti vaatas ajaveeb läbi W3Schoolsi valiku. Sinna on teema kohta kogutud palju infot, alustades nende nimedest/toonide koodidest, palettide kombineerimise teooriast ja lõpetades erinevate formaatide kirjeldusega: HEX, RGB, CMYK, HWB jne. Leiad ka lihtsat generaatorid, muundurid jms miniteenused. Üldiselt huvitav vaadata.

2. Loo värvipalett

Materjalikujunduse värvitööriist

Materjalikujunduse värvitööriist võimaldab teil luua, jagada värviskeeme ja vaadata oma valikute jaoks ligikaudset kasutajaliidest. Üks selle kasulikke funktsioone on mis tahes värvikombinatsiooni juurdepääsetavuse taseme mõõtmine.

Värvid

Coolors on sait mitmevärvilise paleti loomiseks. Kinnitage lihtsalt kindel värv ja vajutage tühikuklahvi. Tööriist on hea ka seetõttu, et saate rohkem kui ühe tulemuse, kuid saate luua mitu valikut, muutes ainult algandmeid.

Värvilahendus valikus Coolors foto põhjal

Adobe Color CC

Värvide sobitamise teenus Adobe Color CC (endine Kuler) on nüüd üsna populaarne. See on Internetis vabalt saadaval, kuid on ka desector-versioon. Selle veebirakendusega saate värviratta abil luua oma paleti:

Või saate valmis pildist teatud tulemuse:

Veebilehe värvide valimine pildi järgi

Siin on sadu valmiskombinatsioone, otsi neid jaotisest “Vaata”:

Kui kasutate töölauaversiooni, saate ühe klõpsuga eksportida loodud värvisüsteemi InDesigni, Photoshopi ja Illustratori.

Paletton

Seda võrreldakse sageli eelmise Adobe Color CC-ga, kuna kujundused on väga sarnased. Ainus erinevus on see, et Palettonis ei piirdu te viie parameetriga, vaid saate katsetada täiendavate liidese toonidega.

Lisaks saate vaadata. Koos teistega võimaldab rakendus töötada kõikjal, kasutades lihtsalt nutitelefoni. Lisaks otsestele värvipalettide loomise/eksportimise ülesannetele saab siin valida piltidelt konkreetseid värve või kasutada põhivalikuid.

3. Paleti ligipääsetavaks muutmine

Tänapäeval on värvinägemise häired palju levinumad, kui me arvatagi oskame. Umbes 285 miljonit inimest maailmas kogevad nägemisprobleeme. Peaksite alati kontrollima, kas teie valitud on sellistele kasutajatele saadaval.

WebAIM-i värvikontrasti kontrollija

Mõned toonid sobivad üksteisega hästi, teised - vastupidi. Suur hulk projekte läbib A/A testi ja see on tõsiasi. Väga oluline on kontrollida liidese visuaalset kujundust ja toonide kontrastsust, eriti kui lehel on palju teksti. Nendel eesmärkidel kasutage veebisaidi värvide valimisel.

WebAIM Color Contrast Checker on veebipõhine tööriist, mis kontrollib värvikoode kuueteistkümnendsüsteemis.

Värvid

Oleme seda teenust juba eespool maininud. Muuhulgas aitab Coolors teil kontrollida ka teie leiutatud paletti värvipimeduse suhtes.

Värvipimeduse tüüp diagrammil

Tavarežiimi asemel valige nägemisprobleemi tüüp, mida soovite simuleerida. Selle tulemusena saate täpselt aru, kuidas inimene, kes ei suuda teatud värve eristada, teie disaini näeb.

Nii näeb paletti protanomaaliaga inimene

NoCoffee Vision Simulator Chrome'ile

Veebisaidi NoCoffee Vision Simulator abil saate näha, kuidas värvipimeduse või vaegnägemisega inimesed teatud veebilehti tajuvad. Näiteks kui määrate jaotises "Värvipuudus" parameetri "Achromatopsia", näete veebilehte hallina.

Nii näeb CNN-i projekt välja deuteranoopiaga inimese jaoks.

Järeldus

Huvitava ja tõhusa paleti leidmisel aitavad kindlasti kõik artiklis mainitud veebilehe värvide sobitamise ja UX disaini teenused. Kuid pidage meeles: parim viis hämmastavate palettide loomise õppimiseks on palju harjutada ja katsetada.

Üks olulisemaid tegureid ainulaadse ja äratuntava disaini loomisel on värv. Õige värviskeemi valik võib määrata veebisaidi edu või ebaõnnestumise. Kui külastaja vaatab esimest korda veebilehele, saadavad teie valitud värvid talle selle lehe kohta kiirsõnumi. Õnneks on palju tööriistu, mis aitavad teil õiget värviskeemi valida. Siin on viis parimat.

1. Jahuti

Adobe'i Kuler on pikka aega tunnistatud professionaalse veebidisaineri parimaks assistendiks. Erinevalt konkurentidest on siin suur kogukond ja saate jagada loodud palette või võtta teiste inimeste värvilahendusi ja muuta neid vastavalt oma vajadustele. Kogukonnas suhtlemiseks tuleb registreeruda ja hankida Adobe ID. Kuleri värvid on esindatud mitmesugustes vormingutes, sealhulgas RGB, CMYK, LAB ja HSV.

Inspiratsioon võib tekkida kõige ootamatuma sündmuse mõjul. Näiteks võite kohata ilusat fotot atraktiivse värvilahendusega. See värvipaleti generaator loodi just selliste fotode töötlemiseks. Laadige failid üles JPG- või PNG-vormingus ja hankige põhivärvide üksikasjalik paigutus. Olenemata sellest, millist reaktsiooni te oma külastajates esile kutsute, võib värvipaleti generaator aidata luua iga veebisaidi jaoks ainulaadse välimuse ja tunde.

Üksikud värvid ei ripu kunagi vaakumis ja igal toonil on mõju ümbritsevale. Tööriist Contrast-A kasutab palettide konfigureerimisel väga tehnilist lähenemist, pakkudes üksikasjalikku teavet heleduse suhte ning heleduse ja värvi erinevuste kohta. See on ideaalne tööriist, kui soovite luua minimalistliku veebisaidi, millel on vähe üksteist täiendavaid värve.

See populaarne Firefoxi pistikprogramm võimaldab teil määrata üksikute värvide tähenduse otse brauseris ja mõõta nende vahelist erinevust. Eelvalitud komplektidest üksikute värvide valimiseks on olemas “värviskeemi brauser”. Lihtne kasutada ja äärmiselt funktsioonirikas ColorZilla pistikprogramm on nagu Šveitsi armee brauseri laienduste nuga veebidisaineritele ja kunstnikele.

Erinevalt enamikust teistest "värviratta" värviskeemi generaatoritest kuvab Colorotate paletti 3D-koonusel. Sarnaselt Kulerile saavad kasutajad salvestada ja redigeerida oma värviskeeme, samuti vaadata teiste disainerite tehtud palette. Tööriist on integreeritud populaarsete disainiprogrammidega Adobe Fireworks ja Photoshop.

Tõhusa veebidisaini puhul räägime intuitiivsetest kasutajaliidestest ja paigutustest, kuid värvilahendused loevad sama palju, kui mitte rohkem. Siin loetletud tööriistad peaksid viima teid õiges suunas, et valida oma veebisaidi jaoks esimesel katsel suurepärane värvipalett. Internetist leiate ka muid kasulikke tööriistu, kuid just nendest saate alustada, et leida oma isikliku stiiliga sobiv arsenal. Edu ja head disaini!