Profesionalus interneto dizainas neapsieina be spalvų schemos. Šiame straipsnyje bus parodyta 20 nuostabių įrankių, padėsiančių jums sukurti tobulą spalvų schemą.

Pasauliniame žiniatinklyje yra daug įrankių, skirtų spalvų nirvanai pasiekti. Atrodo, kad jie yra visiškai skirtingi, tačiau daugelis jų yra tik modifikuotos populiaresnių ir naudingesnių įrankių versijos.

Todėl, norėdami supaprastinti spalvų schemos pasirinkimo procesą, sudarėme 20 geriausių turimų įrankių. Jie padės nepasiklysti ieškant tinkamo varianto ir pajusti „spalvinę palaimą“

01. Kuleris

Kuler yra neabejotinai labiausiai žinoma spalvų priemonė.

„Adobe Kuler“ yra neabejotinai populiariausias internetinis spalvų temų įrankis, kuris iš paprasto spalvų įrankio žiniatinklyje tapo visapusišku temų kūrimo ir dalijimosi su kitais šaltiniu. Papildiniai yra prieinami visoms pagrindinėms „Adobe“ programoms, įskaitant „Photoshop“, „Illustrator“ ir „InDesign“, todėl „Kuler“ yra puikus „viskas viename“ įrankis įprastiems „Creative Suite“ naudotojams.

02. ColorExplorer

ColorExplorer gali atlikti daugybę skirtingų funkcijų.

Galima sakyti, kad tai vienas iš sudėtingiausių įrankių internete. Jis siūlo platų įrankių pasirinkimą, skirtą jūsų spalvų paletėms kurti, pritaikyti ir analizuoti. Pavyzdžiui, įrankiai, padedantys nustatyti prieinamumą WCAG spalvų rinkikliai, konvertavimo įrankiai, leidžiantys naršyti tarp skirtingų sistemų, ir viskas, ko reikia spalvoms pasirinkti ir paletes kurti.

03. Spalvos internete

„Colours on the Web“ palaiko „Flash“.

Spalvos internete įkelia vientisas spalvas HEX arba RGB kodais ir sukuria schemų rinkinį, pagrįstą įvairiomis matematinėmis proporcijomis. Šis įrankis neveikia „iPad“ ar „iPhone“, nes programai paleisti naudojama „Flash“.

04. SPALVOS mylėtojai

COLOURlovers spalva šiek tiek primena Pinterest

05. Vaizdingas

„Pictaculous“ leidžia įkelti vaizdą ir pagal jį sukurti spalvų schemą.

Šis „MailChimp“ kūrėjų įrankis leidžia įkelti vaizdą ir sukurti spalvų schemą pagal savo spalvas. Jis suderinamas su keletu kitų instrumentų, tokių kaip Kuler ir Colourlovers. „Pictaculous“ turi patogų „Adobe Swatch“ temos atsisiuntimą, leidžiantį greitai ir lengvai „pagauti spalvas“, kurių reikia norint papildyti nuotrauką.

06. Kontrastas - A

Contrast-A sukuria įvairių vizualinių defektų imitaciją.

Tai nėra labai įprastas spalvų schemos įrankis. Jis sukurtas siekiant užtikrinti, kad sukurtumėte WCAG suderinamą spalvų schemą peržiūrėdami kontrasto lygius ir naudodami nesuvokiamą ir prasto matomumo techniką. „Contrast-A“ turi daugybę nuorodų į vadovus, kurie yra patogesni vartotojui nei pats specifikacijų dokumentas.

07. ColoRotate

„ColoRotate“ gali pasigirti gražia „spalvų rato“ vizualizacija

„ColoRotate“ pasižymi panašiomis savybėmis kaip „Kuler“, tačiau skiriasi tuo, kad paletė rodoma gražiame 3D kūgyje ir gali generuoti daugiau nei 5 spalvas vienoje schemoje. Įrankį galima integruoti su kai kuriomis Creative Suite programomis. Jis taip pat pasiekiamas kaip „iPad“ programa ir gali veikti kartu su „Photoshop“ spalvų konsolės režimu.

08. Hex spalvų schemos generatorius

HEX sukuria spalvas, kurios puikiai dera su turima spalvų gama.

HEX yra mažas patogus įrankis spalvoms generuoti. Tiesiog įveskite spalvos kodą ir jis parodys malonių spalvų rinkinį, kuris puikiai derės su pagrindinėmis spalvomis.

09. Spalvų schemos dizaineris

Spalvų schemos dizaineris turi keletą įdomių būdų, kaip sukurti spalvų temas.

Šis internetinis įrankis turi panašias funkcijas kaip „Adobe Kuler“. Tačiau dėl įdomių spalvų temų kūrimo gudrybių jis leidžia pasirinkti ryškumo / sodrumo ir kontrasto parametrus iš schemos ypatybių, o ne „sukti“ su atskiromis spalvomis, kurios sudaro temą. Spalvų schemos dizaineris suteikia prieigą prie standartinių matematinių metodų rinkinio, įskaitant galimybę harmoningai suderinti vieno dizaino spalvų schemą. (mono), du (papildyti), trys (triada) arba keturis (tetradas) spalvos su atspalviais ir pustoniais.

10. COPASO

COPASO yra puiki priemonė sprendžiant kelias problemas vienu metu.

Vienas iš svetainės įrankių SPALVOS mylėtojai, COPASO nusipelno ypatingo dėmesio, nes leidžia vienu metu išspręsti daugybę problemų kuriant paletes. Tai suteikia visą spalvų parinkimo įrankių rinkinį paprastoje sąsajoje. Tai leidžia komentuoti paletes, įkelti vaizdus, ​​iškart sekti CMYK nuorodas ir pasirinkti, kaip sukurti spalvų schemą.

11. Spalvotas

„Colourmod“ valdiklis darbalaukyje leidžia lengvai pasirinkti ir apibrėžti spalvas.

Colourmod yra darbalaukio įrankis, leidžiantis lengvai pasirinkti vieną iš spalvų srityje, kurioje yra valdikliai, net jei naudojate „MacBook“ skirtą prietaisų skydelį arba „Konfabulator“, skirtą „Windows“. Pati Colourmod nėra paletės pasirinkimo įrankis, tačiau jį vis tiek galima naudoti spalvai pasirinkti ir apibrėžti. Tokiu atveju jums nereikia paleisti kitų sunkesnių programų.

12. ColorZilla

ColorZilla veikia naršyklėse Chrome ir Firefox.

Ši programa iš pradžių buvo sukurta kaip „Firefox“ papildinys, tačiau ją galima naudoti ir „Google Chrome“ naršyklėje. ColorZilla yra plėtinys, kuriame yra daugybė įvairių įrankių, skirtų darbui su spalvomis, įskaitant: spalvų rinkiklį, lašintuvą, css gradiento kūrimą ir paletės peržiūrą.

13. Colormunki

Colormunki leidžia sukurti spalvų schemą pagal Pantone pavyzdžius.

Patogus įrankis darbui internete, kurį Colormunki kūrėjai pristatė spalvų kalibravimui. Galite sukurti paletes iš Pantone spalvų pavyzdžių internete ir naudoti įvairias technikas, kad rastumėte malonius derinius.

14.colr.org

Naudodami Colr.org galite matyti savo vaizdų spalvų gamą.

Šis paprastas įrankis suteikia unikalią galimybę analizuoti vaizdo spalvų schemą (kitose programose ši funkcija atliekama automatiškai). Tokiu būdu galite pamatyti, iš kokių spalvų pagamintas jūsų paveikslėlis, ir pasirinkti tas, kurios jums patinka, nustatyti jas kaip pagrindines temos spalvas.

15. ColourGrab

ColourGrab yra puikus kompaktiškas vaizdo spalvų schemos generatorius.

Šis patogus įrankis sukuria spalvų paletę iš bet kurio vaizdo internete. Tiesiog įveskite vaizdo, kurį norite analizuoti, URL, svetainė jį „paims“, nustatys jo spalvų gamą ir sukurs paprastą 3D diagramą, atspindinčią skirtingų spalvų naudojimą šiam vaizdui. Galbūt tai nėra geriausias pasirinkimas standartinėms temoms, tačiau „ColourGrab“ puikiai tinka spalvų pasiskirstymui vaizduose analizuoti.

16. ColorBlender

ColorBlender sukuria penkių spalvų rinkinį, kurie puikiai dera tarpusavyje.

Ši svetainė yra paprastas įrankis, leidžiantis atrinkti vaizdą, koreguoti spalvas ir realiuoju laiku stebėti, kaip derinamas 5 puikiai suderintų spalvų rinkinys. Paletes gali būti įkeliamos tiesiai į „Photoshop“ arba „Illustrator“ kaip EPS failą.

17. GrayBit

„GrayBit“ leidžia analizuoti svetainę, kad pamatytumėte, kaip ji atrodo pilkos spalvos tonais.

Šis patogus įrankis tiesiogiai neatitinka spalvų temų, bet leidžia analizuoti svetainę, kad pamatytumėte, kaip ji atrodo konvertuota į pilkos spalvos tonus. Tai padės patikrinti, ar pasiekėte pakankamai kontrasto spalvų paletėje, kad būtų lengviau skaityti.

18.ŠALTA

COLRD puikiai tinka dalytis savo spalvų schemomis ir sužinoti apie naujas.

Ši spalvinga svetainė yra puikus įkvėpimo šaltinis, kur vartotojai dalijasi savo spalvų paletėmis, gradientais ir vaizdais. Tai ne tik spalvų schemų kūrimo svetainė, bet veikiau estetikos šventė, kurią verta aplankyti, kad pamatytumėte keletą nuostabių atradimų.

19. Spalvų medžiotojas

„Color Hunter“ yra puiki svetainė naujų spalvų paieškai.

„Color Hunter“ padeda greitai suderinti įkeltų vaizdų spalvų schemą, ieškant tinkamos žymos arba naudojant HEX nuorodas. Greita ir paprasta naudoti, svetainė leidžia rasti įdomių spalvų atradimų.

20. Stripe Generator 2.0

Stripe Generator 2.0 padeda atkreipti dėmesį į spalvų pasirinkimą.

Jis dažnai vadinamas „naujausiu web2.0 įrankiu“. Stripe Generator 2.0 yra geras įrankis, leidžiantis sukurti gražius spalvų derinius ir tuo pačiu metu neįprastus vaizdus.

Spalva – vienas svarbiausių dizainerio darbo elementų. Tačiau kaip koncepciją gana sunku įsisavinti: dėl daugybės palečių derinių dažnai sunku nuspręsti, kaip geriausiai sukurti tinklalapių ir programų sąsają. Anksčiau skelbėme apžvalgas apie atrankos priemones ir. Ir šiandien norime išplėsti temą, tinklaraštyje paskelbdami Nicko Babicho straipsnio „Essential Color Tools for UX Designers“ vertimą.

Šiame įraše pateikiamas geriausių svetainės spalvų derinimo ir UX dizaino paslaugų, kurios gali sutaupyti daug laiko, sąrašas. Šių projektų dėka išmoksite:

• iš kur semtis įkvėpimo;
• kaip susikurti savo paletę;
• kaip padaryti dizainą prieinamą žmonėms, turintiems spalvinio matymo sutrikimų.

1. Ieškote įkvėpimo

Gamtos dažai

Pieškite iš jus supančio pasaulio. Viskas, ką jums reikia padaryti, tai tiesiog apsižvalgyti. Madingi drabužiai, knygų viršeliai, interjero dizainas... aplink jus yra tiek daug nuostabių dalykų. Tačiau geriausi spalvų deriniai yra gamtos spalvos. Užfiksuokite gražią akimirką ir pabandykite sukurti savo pasirinkimą pagal konkretų vaizdą.

Geriausi spalvų deriniai yra gamtoje. Spalvų schemą galite gauti iš bet kurios nuotraukos

Behance

Populiarioje paslaugoje rasite įdomių darbų, įtrauktų į geriausius tikrų savo srities profesionalų internetinius portfelius. Ši svetainė taip pat yra puikus įkvėpimo šaltinis. Norėdami pamatyti puikių naujų projektų pavyzdžių, tiesiog pasirinkite norimą spalvą.

Dribble spalvos

„Dribbble“ yra vienas geriausių, kuris praverčia kuriant vartotojo sąsają. Jei norite vizualiai suprasti, kaip kiti specialistai naudojo tam tikrą spalvą, eikite į dribbble.com/colors ir įveskite norimą reikšmę.

Renkantis svetainės spalvą, čia galite nustatyti minimalų jos procentą – eksperimentuokite, pavyzdžiui, pabandykite nustatyti 30% mėlynos spalvos.

Pabandykite „Dribbble“ nurodyti minimalų tam tikros spalvos procentą

Dizaino įkvėpimas

Designspiration yra naudingas įrankis pirmiausia tiems, kurie jau turi idėjų spalvų deriniams ir nori pamatyti tokių derinių pavyzdžių. Pasirinkite nuo 1 iki 5 variantų ir rasite paveikslėlius, atitinkančius nurodytus parametrus.

Designspiration pateikia spalvų derinių pavyzdžių.

Tineye Multicolr

Tineye Multicolr spalvų derinimo paslaugos pagalba galite nustatyti norimą vaizdo gamą ir net nustatyti kiekvieno iš jų procentą (santykį). Svetainė yra integruota su 20 milijonų Creative Commons nuotraukų iš Flickr duomenų baze. Tai neabejotinai vienas greičiausių būdų rasti tobulą paletę.

Colorzilla

„ColorZilla“ yra plėtinys, skirtas įdiegti „Chrome“ ir „Mozilla Firefox“ naršyklėse. Tai apima tokius įrankius kaip lašintuvas, paletės peržiūros priemonė, kūrimas ir kt.

„ColorZilla“ plėtinys pasiekiamas „Chrome“ ir „Firefox“.

„Shutterstock“ spektras

Vienas iš geriausių būdų įsivaizduoti, kaip atrodys spalvų schema, yra peržiūrėti atitinkamus vaizdus. Daugumoje svetainės dizaino spalvų pasirinkimų yra ši funkcija, tačiau „Shutterstock Spectrum“ turi neįtikėtinai patogią sąsają ir peržiūrą, kuri gali būti tikrai naudinga.

Be to, jums nereikia prenumeratos, nes užteks išankstinio nuotraukos įvertinimo (net jei jis turi „vandens ženklą“).

W3Schools

Neseniai tinklaraščio įraše buvo peržiūrėtas W3Schools pasirinkimas. Informacijos šia tema yra daug, pradedant jų pavadinimais/atspalvių kodais, palečių derinimo teorija ir baigiant įvairių formatų aprašymu: HEX, RGB, CMYK, HWB ir tt Taip pat rasite paprastų generatorių, keitiklių ir panašias „mini paslaugas“. Apskritai, įdomu pamatyti.

2. Sukurkite spalvų paletę

Medžiagų dizaino spalvų įrankis

Material Design Color Tool spalvų rinkiklio paslauga leidžia kurti, bendrinti ir peržiūrėti apytikslę vartotojo sąsają pagal jūsų pasirinkimus. Viena iš naudingų jo funkcijų yra išmatuoti bet kokio spalvų derinio prieinamumo lygį.

Spalvos

„Coolors“ yra kelių spalvų paletės kūrimo svetainė. Tiesiog prisekite konkrečią spalvą ir paspauskite „tarpą“. Įrankis geras ir tuo, kad gauni daugiau nei vieną rezultatą, tačiau galima sugeneruoti keletą variantų, pakeitus tik pradinius duomenis.

Nuotraukomis pagrįsta spalvų schema „Coolors“.

Adobe color cc

Spalvų derinimo paslauga Adobe Color CC (anksčiau Kuler) dabar yra gana populiari. Jis yra laisvai prieinamas internete, tačiau yra ir aprašo versija. Naudodami šią žiniatinklio programą sukursite savo paletę naudodami spalvų ratą:

Arba galite gauti tam tikrą rezultatą iš baigto vaizdo:

Svetainės spalvos pasirinkimas pagal paveikslėlį

Čia yra šimtai paruoštų derinių, jų ieškokite skiltyje „Žiūrėti“:

Jei naudojate darbalaukio versiją, sukurtą spalvų sistemą galite eksportuoti į InDesign, Photoshop ir Illustrator vienu paspaudimu.

Paletonas

Jis dažnai lyginamas su ankstesniu „Adobe Color CC“, nes projektai yra labai panašūs. Vienintelis skirtumas yra tas, kad Paletton neapsiribojate penkiais parametrais, bet galite eksperimentuoti su papildomais sąsajos tonais.

Be to, galite pasižiūrėti. Kartu su kitais programa leidžia dirbti bet kur, tiesiog naudojant išmanųjį telefoną. Be tiesioginių užduočių kuriant / eksportuojant spalvų paletes, čia galite pasirinkti tam tikras spalvas iš paveikslėlių arba naudoti pagrindines parinktis.

3. Padaryti paletę prieinamą

Spalvų suvokimo sutrikimai šiandien yra daug dažnesni, nei manome. Apie 285 milijonai žmonių visame pasaulyje turi regėjimo problemų. Visada turėtumėte patikrinti, ar pasirinktas yra prieinamas tokiems vartotojams.

WebAIM spalvų kontrasto tikrintuvas

Kai kurie tonai puikiai dera vienas su kitu, o kiti yra visiškai priešingi. Daugybė projektų neišlaiko A / A testo, ir tai yra faktas. Labai svarbu patikrinti vizualinį sąsajos dizainą ir tonų kontrastą, ypač jei puslapyje yra daug teksto. Šiems tikslams naudokite renkantis svetainės spalvas.

„WebAIM Color Contrast Checker“ yra žiniatinklio įrankis, kuris tikrina spalvų kodus šešioliktainėmis reikšmėmis.

Spalvos

Šią paslaugą jau minėjome aukščiau. Be kita ko, „Coolors“ taip pat padės patikrinti jūsų sugalvotą paletę dėl daltonizmo.

Modelio daltonizmo tipas

Pasirinkite regėjimo problemos tipą, kurį norite imituoti, o ne įprastą režimą. Dėl to jūs tiksliai suprasite, kaip žmogus, nesugebantis atskirti tam tikrų spalvų, matys jūsų dizainą.

Taip protanomalija sergantis žmogus mato paletę

„NoCoffee Vision Simulator“, skirta „Chrome“.

Naudodami NoCoffee Vision Simulator svetainę galite pamatyti, kaip daltonizmo ar silpnaregiai žmonės suvoks tam tikrus tinklalapius. Pavyzdžiui, jei skiltyje Spalvų trūkumas pasirinksite Achromatopsia, tinklalapis bus rodomas pilkos spalvos.

Taip atrodo CNN projektas žmogui, sergančiam deuteranopija.

Išvada

Visos šiame straipsnyje paminėtos interneto svetainių ir UX dizaino spalvų derinimo paslaugos tikrai padės ieškant įdomios ir efektyvios paletės. Tačiau atminkite, kad geriausias būdas išmokti kurti nuostabias paletes yra daug praktikuotis ir eksperimentuoti.

Svetainės spalvų schemos pasirinkimas yra vienas iš svarbių projektavimo proceso aspektų. Spalvų derinio parinkimas yra gana sudėtingas ir kūrybiškas procesas. Laimei, yra daug paslaugų, kurios gali padėti padaryti teisingą pasirinkimą.

Kai kuriuose šioje apžvalgoje paminėtuose šaltiniuose pateikiama daug įvairių spalvų schemų, o kiti leidžia interaktyviai sukurti savo schemą.

Kuleris

„Adobe Kuler“ yra didelė paruoštų spalvų schemų biblioteka. Diagramą galite peržiūrėti internete ir atsisiųsti ją, kad galėtumėte naudoti „Adobe Creative Suite“ serijoje.

„Color Lovers“ šiuo metu turi beveik 2 milijonus vartotojų sukurtų spalvų schemų. Juos galite peržiūrėti rūšiuodami pagal datą, įvertinimą, peržiūrų skaičių.

„ColoRotate“ turi paruoštų spalvų schemų biblioteką. Taip pat galite sukurti savo schemą naudodami unikalų 3D įrankį. Spalvų schemą galima naudoti tiesiogiai „Photoshop“ ir „Fireworks“, naudojant „ColoRotate“ papildinį.

Color Scheme Designer leidžia pasirinkti spalvų schemos tipą (mono, nemokama, triada, tetrada, analoginė). Tada galite koreguoti spalvas ir pamatyti schemos veiksmą naudodami pavyzdį.

„ColorSchemer“ turi didelę vartotojo sukurtų spalvų schemų biblioteką. Galite rūšiuoti juos pagal paskelbimo datą, įvertinimą arba atsisiuntimų skaičių.

Pictaculous yra paprastas internetinis spalvų schemų generavimo įrankis. Galite įkelti vaizdą, o paslauga sugeneruos diagramą, kurią naudosite su vaizdu.

Spalvota spiralė

Color Spire yra labai paprasta naudoti paslauga. Pasirenkate pagrindinę spalvą ir ji siūlo spalvų schemą. Taip pat galite pamatyti diagramos išvaizdą paprastame šablone.

Spalva plačiai naudojama dizaine – leidžia „atgaivinti“ turinį – sukurti semantinį ryšį tarp elementų, užpildyti kūrinį emocijomis ir nuotaika. Trokštantys dizaineriai pasirenka atsitiktines spalvas, tačiau yra būdų, kaip spalvas panaudoti prasmingiau. Panagrinėkime 4 tokius metodus, suskirstytus pagal principą nuo paprasto iki sudėtingo.

1. Naudokite gerai žinomą diapazoną

Svetainėje brandcolors.net yra daugiau nei 500 žinomų prekės ženklų spalvų derinių. „Yandex“, „Google“, „Burger King“ visuose savo produktuose naudoja vieną paletę. Šie prekių ženklai ir jų spalvos yra žinomi ir mėgstami daugeliui. Įveskite pavadinimą paieškos juostoje arba pavartykite puslapį, spustelėkite norimą prekės ženklą ir spalvą: jo kodas bus nukopijuotas į mainų sritį.

2. Pasirinkite paruoštą profesionalų paletę

Lengviausias būdas yra paimti paruoštą spalvų derinį. Nebūtina kiekvieną kartą išradinėti dviračio iš naujo, nes harmoningi deriniai žinomi jau seniai. Eikite į colordrop.io ir pasirinkite. Svetainėje yra šimtai profesionalių 4 spalvų palečių. Pasirinkę reikiamą, spustelėkite ir nukopijuokite spalvų kodus iš dešinėje atsidariusio skydelio.

Be to, paslaugoje yra paruoštas 24 plokščio dizaino spalvų pasirinkimas. Spauskite kairėje po pavadinimu „Flat Colors“ ir paimkite jums patinkančio atspalvio kodą.

3. Nustatykite patinkančios nuotraukos ar paveikslėlio spalvų paletę

Šis metodas yra šiek tiek sudėtingesnis. Bet ir efektyvesnis.

• Svetainės coolors.co viršutiniame kairiajame skydelyje raskite fotoaparato piktogramą, spustelėkite ją. Atsidarys vaizdo atsisiuntimo langas.
• Galite pasirinkti nuotrauką ar paveikslėlį su mėgstama spalvų schema iš savo kompiuterio arba nukopijuoti nuorodą į tuščią stulpelį.
• Paslauga nustatys spalvų derinį (žemiau, po įkeltu paveikslėliu).
• Atskiras šios paletės spalvas galite pakeisti jas pažymėdami ir nuotraukoje pasirinkę tašką, iš kurio norite paimti spalvą.
• Mygtukas Koliažas išsaugo gautą paletę su spalvų kodais jūsų kompiuteryje.
• Mygtukas „Auto“ generuoja naujus derinius pagal tą pačią nuotrauką.
• Spustelėkite „Gerai“ ir eikite į pagrindinį svetainės puslapį, kad galėtumėte toliau dirbti su palete.

Pagrindinis svetainės puslapis yra ne mažiau funkcionalus. Čia galite pasirinkti atskirų spalvų atspalvius arba komplektuoti naują paletę pakeičiant atskiras spalvas.

4. Susikurkite savo spalvų schemą internete

Įkėlę nuotrauką į tą pačią coolors.co svetainę, galite ne tik nustatyti spalvų kodą, bet ir sukurti savo derinius. Norėdami tai padaryti, paspauskite tarpo klavišą – paslauga automatiškai sukuria 5 spalvų derinį.

Ant kiekvienos spalvos 4 piktogramų mygtukai:

• Alternatyvūs atspalviai – spalvų atspalviai (tamsesni ir šviesesni),
• Vilkite (perkelkite spalvą paletėje į dešinę arba į kairę),
• Reguliuoti (reguliuoti atspalvį, sodrumą, ryškumą ir kt.),
• Užraktas (užrakto spalva).