Värviring. Lahe värvikombinatsiooniga leht

Värvi kasutatakse laialdaselt disainis - see võimaldab sisu "elustada" - luua elementide vahel semantiline seos, täita teos emotsioonide ja meeleoluga. Algavad disainerid valivad juhuslikud värvid, kuid on ka viise, kuidas värve tähendusrikkamalt kasutada. Mõelge 4 sellisele meetodile, mis on korraldatud põhimõttel lihtsast keerukani.

1. Kasutage tuntud vahemikku

Veebisaidile brandcolors.net on kogutud üle 500 kuulsate kaubamärkide värvikombinatsiooni. Yandex, Google, Burger King kasutavad kõigis oma toodetes sama paletti. Need kaubamärgid ja nende värvid on paljudele tuttavad ja armastatud. Sisestage nimi otsinguribale või kerige lehte, klõpsake soovitud kaubamärgil ja värvil: selle kood kopeeritakse lõikelauale.

2. Valige valmis professionaalne palett

Lihtsaim viis on võtta valmis värvikombinatsioon. Iga kord pole vaja jalgratast uuesti leiutada, sest harmoonilised kombinatsioonid on tuntud juba ammu. Minge saidile colordrop.io ja valige. Saidil on sadu professionaalseid 4-värvipalette. Pärast soovitud valimist klõpsake ja kopeerige paremal avaneval paneelil värvikoodid.

Lisaks sisaldab teenus valmisvalikut 24 lamedat disainivärvi. Klõpsake vasakul nimetuse "Flat Colors" all ja võtke endale meelepärase tooni kood.

3. Määrake teile meeldiva foto või pildi värvipalett

See meetod on veidi keerulisem. Aga ka tõhusam.

Leidke saidi coolors.co vasakpoolses ülemises paneelis kaameraikoon ja klõpsake sellel. Avaneb pildi üleslaadimise aken.
Saate valida endale meelepärase värvilahendusega foto või pildi arvutist või kopeerida lingi tühja veergu.
Teenus määrab värvide kombinatsiooni (all, üleslaaditud pildi all).
Saate muuta selle paleti üksikuid värve, märkides need ära ja valides fotol punkti, kust soovite värvi võtta.
Nupp "Kollaaž" salvestab saadud paleti koos värvikoodidega arvutisse.
Nupp "Automaatne" genereerib sama foto põhjal uusi kombinatsioone.
Paletiga edasiseks tööks klõpsake "OK" ja minge saidi avalehele.

Saidi avaleht pole vähem funktsionaalne. Siin saate valida üksikute värvide toone või koostada uue paleti, asendades üksikud värvid.

4. Looge veebis oma värviskeem

Laadides üles foto samale saidile coolors.co, saate mitte ainult määrata värvikoodi, vaid ka luua oma kombinatsioone. Selleks vajutage tühikuklahvi – teenus loob automaatselt 5 värvi kombinatsiooni.

Igal värvil 4 nupu ikooni:

Alternatiivsed toonid – värvitoonid (tumedad ja heledamad),
Lohistage (liigutada värvi paletil paremale või vasakule),
Reguleerige (reguleerige tooni, küllastust, heledust jne),
Lukk (paranda värvi).

Värv on üks kõige rohkem olulised elemendid disaineri töös. Kuid kontseptsioonina on seda üsna raske hallata: paljud palettide kombinatsioonid muudavad sageli raskeks otsustada, kuidas veebilehtede ja rakenduste liidest kõige paremini kujundada. Varem avaldasime ülevaated valitud tööriistadest ja. Ja täna tahame seda teemat laiendada, postitades ajaveebi Nick Babichi artikli tõlke UX-disaineritele olulised värvitööriistad.

See postitus sisaldab veebisaitide ja UX-i disaini parimate värvide sobitamise teenuste loendit, mis säästab teie aega. Nende projektide kaudu saate teada:

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 vajate, on lihtsalt ringi vaadata. Moerõivad, 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

Populaarsest teenusest leiate huvitavaid töid, mis on kantud oma ala tõeliste professionaalide parimatesse veebiportfellidesse. See sait on ka suurepärane inspiratsiooniallikas. Projektide uute väärikate näidete nägemiseks 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 inspiratsiooni

Designspiration on kasulik tööriist eelkõige neile, kellel on juba värvikombinatsiooni ideid 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ärvikombinatsioonid

Tineye Multicolr

Tineye Multicolri värvisobitusteenuse abil saate määrata soovitud pildigamma ja isegi määrata nende iga protsendi (suhte). Sait on integreeritud Flickri 20 miljoni Creative Commonsi fotoga andmebaasiga. See on kindlasti üks kõige enam kiired viisid leida täiuslikust paletist.

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 väljanägemisest aimu saamiseks on vaadata vastavaid pilte. Enamik veebilehe kujunduse värvivalikuid pakkuvaid lahendusi sisaldab seda funktsiooni, kuid Shutterstock Spectrumil on uskumatult kasutajasõbralik liides ja eelvaade, mis võivad tõesti kasuks tulla.

Veelgi enam, te ei vaja tellimust, kuna pildi eelhinnangust piisab (isegi hoolimata sellest, et sellel on vesimärk).

W3Schools

Hiljuti vaadati ühes ajaveebis W3Schoolsi valikut. Teema kohta on palju infot, alates nende nimedest/toonide koodidest, paletikombinatsioonide teooriast ja lõpetades erinevate formaatide kirjeldusega: HEX, RGB, CMYK, HWB jne. Leiad ka lihtsad generaatorid, muundurid ja sarnased "miniteenused". Kokkuvõttes huvitav vaadata.

2. Loo värvipalett

Materjalikujunduse värvitööriist

Materjalikujunduse värvitööriista saidi värvivalija teenus võimaldab teil luua, jagada ja vaadata oma valikute värviskeeme. Üks selle kasulikke funktsioone on mis tahes värvikombinatsiooni juurdepääsetavuse taseme mõõtmine.

jahutid

Coolors on sait mitmevärvilise paleti loomiseks. Lihtsalt fikseerige teatud värv ja vajutage tühikuklahvi. Tööriist on hea ka selle poolest, et saad rohkem kui ühe tulemuse, kuid vaid algandmeid muutes saad genereerida mitu valikut.

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 olemas ka deskriptorversioon. Selle veebirakendusega saate luua oma paleti värviratta abil:

Või saate valmis pildist konkreetse tulemuse:

Saidi värvivalik vastavalt pildile

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.

palett

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

Lisaks võite vaadata . Koos teistega võimaldab rakendus töötada kõikjal, kasutades lihtsalt nutitelefoni. Lisaks värvipalettide otsesele loomisele/eksportimisele saate siin valida piltidelt teatud värve või kasutada põhivalikuid.

3. Paleti ligipääsetavaks muutmine

Praegu on värvitaju häired palju tavalisemad, kui me arvame. 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 on üksteisega suurepäraselt ühendatud, teised aga hoopis vastupidised. Suur hulk projekte ei läbi 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 saidi värvide valimisel.

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

jahutid

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

Värvipimeduse tüüp skeemis

Režiimi "Tavaline" 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

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

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

Järeldus

Kõik artiklis mainitud veebisaitide ja UX-i disaini värvide sobitamise teenused aitavad teid kindlasti huvitava ja tõhusa valiku otsimisel. Kuid pidage meeles: Parim viisõppige looma hämmastavaid palette – harjutage ja katsetage palju.

Tutvustame kasulikku tööriista värvide valimiseks – Itteni värviringi.

Mis see on?

Lühidalt öeldes on tegemist kolme samale teljele asetatud kettaga, mille pindadele kuvatakse kõik valgusspektri põhivärvid ning maksimaalne võimalik varjundite arv ja kontrastsuste skaala.

Värvide, toonide, pilude ja osutite vastastikune paigutus ringil on realiseeritud seaduste alusel "koloristika" (värviteooria), seega on tema abiga väga mugav valida vajadusel harmoonilisi toonikombinatsioone.

See tähendab, et tegelikult on see "elav", materjalist petuleht, mis kuvab kõik peamised värvilahendused. "Live", sest seda saab erinevalt ekraanil olevast pildist üles võtta.

värviratta seade

Disaineri pool

Kunstniku pool

Osta

Loomulikult peate saama sellist näiliselt keerukat seadet kasutada, nii et meie veebisaidil saate mitte ainult osta värviratta, vaid ka selle seadmega üksikasjalikult tutvuda, lugeda selle kasutamise juhiseid, vaadata erinevaid videoid. see teema.

Samuti soovitame tutvuda riiete värvivaliku veebiteenusega.

Ring värvikombinatsioonide valimiseks

Selle seadme eelkäija oma kaasaegne vorm on Itteni värvirõngas (vt joonist allpool).

Just Johannes Itten oli esimene, kes tõi kogu spektrist välja täpselt kaksteist värvi ja paigutas need ümber ringi nii, et üksteisele võimalikult kontrastsed paarid oleksid vastakuti. Keskele asetas ta kolmnurga, millel oli kolm põhivärvi - punane, sinine ja kollane (just nendest saab kõik teised erinevates vahekordades segades). Itten ümbritses selle kolmnurga kuusnurka, mille sees ta näitas, millised toonid saadakse põhivärvide segamisel võrdsetes osades.

See tähendab, et esimene teabesõnum, mida selline paigutus kannab, on suunatud algajatele kunstnikele - nad näevad selgelt erinevate värvide segamise tulemusi.

Vaatame seda punkti lähemalt.

Miks on kaksteist põhivärvi?

Nagu jooniselt näha, on olemas kolm esmane värvid (mida nimetatakse ka esmaseks).
Neid paarikaupa võrdses vahekorras segades saate kolm teisejärguline, kokku - kuus.
Segu esmane naaberringiga teisejärguline annab kolmanda taseme värvi. Selgub veel kuus kombinatsiooni, kokku - kaksteist.(Samuti saab tertsiaarseid värve saada põhivärvide segamisel ebavõrdsetes vahekordades)

Muidugi ei piisa kaheteistkümnest värvist, et navigeerida ümbritsevas värvivalikus ja leida soovitud toon või näha, mis juhtub mitte külgnevate, vaid täiesti suvaliste värvide segamisel. Seetõttu on need ringid, mida sellel saidil müügil või tellimisel leiate, keerulisemad ja sisaldavad palju rohkem kasulik informatsioon kui lihtne "kaheteistkümneosaline Itteni sõrmus".

Värvide segamise juhend

Selle abil saate määrata suvaliste värvide ja toonide segamise tulemuse - kombinatsioonide arv on piisav, et kunstnik mõistaks, milliseid värve tuleb antud tooni saamiseks segada. See on suurepärane joonistusabi, eriti alustavatele kunstnikele.

Isegi kui toon on soovitud värvist veidi erinev, saab soovitud tulemuse saavutada segatud värvide proportsioonide muutmisega.

Aga kuidas neid samu proportsioone määrata? Kas see on juhuslik? Ei, värviratas aitab ka selles.

küllastusskaala

See skaala asub segamisjuhisega samal küljel, kuna need kaks funktsiooni töötavad koos.

Küllastusskaala on hallide toonide gradatsioon mustast valgeni. Skaalal esitatud erineva heledusega hallide lahtrite hulgast saate alati leida vajalikule toonile võimalikult lähedase küllastuse halli varjundi, mille järel selgub, kui palju on vaja värvi tumedamaks või heledamaks muuta.

Et näha, kuidas seda praktikas tehakse, vaadake seda videot:

Värvikombinatsiooni skeemid

Ketta tagakülg sisaldab mitte vähem kasulikku teavet ja võib-olla isegi rohkem - see aitab valida valitud skeemi alusel värvikombinatsioone.

Skeem värvikombinatsioonid- see on joonis, kõige lihtsamal juhul joon, mis ühendab "sobivaid" värve üksteisega. Sõnastus on väga ebamäärane, kuna kromaatilise skaala valimine on nii teadus kui ka kunst.

Esiteks on värvide harmoonia või disharmoonia väga subjektiivne mõiste. Nagu öeldakse, "maitse ja värvi jaoks pole sõpra."

Teiseks, kas need on "sobivad" või "sobimatud" - kõik oleneb konkreetsest olukorrast, meeleolust, sellest, mida täpselt kunstnik või disainer öelda tahab, sellest, mis stiilis seda tööd tehakse, kas on vaja mõnda esile tõsta. element või vastupidi – muuta see nähtamatuks.

Värviratas on tööriist, mille abil saate visuaalselt kuvada kõik peamised värvilahendused, kuid teil peab olema võimalus seda tööriista kasutada. Peate ise teadma või vähemalt tundma, milline skeemidest on teie ülesande jaoks kõige sobivam. Püüame omalt poolt lisada sellele saidile maksimaalselt kasulikku teavet värviratta kasutamise kohta (vt jaotist

Värvid mängivad veebidisainis tohutut rolli. Saidi värviskeemi õigeks valimiseks on olemas eriteenused. Olen kindel, et igal veebidisaineril on vähemalt üks järjehoidja.

Vahel istud ja mõtled, milline sinine toon saidile põhitooniks valida, kas natuke heledam või veidi heledam või võib-olla tumedam... Ja selle jaoks on ikka vaja juurde noppida. Muidugi saate seda teha silma järgi, kuid parem on kasutada mõnda eriteenust.

Ma ei räägi värviteooriast (see on liiga mahukas teave), vaid avaldan siin lihtsalt teenused, mis mul on järjehoidjates ja mida ma kasutan.

Olen selle pilliga juba aastaid sõber olnud. Mugavaim vahend värvide valimiseks (minu arvates). Sellel on palju lisafunktsioone. Näiteks näete valitud värvidega heleda ja tumeda lehe näidet.

On võimalik hinnata, kuidas nad näevad teie värviskeem värvipimeduse ja muude nägemispuudega inimesed. Saate valida veebikindlad värvid.

Adobe Kuler on teine veebitööriist, mida ma üsna sageli kasutan. Värviskeemi valik on peaaegu sama, mis eelmisel saidil, kuid ma ei armasta seda mitte sellepärast. Lisaks sellele, et saate ise värvilahendusi luua, saate vaadata ja kasutada teiste inimeste loodud skeeme.

Selleks klõpsake üleval vasakus menüüs nuppu "Vaata". Ja näete galeriid igasugustest värvikombinatsioonidest.

See tööriist on veidi sarnane Colorscheme'iga, kuid sellel on vähem funktsioone, kuid on võimalik näha, kuidas värviplokid välja näevad.

Ma peaaegu ei kasuta seda saiti, kuid kuna mul on see juba järjehoidjate hulgas, otsustasin selle lisada.

Järgmised kaks saiti loovad teie valitud pildi põhjal paleti. See on maagia :)

Valite suvalise pildi, mille värvid teile meeldivad, teenus analüüsib seda ja annab teile värvipaleti. Need kaks saiti erinevad ainult selle poolest, kuidas neile pilti pakkuda.

See sait vajab lae alla pilt arvutist.

Väga mugav värvivalija. Põhineb põhimõttel "Meeldib - ei meeldi".

flatcolors.net

Nagu nimigi ütleb, saate siin valida värve, mis sobivad praegu trendika ja lameda disainiga. Sait on huvitav selle poolest, et valides paleti, saate selle Coreli ja Photoshopi programmide jaoks alla laadida.

materialpalette.com

Teine moesuund- materjali disain. See sait aitab valida kasutajaliidese (kasutajaliidese) värvikombinatsioone. Lisaks on saidil suur hulk ikoone.

Ja lõpuks jälle kasutajaliides. See on lihtsalt kasutajaliidese kujundamise värvide komplekt. Klõpsates mis tahes värvil, näete, kuidas valget teksti teatud taustal loetakse.

Need on tööriistad, mis mul järjehoidjates on.

Kirjuta kommentaaridesse, milliseid värvide sobitamise saite veebidisaini jaoks kasutad?

Kas vajate õigete värvidega veebisaiti? teeme seda :)

Kas leidsite vea? Tõstke tekstiosa esile ja klõpsake CTRL+ENTER

Poisid, paneme saidile oma hinge. Aitäh selle eest
selle ilu avastamiseks. Aitäh inspiratsiooni ja hanenaha eest.
Liituge meiega aadressil Facebook Ja Kokkupuutel

Skeem nr 1. Täiendav kombinatsioon

Täiendavad või täiendavad kontrastsed on värvid, mis asuvad Itteni värviratta vastaskülgedel. Nende kombinatsioon näeb välja väga elav ja energiline, eriti maksimaalse värviküllastusega.

Skeem number 2. Triaad - 3 värvi kombinatsioon

3 värvi kombinatsioon, mis asuvad üksteisest samal kaugusel. Tagab suure kontrasti, säilitades samal ajal harmoonia. Selline kompositsioon näeb üsna elav välja isegi kahvatute ja küllastumata värvide kasutamisel.

Skeem nr 3. Sarnane kombinatsioon

Kombinatsioon 2 kuni 5 värvist, mis asuvad värvirattal kõrvuti (ideaaljuhul 2-3 värvi). Mulje: rahulik, lõõgastav. Näide sarnaste summutatud värvide kombinatsioonist: kollane-oranž, kollane, kollakasroheline, roheline, sinakasroheline.

Skeem nr 4. Eraldi-komplementaarne kombinatsioon

Täiendava värvikombinatsiooni variant, ainult vastupidise värvi asemel kasutatakse sellega külgnevaid värve. Põhivärvi ja kahe lisavärvi kombinatsioon. See skeem näeb välja peaaegu sama kontrastne, kuid mitte nii pingeline. Kui te pole kindel, kas saate täiendavaid kombinatsioone õigesti kasutada, kasutage eraldi-komplementaarseid kombinatsioone.

Skeem number 5. Tetrad - 4 värvi kombinatsioon

Värvilahendus, kus üks värv on peamine, kaks täiendavad üksteist ja teine rõhutab aktsente. Näide: sinakasroheline, sinakasvioletne, punakasoranž, kollakasoranž.

Skeem number 6. Ruut

Üksikute värvide kombinatsioonid

Valge: sobib kõigega. Parim kombinatsioon sinise, punase ja mustaga.
Beež: sinise, pruuni, smaragdi, musta, punase, valgega.
Hall: fuksiaga, punane, lilla, roosa, sinine.
Roosa: pruuni, valge, mündirohelise, oliivi, halli, türkiissinise, beebisinise värviga.
Fuksia (tumeroosa): halli, pruunika, laimi, piparmündirohelise, pruuniga.
Punane: kollase, valge, pruuni, rohelise, sinise ja mustaga.
Tomatipunane: sinine, piparmündiroheline, liivane, kreemjas valge, hall.
Kirsipunane: taevasinine, hall, heleoranž, liivane, kahvatukollane, beež.
Vaarikapunane: valge, must, damaskuse roos.
Pruun: helesinine, kreemjas, roosa, kollakas, roheline, beež.
Helepruun: kahvatukollane, kreemjas valge, sinine, roheline, lilla, punane.
Tumepruun: sidrunikollane, taevasinine, piparmündiroheline, lillakasroosa, laim.
Punakaspruun: roosa, tumepruun, sinine, roheline, lilla.
Oranž: sinine, sinine, lilla, lilla, valge, must.
Heleoranž: hall, pruun, oliiv.
Tumeoranž: kahvatukollane, oliiv, pruun, kirss.
Kollane: sinine, lillakas, helesinine, lilla, hall, must.
Sidrunkollane: kirsipunane, pruun, sinine, hall.
Kahvatukollane: fuksia, hall, pruun, punased toonid, punakaspruun, sinine, lilla.
Kuldkollane: hall, pruun, taevasinine, punane, must.
Oliiv: oranž, helepruun, pruun.
Roheline: kuldpruun, oranž, salat, kollane, pruun, hall, kreem, must, kreemjas valge.
Salati värvus: pruun, kollakaspruun, kollakas, hall, tumesinine, punane, hall.
Türkiis: fuksia, kirsipunane, kollane, pruun, kreemjas, tumelilla.
Elektrik on ilus kombinatsioonis kuldkollase, pruuni, helepruuni, halli või hõbedaga.
Sinine: punane, hall, pruun, oranž, roosa, valge, kollane.
Tumesinine: helelilla, taevasinine, kollakasroheline, pruun, hall, kahvatukollane, oranž, roheline, punane, valge.
Lilla: oranž, roosa, tumelilla, oliiv, hall, kollane, valge.
Tumelilla: kuldpruun, kahvatukollane, hall, türkiissinine, piparmündiroheline, heleoranž.
Must on mitmekülgne, elegantne, näeb välja kõikides kombinatsioonides, kõige paremini oranži, roosa, salati, valge, punase, lilla või kollasega.