Izvēlieties krāsu kombināciju tiešsaistē. Forša krāpšanās lapa krāsu kombinācijām

Puiši, mēs ieliekam šajā vietnē savu dvēseli. Paldies par to
ka jūs atklājat šo skaistumu. Paldies par iedvesmu un zosādu.
Pievienojieties mums Facebook Un VKontakte

Shēma Nr. 1. Papildu kombinācija

Papildu jeb papildinošas kontrastējošas krāsas ir krāsas, kas atrodas Itten krāsu apļa pretējās pusēs. To kombinācija izskatās ļoti dzīva un enerģiska, it īpaši ar maksimālu krāsu piesātinājumu.

Shēma Nr.2. Triāde - 3 krāsu kombinācija

3 krāsu kombinācija, kas atrodas vienādā attālumā viena no otras. Nodrošina augstu kontrastu, vienlaikus saglabājot harmoniju. Šī kompozīcija izskatās diezgan dzīva pat tad, ja tiek izmantotas bālas un nepiesātinātas krāsas.

Shēma Nr.3. Līdzīga kombinācija

2 līdz 5 krāsu kombinācija, kas atrodas blakus viena otrai krāsu aplī (ideālā gadījumā 2–3 krāsas). Iespaids: mierīgs, aicinošs. Līdzīgu izslēgtu krāsu kombinācijas piemērs: dzelteni oranža, dzeltena, dzelteni zaļa, zaļa, zili zaļa.

Shēma Nr. 4. Atsevišķa-komplementāra kombinācija

Papildu krāsu kombinācijas variants, bet pretējās krāsas vietā tiek izmantotas blakus krāsas. Galvenās krāsas un divu papildu krāsu kombinācija. Šī shēma izskatās gandrīz tikpat kontrastējoša, bet ne tik intensīva. Ja neesat pārliecināts, ka varat pareizi izmantot papildinošas kombinācijas, izmantojiet atsevišķas papildinošas kombinācijas.

Shēma Nr.5. Tetrad - 4 krāsu kombinācija

Krāsu shēma, kurā viena krāsa ir galvenā krāsa, divas ir viena otru papildinošas, bet cita izceļ akcentus. Piemērs: zili zaļš, zili violets, sarkans oranžs, dzeltens oranžs.

Shēma Nr 6. Laukums

Atsevišķu krāsu kombinācijas

• Balts: der ar visu. Labākā kombinācija ar zilu, sarkanu un melnu.
• Bēšs: ar zilu, brūnu, smaragdu, melnu, sarkanu, baltu.
• Pelēks: ar fuksiju, sarkans, violets, rozā, zils.
• Rozā: ar brūnu, baltu, piparmētru zaļu, olīvu, pelēku, tirkīza, mazuļa zilu.
• Fuksija (dziļi rozā): ar pelēku, iedegumu, laima, piparmētru zaļu, brūnu.
• Sarkans: ar dzeltenu, baltu, brūnu, zaļu, zilu un melnu.
• Tomātu sarkans: zils, piparmētru zaļš, smilšains, krēmbalts, pelēks.
• Ķiršu sarkans: debeszils, pelēks, gaiši oranžs, smilšu, gaiši dzeltens, bēšs.
• Aveņu sarkana: balta, melna, damaskas rozes krāsa.
• Brūna: spilgti zila, krēmkrāsa, rozā, brūna, zaļa, bēša.
• Gaiši brūns: gaiši dzeltens, krēmbalts, zils, zaļš, violets, sarkans.
• Tumši brūns: citrondzeltens, zils, piparmētru zaļš, violeti rozā, laima.
• Iedegums: rozā, tumši brūns, zils, zaļš, violets.
• Oranža: zila, zila, ceriņi, violeta, balta, melna.
• Gaiši oranža: pelēka, brūna, olīvu.
• Tumši oranža: gaiši dzeltena, olīvu, brūna, ķiršu.
• Dzeltens: zils, ceriņi, gaiši zils, violets, pelēks, melns.
• Citronu dzeltens: ķiršu sarkans, brūns, zils, pelēks.
• Gaiši dzeltena: fuksija, pelēka, brūna, sarkanas nokrāsas, iedegums, zils, violets.
• Zeltaini dzeltens: pelēks, brūns, debeszils, sarkans, melns.
• Olīva: oranža, gaiši brūna, brūna.
• Zaļa: zeltaini brūna, oranža, gaiši zaļa, dzeltena, brūna, pelēka, krēmkrāsa, melna, krēmbalta.
• Salātu krāsa: brūna, dzeltenbrūna, brūna, pelēka, tumši zila, sarkana, pelēka.
• Tirkīzs: fuksija, ķiršu sarkana, dzeltena, brūna, krēmkrāsa, tumši violeta.
• Elektriski zilā krāsa ir skaista, ja to apvieno ar zeltaini dzeltenu, brūnu, gaiši brūnu, pelēku vai sudrabainu.
• Zils: sarkans, pelēks, brūns, oranžs, rozā, balts, dzeltens.
• Tumši zila: gaiši violeta, gaiši zila, dzeltenīgi zaļa, brūna, pelēka, gaiši dzeltena, oranža, zaļa, sarkana, balta.
• Ceriņi: oranža, rozā, tumši violeta, olīvu, pelēka, dzeltena, balta.
• Tumši violeta: zeltaini brūna, gaiši dzeltena, pelēka, tirkīza, piparmētru zaļa, gaiši oranža.
• Melns ir universāls, elegants, izskatās visās kombinācijās, vislabāk ar oranžu, rozā, gaiši zaļu, baltu, sarkanu, ceriņu vai dzeltenu.

Krāsu shēmas izvēle vietnei ir viena no svarīgi punkti projektēšanas procesā. Krāsu kombinācijas izvēle ir diezgan sarežģīts un radošs process. Par laimi, ir daudz pakalpojumu, kas var sniegt nozīmīgu atbalstu pareizās izvēles izdarīšanā.

Daži resursi, kas minēti sadaļā šo apskatu, sniedz iespēju izvēlēties lielos daudzumos gatavas krāsu shēmas, savukārt citas ļauj interaktīvi veidot savu shēmu.

Vēsāks

Adobe Kuler satur lielu gatavu krāsu shēmu bibliotēku. Diagrammu var apskatīt tiešsaistē un lejupielādēt, lai to izmantotu Adobe Creative Suite produktos.

Krāsu mīļotājiem pašlaik ir gandrīz 2 miljoni lietotāju izveidotu krāsu shēmu. Jūs varat tos apskatīt, kārtojot pēc datuma, vērtējuma, skatījumu skaita.

ColoRotate ir gatavu krāsu shēmu bibliotēka. Varat arī izveidot savu diagrammu, izmantojot unikālu 3D rīku. Krāsu shēmu var izmantot tieši programmās Photoshop un Fireworks, izmantojot spraudni ColoRotate.

Krāsu shēmas dizainers ļauj izvēlēties krāsu shēmas veidu (mono, papildinošs, triāde, tetrāde, analogs). Pēc tam varat pielāgot krāsas un redzēt shēmas efektu, izmantojot piemēru.

ColorSchemer ir liela lietotāja izveidotu krāsu shēmu bibliotēka. Varat kārtot tos pēc publicēšanas datuma, vērtējuma vai lejupielāžu skaita.

Pictaculous ir vienkāršs tiešsaistes krāsu shēmu ģenerēšanas rīks. Varat augšupielādēt attēlu, un pakalpojums ģenerēs diagrammu, ko izmantot kopā ar attēlu.

Krāsa Spire

Color Spire ir ļoti viegli lietojams pakalpojums. Jūs izvēlaties pamatkrāsu, un tā piedāvā krāsu shēmu. Var arī redzēt izskats diagrammas uz vienkāršas veidnes.

Neliela, stilīga un glīta krāsu izvēles programma HTML lapu noformēšanai un citiem uzdevumiem, kuriem nepieciešams izvēlēties atbilstošas ​​krāsas.

Apskatīsim, ko šī programma var darīt.

Krāsu punkta iestatīšana

Tā kā programmai nav nepieciešama instalēšana, mēs vienkārši saglabājam arhīvu cietais disks, izsaiņojiet iekšā ērta vieta, atveriet mapi un palaidiet failu ar paplašinājumu exe. Pēc noklusējuma programma tiek palaista kā neliela poga:

Darbs ar programmu

Noklikšķiniet uz šīs ikonas, un mūsu priekšā tiks atvērts programmas logs:

Ekrāns

Šajā cilnē programma ļauj “paņemt” jebkuru krāsu tieši no ekrāna. Tas ir, no jebkuras ekrāna daļas, kas bija redzama programmas palaišanas laikā. Logā Select Site tiek parādīts viss ekrāns samazinātā izmērā.

Noklikšķinot uz jebkuras daļas šajā logā, tā parādīsies nākamajā mazākajā logā “Izvēlēties krāsu”. Šeit jūs varat mērķēt precīzāk un ņemt krāsu no konkrēta punkta.

Arī šī loga labajā pusē ir papildu pogas kopēšanai starpliktuvē, bet apakšā ir pogas “Atsvaidzināt” (atjaunina ekrāna saturu) un “Lietot” (saglabā izvēlēto krāsu un pārslēdz logu uz “ Atlase” cilne).

Atlase

Šeit ir galvenie rīki ērtai krāsu izvēlei: “Tile”, “Circle”, “Web” un “Win”, kurus pārslēdz, izmantojot papildu cilnes.

Darbs ar šiem instrumentiem nav grūts. Vienkārši virziet peli uz vēlamo krāsu, pielāgojiet to ar RGB slīdņiem (vai HSV — ja šis formāts jums ir tuvāks) un pārbaudiet, vai tā jums ir piemērota.

Ja jums patīk izvēlētā krāsa, varat nokopēt tās kodu no rindas “Teksta attēlojums”. Turklāt kodu var atlasīt arī jebkurā standarta formātā, noklikšķinot uz mazās bultiņas, lai izvērstu sarakstu.

Pievērsiet uzmanību arī trešajam krāsu logam labajā pusē augšējais stūris. Papildus atlasītajai krāsai (vertikālai svītrai) tiek parādītas vēl trīs krāsas, kas lieliski saskan ar atlasīto.

Tādējādi programma uzreiz iesaka vairākas atbilstošas ​​krāsas, kuras var izmantot citos izstrādātā dizaina elementos.

Programmai ir diezgan daudz dažādu palīgpogu. Lai uzzinātu to mērķi, vienkārši novietojiet kursoru virs tiem un izlasiet padomus, kas parādās programmas loga pašā apakšā.

Iestatījumi

Šeit varat pielāgot dažus parametrus, piemēram, fonta veidu un lielumu, kā arī dažas programmas kosmētiskās īpašības. Darbs ar programmu būs ērtāks, ja noņemsit atzīmi no izvēles rūtiņām “Atvērt cilnē “Ekrāns” un “Palaist mini loga režīmā”.

Par programmu

Šajā pēdējā cilnē varat atrast izstrādātāja kontaktpersonas un redzēt, vai jaunā versija programmu, dodoties uz tās vietni.

Programmas priekšrocības un trūkumi

• daudzi pieejami dažādi instrumenti krāsu izvēlei (aplis, flīze utt.);
• ļauj ērti salīdzināt krāsas, pārvietojot programmas logu tuvu citiem ekrāna elementiem;
• Visām pogām ir padomi.

• nedaudz sarežģīts interfeiss;
• palaišana minimizētā formā un cilnē “Ekrāns” nav īpaši ērta (lai gan iestatījumos to var atspējot);
• Ne visiem patiks programmas loga krāsa.

Secinājumi

Programma ir diezgan jaudīga bezmaksas, tā nodrošina gandrīz visu nepieciešamo, lai ērti izvēlētos krāsas, veidojot vietnes dizainu. Ir daži nelieli trūkumi, piemēram, programmas loga krāsa (ceriņi ir iegūta garša), taču tie netraucē strādāt ar to.

P.S. Atļauja brīvi kopēt un citēt. šo rakstu ar nosacījumu, ka ir norādīta atvērta aktīva saite uz avotu un saglabāta Ruslana Bogdanova autorība.

P.P.S. Ja programma jums šķiet sarežģīta, ir vienkāršākas iespējas:

Krāsa ir viena no visvairāk svarīgi elementi dizainera darbā. Taču kā koncepciju to var būt diezgan grūti apgūt: daudzo palešu kombināciju dēļ bieži vien ir grūti izlemt, kā vislabāk izveidot tīmekļa lapu un lietojumprogrammu saskarni. Iepriekš esam publicējuši pārskatus par izvēlētajiem rīkiem un . Un šodien mēs vēlamies paplašināt tēmu, ievietojot emuārā Nika Babiča raksta Essential Color Tools for UX Designers tulkojumu.

Piezīmē ir saraksts labākie pakalpojumi krāsu izvēle vietnēm un UX dizains, kas palīdzēs ietaupīt daudz laika. Izmantojot šos projektus, jūs uzzināsit:

• kur smelties iedvesmu;
• kā izveidot savu paleti;
• kā padarīt dizainu pieejamu cilvēkiem ar krāsu redzes traucējumiem.

1. Meklē iedvesmu

Dabas krāsas

Zīmējiet no apkārtējās pasaules. Viss, kas jums jādara, ir tikai paskatīties apkārt. Modes apģērbs, grāmatu vāki, interjera dizains... jums apkārt ir tik daudz pārsteidzošu lietu. Bet vislabākais krāsu kombinācijas– tās ir dabas krāsas. Iemūžiniet skaistu mirkli un mēģiniet izveidot savu atlasi, pamatojoties uz konkrētu attēlu.

Labākās krāsu kombinācijas atrodamas dabā. Krāsu shēmu var iegūt no jebkura fotoattēla

Behance

Populārā servisā jūs atradīsiet interesanti darbi, kas iekļauti labākajos tiešsaistes profesionāļu portfeļos savā jomā. Šī vietne ir arī lielisks iedvesmas avots. Lai skatītu jaunus cienīgus projektu piemērus, vienkārši atlasiet vajadzīgo krāsu.

Dribble krāsas

Dribbble ir viens no labākajiem, kas noderēs, veidojot lietotāja interfeisu. Ja vēlaties vizuāli saprast, kā citi ir izmantojuši konkrētu krāsu, dodieties uz vietni dribbble.com/colors un ievadiet vajadzīgo vērtību.

Izvēloties vietnes krāsu, šeit varat iestatīt tās minimālo procentuālo daļu - eksperimentējiet, piemēram, mēģiniet iestatīt 30% zilu.

Mēģiniet norādīt minimālais procents noteikta krāsa uz Dribbble

Dizaina iedvesma

Dizaina iedvesma noderīgs rīks galvenokārt tiem, kam jau ir idejas krāsu kombinācijas un kurš gan vēlas redzēt šādu kombināciju piemērus. Izvēlieties no 1 līdz 5 opcijām, un jūs atradīsiet attēlus, kas atbilst norādītajiem parametriem.

Programmā Designspiration jūs atradīsit dažādi piemēri krāsu kombinācijas

Tineye Multicolr

Izmantojot Tineye Multicolr krāsu saskaņošanas pakalpojumu, jūs varat noteikt vēlamo attēla gamma un pat iestatīt katra no tiem procentuālo daudzumu (attiecību). Vietne ir integrēta ar datu bāzi, kurā ir 20 miljoni Creative Commons fotoattēlu no Flickr. Šis noteikti ir viens no visvairāk ātri veidi atrast ideālajā paletē.

Colorzilla

ColorZilla ir paplašinājums instalēšanai pārlūkprogrammā Chrome un Mozilla Firefox. Tajā ir iekļauti tādi rīki kā pilinātājs, palešu pārlūkošana, izveide un citi.

ColorZilla paplašinājums pieejams pārlūkprogrammās Chrome un Firefox

Shutterstock spektrs

Viens no labākajiem veidiem, kā iedomāties, kā izskatīsies krāsu shēma, ir aplūkot atbilstošos attēlus. Lielākā daļa risinājumu, kas piedāvā krāsu izvēli vietņu dizainam, ietver šo funkciju, taču Shutterstock Spectrum ir neticami lietotājam draudzīgs interfeiss un priekšskatījums, kas patiešām var būt noderīgi.

Turklāt jums nebūs nepieciešams abonements, jo pietiks ar attēla sākotnējo novērtējumu (kaut arī tam ir “ūdenszīme”).

W3Skolas

Nesen emuārā tika pārskatīta W3Schools izlase. Tur ir apkopota ļoti daudz informācijas par tēmu, sākot no to nosaukumiem/toņu kodiem, palešu kombinēšanas teorijas un beidzot ar dažādu formātu aprakstu: HEX, RGB, CMYK, HWB utt. Jūs atradīsiet arī vienkāršu ģeneratori, pārveidotāji un līdzīgi “minipakalpojumi”. Kopumā interesanti skatīties.

2. Izveidojiet krāsu paleti

Materiālu dizaina krāsu rīks

Materiālu dizaina krāsu rīks ļauj jums izveidot, koplietot krāsu shēmas un skatīt aptuvenu lietotāja interfeisu jūsu atlasēm. Viena no tās noderīgajām funkcijām ir jebkuras krāsu kombinācijas pieejamības līmeņa mērīšana.

Krāsas

Coolors ir vietne vairāku krāsu paletes izveidei. Vienkārši piespraudiet noteiktu krāsu un nospiediet atstarpes taustiņu. Rīks ir labs arī tāpēc, ka jūs iegūsit vairāk nekā vienu rezultātu, taču varat ģenerēt vairākas opcijas, mainot tikai sākotnējos datus.

Krāsu shēma Colours, pamatojoties uz fotoattēlu

Adobe Color CC

Krāsu saskaņošanas pakalpojums Adobe Color CC (agrāk Kuler) tagad ir diezgan populārs. Viņš ir iekšā bezmaksas pieeja internetā, bet ir arī desector versija. Izmantojot šo tīmekļa lietojumprogrammu, jūs izveidosit savu paleti krāsu ritenis:

Vai arī no gatavā attēla varat iegūt noteiktu rezultātu:

Krāsu izvēle vietnei, pamatojoties uz attēlu

Šeit ir simtiem gatavu kombināciju, meklējiet tās sadaļā “Skatīties”:

Ja izmantojat darbvirsmas versiju, izveidoto krāsu sistēmu varat eksportēt uz InDesign, Photoshop un Illustrator ar vienu klikšķi.

Paletons

To bieži salīdzina ar iepriekšējo Adobe Color CC, jo dizaini ir ļoti līdzīgi. Vienīgā atšķirība ir tāda, ka Paletton jūs neaprobežojaties ar pieciem parametriem, bet varat eksperimentēt ar papildu saskarnes toņiem.

Turklāt jūs varat apskatīt. Kopā ar citiem aplikācija ļauj strādāt jebkur, vienkārši izmantojot viedtālruni. Papildus tiešajiem krāsu palešu izveides/eksportēšanas uzdevumiem šeit varat atlasīt noteiktas krāsas no attēliem vai izmantot pamata opcijas.

3. Paletes pieejamības nodrošināšana

Mūsdienās krāsu redzes traucējumi ir daudz biežāk sastopami, nekā mēs saprotam. Apmēram 285 miljoni cilvēku pasaulē saskaras ar redzes problēmām. Jums vienmēr ir jāpārbauda, ​​vai jūsu izvēlētais ir pieejams šādiem lietotājiem.

WebAIM krāsu kontrasta pārbaudītājs

Daži toņi lieliski sader viens ar otru, savukārt citi ir gluži pretēji. Liels skaits projektu neiztur A/A testu, un tas ir fakts. Ļoti svarīgi ir pārbaudīt interfeisa vizuālo noformējumu un toņu kontrastu, īpaši, ja lapā ir daudz teksta. Šiem nolūkiem izmantojiet, izvēloties vietnes krāsas.

WebAIM krāsu kontrasta pārbaudītājs ir tīmekļa rīks, kas pārbauda krāsu kodus heksadecimālajās vērtībās.

Krāsas

PAR šo pakalpojumu mēs jau minējām iepriekš. Cita starpā Coolors arī palīdzēs jums pārbaudīt, vai jūsu izgudrotajā paletē nav krāsu akluma.

Krāsu akluma veids diagrammā

Parasta režīma vietā atlasiet redzes problēmas veidu, kuru vēlaties simulēt. Tā rezultātā jūs precīzi sapratīsit, kā cilvēks, kurš nespēj atšķirt noteiktas krāsas, redzēs jūsu dizainu.

Šādi paleti redz cilvēks ar protanomāliju

NoCoffee Vision simulators pārlūkam Chrome

Izmantojot NoCoffee Vision Simulator vietni, varat redzēt, kā cilvēki ar daltonismu vai vāju redzi uztvers noteiktas tīmekļa lapas. Piemēram, ja sadaļā “Krāsu trūkums” norādāt parametru “Achromatopsia”, tīmekļa lapa būs redzama pelēkā krāsā.

Šādi izskatās CNN projekts cilvēkam ar deuteranopiju.

Secinājums

Interesantas un efektīvas paletes meklējumos noteikti palīdzēs visi rakstā minētie mājas lapas krāsu saskaņošanas un UX dizaina pakalpojumi. Bet atcerieties: labākais veids iemācieties izveidot pārsteidzošas paletes - daudz praktizējiet un eksperimentējiet.

Krāsa tiek plaši izmantota dizainā - tā ļauj “atdzīvināt” saturu – izveidot semantisku saikni starp elementiem, piepildīt darbu ar emocijām un noskaņojumu. Iesācēji dizaineri izvēlas nejaušas krāsas, taču ir veidi, kā krāsu izmantot jēgpilnākā veidā. Apskatīsim 4 šādas metodes, kas sakārtotas pēc principa no vienkāršas līdz sarežģītai.

1. Izmantojiet zināmu mērogu

Vietnē brandcolors.net ir vairāk nekā 500 slavenu zīmolu krāsu kombinācijas. Yandex, Google, Burger King visos savos produktos izmanto vienu un to pašu paleti. Šie zīmoli un to krāsas ir pazīstami un iemīļoti daudziem. Ierakstiet nosaukumu meklēšanas joslā vai ritiniet lapu, noklikšķiniet uz vajadzīgā zīmola un krāsas: tā kods tiks kopēts starpliktuvē.

2. Izvēlieties gatavu profesionālu paleti

Vienkāršākais veids ir uzņemt gatavu krāsu kombināciju. Nav nepieciešams katru reizi izgudrot riteni no jauna, jo harmoniskas kombinācijas ir zināmi jau sen. Dodieties uz colordrop.io un izvēlieties. Vietnē ir simtiem profesionālu 4 krāsu palešu. Kad esat izvēlējies vajadzīgo, noklikšķiniet un kopējiet krāsu kodus no paneļa, kas tiek atvērts labajā pusē.

Turklāt pakalpojums satur gatava izvēle 24 krāsu plakans dizains. Noklikšķiniet pa kreisi zem nosaukuma “Flat Colors” un paņemiet sev tīkamā toņa kodu.

3. Nosakiet sev tīkamās fotogrāfijas vai attēla krāsu paleti

Šī metode ir nedaudz sarežģītāka. Bet arī efektīvāk.

• Vietnes coolors.co augšējā kreisajā panelī atrodiet kameras ikonu un noklikšķiniet uz tās. Tiks atvērts attēla augšupielādes logs.
• Datorā varat atlasīt fotoattēlu vai attēlu ar vēlamo krāsu shēmu vai kopēt saiti tukšā kolonnā.
• Serviss noteiks krāsu kombināciju (zemāk zem augšupielādētā attēla).
• Jūs varat mainīt atsevišķas šīs paletes krāsas, atzīmējot tās un fotoattēlā atlasot punktu, no kura vēlaties ņemt krāsu.
• Poga “Kolāža” saglabā iegūto paleti ar krāsu kodiem datorā.
• Poga “Auto” ģenerē jaunas kombinācijas, pamatojoties uz to pašu fotoattēlu.
• Noklikšķiniet uz "Labi" un dodieties uz vietnes galveno lapu turpmākais darbs ar paleti.

Vietnes galvenā lapa ir ne mazāk funkcionāla. Šeit varat izvēlēties atsevišķu krāsu toņus vai izveidot jaunu paleti, aizstājot atsevišķas krāsas.

4. Izveidojiet savu krāsu shēmu tiešsaistē

Augšupielādējot fotoattēlu tajā pašā vietnē coolors.co, jūs varat ne tikai noteikt krāsu kodu, bet arī izveidot savas kombinācijas. Lai to izdarītu, nospiediet atstarpes taustiņu - pakalpojums automātiski izveido 5 krāsu kombināciju.

Uz katras krāsas 4 ikonu pogas:

• Alternatīvi toņi - krāsu toņi (tumšāki un gaišāki),
• Velciet (pārvietojiet krāsu paletē pa labi vai pa kreisi),
• Pielāgot (pielāgojiet nokrāsu, piesātinājumu, spilgtumu utt.),
• Slēdzene (fiksējiet krāsu).