Színpaletta Generátor

Miért visz egy jó színpaletta egy egész dizájnt

Válaszd rosszul a színeket, és az emberek megérzik, mielőtt meg tudnák nevezni. Egy oldal olcsónak hat, egy logó zavarosnak tűnik, egy grafikon zajjá válik. Válaszd jól, és a munka egyszerűen a helyére kattan: szándékosnak, nyugodtnak, könnyen áttekinthetőnek érződik. A szín rengeteg csendes munkát végez, hangulatot teremt, vezeti a szemet, és megmondja az olvasónak, mi számít a legjobban. Tehát egy paletta nem a végén ráaggatott díszítés. Ez egy korán meghozott döntés, és szinte minden más erre támaszkodik.

A jó hír az, hogy nem kell képzőművészeti diploma egy szolid séma eltalálásához. Néhány szabály kell a színelméletből és egy gyors mód az ötletek kipróbálására. Pontosan erre való a generátor: tucatnyi kombináción pörgethetsz végig annyi idő alatt, amennyi korábban egyetlen kombináció bíbelődéséhez kellett.

Színelmélet, szakzsargon nélkül

A legtöbb harmónia egyetlen egyszerű ötletből ered: honnan helyezkednek el a színek egymáshoz képest a színkerekén. Tanulj meg négy mintát, és szinte bármilyen sémát tudsz olvasni vagy építeni.

• Komplementer két, egymással pontosan szemközti színt használ, mint a kék és a narancs. Nagy energiájú, remek a figyelemfelkeltéshez, bár túl sok mindkettőből versenyre kel a fókuszért, ezért engedj egyet vezetni, a másikat pedig kiegészítőként használd.
• Analóg három egymás melletti színt használ, mint a piros, a narancs és a sárga. Alacsony kontrasztú, nyugodt, olyan harmónia, amilyet a természetben mindenütt látunk. Kíméli a szemet, de esetleg máshol kontrasztot kell hozzáadnod, hogy ne legyen laposkodó.
• Triádikus három, a keréken egyenletesen elosztott színt használ, mint a piros, a sárga és a kék. Élénk és kiegyensúlyozott, akkor működik a legjobban, ha egy szín dominál, a másik kettő pedig támogató szerepben van.
• Monokróm egyetlen árnyalatnál marad, és annak fényességét, telítettségét variálja. Ez a legbiztosabb séma, tiszta és összefüggő, jó tartalék, amikor semmi más nem érződik jónak.

Egy véletlen generátor jó szórakozás ihlethez, de a harmónia módok jelentik a valódi értéket. Matematikailag összefüggésben tartják a színeidet, így már azelőtt is úgy néznek ki, mint amik összetartoznak, hogy bármit is módosítanál.

HEX, RGB és HSL egyszerűen

Minden szín, amit másolsz, néhány jelölésben érkezik, és ezek mind ugyanazt írják le másképp.

A HEX a leggyakrabban látott hatkarakteres kód, mint a #3A7BD5. Egyszerűen a vörös, zöld és kék csatorna egy karakterláncba tömörítve, karakterenként kettő. Kompakt, és ezt fogod beilleszteni a CSS-be vagy egy tervezőeszközbe.

Az RGB ugyanazt a három csatornát számokként írja ki 0 és 255 között, mint a rgb(58, 123, 213). Ugyanaz a szín, barátságosabban olvasható, és praktikus, ha alfa-csatorna kell az átlátszósághoz.

A HSL úgy írja le a színt, ahogyan az emberek valójában gondolkodnak róla: árnyalat (melyik szín, 0-tól 360 fokig a keréken), telítettség (mennyire élénk) és fényesség (mennyire világos). Ez a legkönnyebb formátum a kézi finomhangoláshoz, mivel a fényesség vagy telítettség módosítása pontosan azt teszi, amit várnál, találgatás nélkül. Ha valaha formátumot kell váltanod, egy gyors HEX-RGB konverzió fájdalommentessé teszi.

Ne feledkezz meg a kontrasztról és a hozzáférhetőségről

Egy paletta lehet gyönyörű, és mégis megbukhat abban a pillanatban, amikor valaki szöveget próbál olvasni rajta. A kontraszt az, ahol a szép találkozik a használhatóval. A Web Content Accessibility Guidelines egyértelmű mércét állít: a normál törzsszövegnek legalább 4,5:1 kontrasztarányt kell elérnie a hátterével szemben, a nagy szövegnek pedig legalább 3:1-et. Ez nem bürokrácia, hanem a különbség egy olvasó között, aki simán átfut az oldaladon, és egy másik között, aki hunyorog, feladja, és elmegy.

A gyakorlati lépés az, hogy tesztelj előtér-háttér párokat építés közben, ne utólag. A világosszürke fehéren elegánsnak tűnhet egy makettben, és láthatatlanná válhat egy telefonon napfényben. Ha egy páros megbukik, általában csak egy színt kell sötétebbé vagy világosabbá tenned, nem az egész sémát kidobni. Tartsd a fényes kiemelőszíneidet gomboknak, linkeknek és kiemeléseknek hosszú szövegrészek helyett, és a legtöbb kontrasztproblémát elkerülöd, mielőtt elkezdődne.

Egy gyakorlati munkafolyamat

Íme egy folyamat, amely projektek között is megállja a helyét. Kezdd egyetlen horgonyszínnel, amiben biztos vagy, gyakran ez egy márkaszín vagy a kívánt hangulathoz illő árnyalat. Rögzítsd, majd hagyd, hogy a generátor harmóniát építsen köré. Pörgesd végig a komplementert, az analógot és a triádikust, amíg valami helyesnek nem érződik, és ne gondold túl az első kört; irányt keresel, nem a végső választ.

Amint van egy jelöltjed, oszd ki a szerepeket. Válassz egy domináns színt a háttereknek és nagy felületeknek, egy másodlagosat a szerkezethez, és egy ütős kiemelőt azokra a részekre, amiknek ki kell tűnniük. Egy laza 60-30-10 arány, domináns-másodlagos-kiemelő, kiegyensúlyozottá teszi a dolgokat anélkül, hogy merevnek érződne. Aztán ellenőrizd a kontrasztot minden szövegpárosításon, másold ki a hexakódokat, és kész is. Mentsd el, amelyek beváltak, mert egy egy projekthez eltalált paletta gyakran a következő magja is. Amikor kész vagy tovább építeni, a többi generátorunk gyűjteménye elintézi a többi darabot.

Gyakran ismételt kérdések