Festék szín program. Palettagenerátorok a webdesignerek segítségére. A paletta hozzáférhetővé tétele

A színek óriási szerepet játszanak a webdesignban. A webhely színsémájának helyes kiválasztásához speciális szolgáltatások állnak rendelkezésre. Biztos vagyok benne, hogy minden webdesignernek van legalább egy a könyvjelzőjében.

Néha leülsz és azon gondolkozol, hogy melyik kék árnyalatot válasszuk az oldal fő árnyalatának, egy kicsit világosabbat vagy kicsit világosabbat, esetleg sötétebbet... És még mindig fel kell vennie a továbbiakat. Természetesen szemmel is megteheti, de jobb, ha valamelyik speciális szolgáltatást használja.

Nem beszélek színelméletről (ez túl terjedelmes információ), hanem egyszerűen közzéteszem a könyvjelzőim között szereplő és általam használt szolgáltatásokat.

Évek óta barátkozom ezzel a hangszerrel. A legkényelmesebb eszköz a színek kiválasztásához (szerintem). Számos további funkcióval rendelkezik. Például láthat egy példát egy világos és sötét oldalra a kiválasztott színekkel.

Kiértékelhető, hogy a színvak és más látássérült emberek hogyan látják majd az Ön színsémáját. Választhat webbiztos színeket.

Az Adobe Kuler a második internetes eszköz, amelyet elég gyakran használok. A színvilág választéka szinte ugyanaz, mint az előző oldalon, de én nem ezért szeretem. Amellett, hogy saját maga is létrehozhat színsémákat, megtekintheti és használhatja a mások által létrehozott sémákat.

Ehhez kattintson a bal felső menü "Megtekintés" gombra. És látni fog egy galériát mindenféle színkombinációból.

Ez az eszköz egy kicsit hasonlít a Colorscheme-hez, de kevesebb funkcióval rendelkezik, de látható, hogyan fognak kinézni a színblokkok.

Alig használom ezt az oldalt, de mivel már benne van a könyvjelzőim között, úgy döntöttem, hogy hozzáadom.

A következő két webhely palettát hoz létre az Ön által választott képből. Ez varázslat :)

Kiválaszt egy olyan képet, amelynek színei tetszenek, a szolgáltatás elemzi, és színpalettát ad. Ez a két oldal csak abban különbözik, hogy miként lehet őket képpel ellátni.

Ennek az oldalnak szüksége van Letöltés képet a számítógépéről.

Nagyon praktikus színválasztó. A "tetszik - nem tetszik" elve alapján.

Ahogy a név is sugallja, itt választhat színeket a most divatos, lapos dizájnhoz. Az oldal érdekessége, hogy palettát választva Corel és Photoshop programokhoz is letölthető.

Egy másik divatirányzat az anyagdizájn. Ez az oldal segít kiválasztani a UI (felhasználói felület) színkombinációit. Ezenkívül a webhelyen számos ikon található.

És végül ismét a felhasználói felület. Ez csak egy színkészlet a felhasználói felület kialakításához. Bármely színre kattintva megtekintheti, hogy egy bizonyos háttér előtt hogyan olvasható a fehér szöveg.

Ezek az eszközök vannak a könyvjelzőimben.

Írd meg kommentben, hogy milyen színpáros oldalakat használsz webdesignhoz?

A webdesigner munkájának egyik fontos összetevője a paletta kialakítása, az egymással harmonikusan keveredő színek kiválasztása. A folyamat meglehetősen összetett, kreatív megközelítést igényel. Számos olyan forrás létezik, amelyek sokkal könnyebbé tehetik a színekkel való munkát.

Nemrég találkozhatott egy részletes cikkel a témában. És valamivel korábban hasonló megjegyzést tettem közzé a kiválasztási eszközökről, a Kuler és a ColorBlender áttekintésével. Ma úgy döntöttem, hogy kiegészítem a témát, és egy kicsit több lehetőséget biztosítok a színpaletták kiválasztásához az oldalhoz.

ColoRotate

A ColoRotate eszközzel számos kész javaslat közül kiválaszthatja a legmegfelelőbb színsémát, vagy létrehozhatja sajátját. A forgó 3D palettán különböző helyeken színek kiválasztásával harmóniára vagy kontrasztra épülő kombinációkat kaphat, árnyalatokkal, fényerővel, telítettséggel dolgozhat, keverhet különböző színeket. A kész képekből színeket is kinyerhet. Létezik iPad-re készült verzió, a Photoshoppal szinkronizálható. Nagyon kedves kiszolgálás.

Adobe Color CC

Az Adobe Color CC paletta és színséma generátor lehetővé teszi:

• kísérletezzen színkombinációkkal az interaktív színkörön (7 féle színrendszer áll rendelkezésre);
• színtémák létrehozása előre meghatározott stílusok használatával;
• színsémákat hozzon létre egy fénykép vagy bármely más kész kép színeivel;
• ossza meg munkáit, és ismerjen meg másokat, ihletet merítve belőlük.

Az elkészített színtémák elmenthetők az asztali vagy mobil alkalmazásokban, valamint az oldal „Saját témák” részében.

Degraeve

A DeGraeve webhely számos eszközt kínál, beleértve a kész képeken alapuló színséma-generátort. Elég, ha az interneten talál egy érdekes színsémával rendelkező képet, töltse fel a kép URL-jét a webhely megfelelő sorába, és kattintson a paletta generálása gombra. Néhány másodperc múlva a program 10 alapszínre bontja a képet, 5 néma (halvány) és 5 világos (élénk) színre, mindegyikhez saját kódot rendelve. A generált paletta kényelmesen használható a weboldal tervezésénél, a színek tökéletesen illeszkednek egymáshoz.

Kontraszt-A

A „Keressen megfizethető színkombinációt” szlogennel ellátott Contrast-A eszközt arra tervezték, hogy egyedi palettákat hozzon létre, miközben kísérletez a megfelelő színekkel. A program a webtartalom színegyeztetési útmutatóján (szöveg és háttér) alapul. A vele való munkához alapvető ismeretek szükségesek ebben a témában.

A szolgáltatás lehetővé teszi, hogy 2 színt válasszon ki a palettán, és értékelje, hogyan fognak kinézni együtt, szövegként és háttérként használva. Ezenkívül bemutatják a normál színérzékelésre és a színvakság különböző formáira vonatkozó eredményeket.

ColorZilla

A ColorZilla alkalmazás Firefoxhoz (Google Chrome-hoz is van verzió), amely segít a webmestereknek és grafikusoknak a színekkel való munkában. Kezdőknek és haladóknak egyaránt hasznos lesz. A program elvégzi a böngésző bármely pontjának és bármely oldalának színelemzését, kivonja a kívánt színeket más alkalmazásokhoz. Az oldal színpalettájának meghatározása, színek kiválasztása egy előre definiált készletből, a leggyakrabban használtak mentése a felhasználói paletta részeként - ilyen a képességei.

Piktakuláris

A Pictaculous egy másik képalapú színpaletta-generátor. Csak fel kell töltenie a kiválasztott képet a webhelyre legfeljebb 500 KB térfogattal, és azonnal megkezdődik a színelemzés. Az eredmény alatt a kép színsémájával egy tucat további paletta jelenik meg, amelyeket már manuálisan hoztak létre a Kuler és a COLOURLovers erőforrásközösségek tagjai. Használhatók színsémaként is a fejlesztés alatt álló webhelyen. Az eredményt elküldheti e-mailjére, és megoszthatja a közösségi hálózatokon.

Ha tud más színpaletta generátort, ossza meg a linkeket a megjegyzésekben.

Az egyedi és felismerhető design létrehozásának egyik legfontosabb tényezője a szín. A színséma helyes megválasztása meghatározhatja a webhely sikerét vagy kudarcát. Amikor a látogató először rápillant egy weboldalra, a kiválasztott színek azonnali üzenetet küldenek neki az oldalról. Szerencsére számos eszköz áll rendelkezésre a megfelelő színséma kiválasztásához. Íme az öt legjobb.

1. Hűtő

Az Adobe-tól származó Kuler már régóta a professzionális webtervezők legjobb asszisztense. A versenytársakkal ellentétben itt egy kiterjedt közösség létezik, ahol megoszthatja a létrehozott palettákat, vagy átveheti mások színsémáit, és az Ön igényei szerint módosíthatja azokat. A közösségen belüli kommunikációhoz regisztrálnia kell, és Adobe ID-t kell szereznie. A Kuler színei számos formátumban jelennek meg, beleértve az RGB, CMYK, LAB és HSV formátumokat.

Az ihlet a legváratlanabb alkalom hatására is felbukkanhat. Például rábukkanhat egy gyönyörű fotóra, vonzó színvilággal. Ezt a színpaletta generátort csak az ilyen fényképek feldolgozására tervezték. Töltsön fel fájlokat JPG vagy PNG formátumban, és kapjon részletes elrendezést a kulcsszínek szerint. Nem számít, milyen reakciót próbál kiváltani látogatóiból, a színpaletta-generátor segítségével egyedi megjelenést hozhat létre bármely webhely számára.

Az egyes színek soha nem lógnak vákuumban, és minden árnyalat hatással van a körülötte lévőkre. A Contrast-A eszköz rendkívül technikai megközelítést alkalmaz a palettakonfigurációhoz, és részletes információkat nyújt a fényességarányról, valamint a fényerő és a szín különbségeiről. Ez a tökéletes eszköz, ha minimalista weboldalt szeretne létrehozni néhány színnel, amelyek kiegészítik egymást.

Ez a népszerű Firefox-bővítmény lehetővé teszi az egyes színek értékeinek meghatározását és a köztük lévő különbség mérését közvetlenül a böngészőben. Van egy "színséma böngésző" az egyes színek kiválasztásához az előre kiválasztott készletekből. Könnyen használható és rendkívül gazdag funkciókban, a ColorZilla beépülő modul olyan, mint a böngészőbővítmények svájci kése a webtervezők és művészek számára.

A legtöbb más „színkerék” színséma-generátorral ellentétben a Colorotate a palettát 3D kúpon jeleníti meg. A Kulerhez hasonlóan a felhasználók elmenthetik és szerkeszthetik saját színsémáikat, valamint megtekinthetik más tervezők által készített palettákat. Az eszköz integrálva van az Adobe Fireworks és a Photoshop népszerű tervezőprogramjaival.

Ha a hatékony webdizájnról van szó, intuitív felhasználói felületekről és elrendezésekről beszélünk, de a színsémák ugyanannyit, ha nem többet számítanak. Az itt felsorolt ​​eszközöknek a megfelelő irányba kell mutatniuk, hogy első próbálkozásra nagyszerű színpalettát válasszon webhelyéhez. Vannak más hasznos eszközök is az interneten, de ezekkel kezdheti el a személyes stílusához illő tökéletes arzenál felépítését. Sok sikert és jó tervezést!

A szín az egyik legfontosabb elem a tervezők munkájában. De mint koncepciót meglehetősen nehéz elsajátítani: a paletták sokféle kombinációja gyakran megnehezíti annak eldöntését, hogyan lehet a weboldalak és alkalmazások felületét a legjobban kialakítani. Korábban a választott eszközökről és. Ma pedig szeretnénk kiterjeszteni a témát Nick Babich Essential Color Tools for UX Designers cikkének fordításával a blogra.

Ez a bejegyzés tartalmazza a webhelyek és az UX-tervezés legjobb színegyeztetési szolgáltatásainak listáját, amelyek sok időt takarítanak meg. Ezeken a projekteken keresztül megtanulhatja:

• honnan meríthet ihletet;
• hogyan hozhat létre saját palettát;
• hogyan lehet a tervezést hozzáférhetővé tenni a színlátássérült emberek számára.

1. Inspirációt keresni

A természet színei

Meríts a körülötted lévő világból. Csak körül kell nézni. Divatos ruhák, könyvborítók, belsőépítészet... annyi csodálatos dolog van körülötted. De a legjobb színkombinációk a természet színei. Rögzítsen egy gyönyörű pillanatot, és próbáljon meg saját válogatást létrehozni egy adott kép alapján.

A legjobb színkombinációk a természetben találhatók. Bármelyik fotóról színsémát kaphat

Behance

A népszerű szolgáltatásban érdekes munkákat találhat a szakterületük igazi szakembereinek legjobb online portfólióiban. Ez az oldal is remek ihletforrás. Ha új, méltó példákat szeretne látni a projektekre, csak válassza ki a kívánt színt.

Dribbble Colors

A Dribbble az egyik legjobb, ami hasznos lesz a felhasználói felület létrehozásakor. Ha vizuálisan szeretné megérteni, hogy mások hogyan használtak egy adott színt, keresse fel a dribbble.com/colors webhelyet, és adja meg a kívánt értéket.

A webhely színének kiválasztásakor itt állíthatja be annak minimális százalékát - kísérletezzen például, próbáljon 30% kéket beállítani.

Próbálja meg beállítani egy bizonyos szín minimális százalékát a Dribbble-ben

tervezési ihletet

A Designspiration elsősorban azok számára hasznos eszköz, akiknek már van színkombinációs ötlete, és szeretnének példákat látni ilyen kombinációkra. Válasszon 1-5 lehetőség közül, és megtalálja a megadott paramétereknek megfelelő képeket.

A Designspirationben különböző színkombinációkat találhat

Tineye Multicolr

A Tineye Multicolr színillesztési szolgáltatással meghatározható a kívánt képskála, sőt mindegyik százalékos aránya (aránya) beállítható. Az oldal a Flickr 20 millió Creative Commons-fotóját tartalmazó adatbázissal van integrálva. Ez határozottan az egyik leggyorsabb módja a tökéletes paletta megtalálásának.

Colorzilla

A ColorZilla egy bővítmény a Chrome és a Mozilla Firefox böngészőkbe való telepítéshez. Olyan eszközöket tartalmaz, mint a pipetta, a palettaböngészés, a létrehozás és egyebek.

A ColorZilla bővítmény elérhető Chrome-ban és Firefoxban

Shutterstock Spectrum

Az egyik legjobb módja annak, hogy képet kapjunk arról, hogy milyen lesz a színséma, ha megnézzük a megfelelő képeket. A legtöbb weboldaltervezési színválasztékot kínáló megoldás tartalmazza ezt a funkciót, de a Shutterstock Spectrum hihetetlenül felhasználóbarát felülettel és előnézettel rendelkezik, amelyek valóban jól jöhetnek.

Ezenkívül nincs szüksége előfizetésre, mivel elég lesz a kép előzetes értékelése (még annak ellenére is, hogy van rajta „vízjel”).

W3Schools

Nemrég egy blog áttekintette a W3Schools válogatását. Rengeteg információ található a témában, kezdve a nevüktől / árnyalatkódjaiktól, a palettakombinációk elméletén át a különböző formátumok leírásáig: HEX, RGB, CMYK, HWB stb. Találsz itt egyszerű generátorokat, konvertereket is. és hasonló "miniszolgáltatások". Összességében érdekes látni.

2. Hozzon létre egy színpalettát

Material Design Color Tool

A Material Design Color Tool webhely színválasztó szolgáltatása lehetővé teszi a kiválasztott színsémák létrehozását, megosztását és előnézetét. Egyik hasznos funkciója bármely színkombináció elérhetőségi szintjének mérése.

hűtők

A Coolors több színpaletta létrehozására szolgáló webhely. Csak rögzítsen egy bizonyos színt, és nyomja meg a szóköz billentyűt. Az eszköz abból a szempontból is jó, hogy egynél több eredményt kapunk, de több opciót is generálhatunk, ha csak a kezdeti adatokat módosítjuk.

Színséma a Coolos-ban fotó alapján

Adobe Color CC

Az Adobe Color CC (korábban Kuler) színegyeztető szolgáltatás ma már meglehetősen népszerű. Ingyenesen elérhető az interneten, de létezik leíró verzió is. Ezzel a webalkalmazással elkészítheti palettáját a színkör segítségével:

Vagy kaphat egy konkrét eredményt a kész képből:

Az oldal színének kiválasztása a kép szerint

Itt több száz kész kombináció található, keresd őket a "Megtekintés" részben:

Ha az asztali verziót használja, egy kattintással exportálhatja a létrehozott színrendszert az InDesign, Photoshop és Illustrator programba.

paletta

Gyakran hasonlítják össze az előző Adobe Color CC-vel, mivel ezek a tervek nagyon hasonlóak. Az egyetlen különbség az, hogy a Palettonban nem korlátozódik öt lehetőségre, hanem kísérletezhet további interfész hangokkal.

Ezenkívül megtekintheti a . Másokkal együtt az alkalmazás lehetővé teszi, hogy bárhol dolgozzon, csak okostelefonja használatával. A színpaletták közvetlen létrehozása/exportálása mellett itt kiválaszthat bizonyos színeket a képekből, vagy használhatja az alapvető beállításokat.

3. A paletta hozzáférhetővé tétele

Jelenleg a színérzékelési zavarok sokkal gyakoribbak, mint gondolnánk. A világon körülbelül 285 millió ember tapasztal látásproblémákat. Mindig ellenőrizze, hogy az Ön által választott elérhető-e az ilyen felhasználók számára.

WebAIM színkontraszt-ellenőrző

Egyes hangok tökéletesen kombinálódnak egymással, míg mások éppen ellenkezőleg. Rengeteg projekt nem megy át az A/A teszten, és ez tény. Nagyon fontos ellenőrizni a felület látványtervét és a tónusok kontrasztját, különösen, ha sok szöveg van az oldalon. Ebből a célból használja a webhely színeinek kiválasztásakor.

A WebAIM Color Contrast Checker egy webalapú eszköz, amely hexadecimális értékben ellenőrzi a színkódokat.

hűtők

Ezt a szolgáltatást fentebb már említettük. A Coolors többek között abban is segít, hogy kitalált palettáján ellenőrizze a színvakságot.

A színvakság típusa egy sémában

A "Normál" mód helyett válassza ki a szimulálni kívánt látásprobléma típusát. Ennek eredményeként pontosan meg fogja érteni, hogy az a személy, aki nem tud különbséget tenni bizonyos színek között, hogyan fogja látni a dizájnt.

Így lát egy palettát a protanomáliás ember

NoCoffee Vision Simulator Chrome-hoz

A NoCoffee Vision Simulator webhely segítségével megtekintheti, hogy a színvak vagy gyengénlátó emberek hogyan érzékelnek bizonyos weboldalakat. Például, ha megadja az "Achromatopsia" opciót a "Színhiány" részben, a weboldal szürkén jelenik meg.

Így néz ki egy CNN projekt egy deuteranopiás ember számára

Következtetés

A cikkben említett összes színillesztési szolgáltatás a weboldalakhoz és az UX-tervezéshez minden bizonnyal segít Önnek az érdekes és hatékony termékkínálat keresésében. De ne feledje, hogy a legjobb módja annak, hogy megtanuljon csodálatos palettákat készíteni, ha sokat gyakorol és kísérletez.