A 60-30-10 szabály
Ez a leghasznosabb szabály a színek elosztásához. A lakberendezésből származik, de bármilyen projektnél működik.
- 60 %: domináns szín. Általában semleges vagy lágy árnyalat. Ez borítja a hátteret és a nagy felületeket.
- 30 %: másodlagos szín. Ez adja a karaktert. Blokkokhoz, menükhöz vagy bútorokhoz használd.
- 10 %: kiemelő szín. A legerősebb. Gombokhoz, ikonokhoz vagy részletekhez használd.
Például: törtfehér 60 %-ban, tengerészkék 30 %-ban és narancssárga 10 %-ban.
Nem kell pontosan mérned. A lényeg: egy szín vezet, egy támogat, egy pedig kitűnik.
A semleges színek szerepe
Semleges szín a fehér, a fekete, a szürke, a bézs, a krémszín és a világos barna árnyalatok. Szinte mindennel jól mennek.
Pihentetik a szemet, és hagyják érvényesülni az erős színeket. A semleges színek nélküli színpaletta többnyire fárasztó.
- Fehér és törtfehér: tisztaság és tér.
- Szürke: modern és visszafogott. Olyan meleg vagy hideg szürkét válassz, amely illik a színpaletta többi részéhez.
- Bézs és homokszín: melegség és természetesség.
- Fekete vagy majdnem fekete: elegancia és kontraszt. Szövegnél egy nagyon sötét szürke általában kellemesebb, mint a teljesen fekete.
Kombinálás hőmérséklet szerint
A színek melegek (piros, narancssárga, sárga) vagy hidegek (kék, zöld, lila). Három egyszerű módon kombinálhatod őket:
- Csak meleg színek: otthonos és energikus. Tökéletes éttermekhez vagy barátságos márkákhoz.
- Csak hideg színek: nyugodt és professzionális. Tökéletes az egészségügyhöz, a technológiához vagy a pénzügyekhez.
- Hideg alap meleg kiemeléssel: a legsokoldalúbb megoldás. A meleg kiemelés magára vonja a tekintetet a nyugodt háttér előtt.
Ami a leggyakrabban félremegy: sok erős meleg és hideg szín egyszerre, domináns szín nélkül.
Kontraszt a szöveghez
Egy szép szín semmit sem ér, ha a szöveg nem olvasható. A szöveg és a háttér közötti kontraszt döntő az olvashatóság és az akadálymentesség szempontjából.
- Használj sötét szöveget világos háttéren, vagy világos szöveget sötét háttéren.
- Kerüld a sárga, a világoszöld vagy a világosszürke szöveget fehér alapon.
- Ne tegyél telített kiegészítő színeket egymásra, például pirosat a zöldre. Vibrál és fárasztja a szemet.
- A WCAG irányelvek normál szövegnél legalább 4,5:1, nagy szövegnél 3:1 kontrasztarányt írnak elő.
Bármelyik színpárt kipróbálhatod a kontrasztellenőrzőnkkel.
15 színkombináció, ami mindig működik
Ezek a párok biztos kiindulópontot adnak. Használd őket alapként, és szükség szerint adj hozzá egy semleges színt vagy egy kiemelést.
- Tengerészkék és krémszín: klasszikus, komoly és jól olvasható.
- Fekete és arany: luxus és elegancia.
- Kék és narancssárga: komplementer, tele energiával.
- Fenyőzöld és bézs: természetes és nyugodt.
- Rózsaszín és antracit: modern és kiegyensúlyozott.
- Sárga és fekete: maximális kontraszt, figyelmeztetésekhez tökéletes.
- Borvörös és homokszín: meleg és kifinomult.
- Türkiz és korall: friss és nyárias.
- Lila és halványlila: monokróm és kreatív.
- Barna és zsályazöld: földközeli, természetes márkákhoz tökéletes.
- Szürke és őszibarack: lágy és barátságos.
- Petróleumkék és halványsárga: nyugodt, egy csipetnyi fénnyel.
- Terrakotta és csontfehér: meleg és mediterrán.
- Sötét petróleumkék és mustársárga: retró és karakteres.
- Fehér és piros: közvetlen, energikus és jól látható.
Sok további ötletet találsz HEX kódokkal a színkombinációk oldalunkon.
Milyen színek illenek az egyes színekhez?
Ha már van fő színed, ez a lista gyors kezdést ad:
- Piros: fehér, fekete, szürke, tengerészkék és bézs. Merészebb változat: rózsaszín vagy narancssárga.
- Narancssárga: tengerészkék, türkiz, fehér, krémszín és barna.
- Sárga: szürke, fekete, tengerészkék és fehér. A mustársárga jól illik a sötétzöldhöz.
- Zöld: bézs, fehér, barna, arany és lágy rózsaszín.
- Kék: fehér, narancssárga, szürke, sárga és korall. A tengerészkék szinte semleges színként működik.
- Lila: szürke, halványlila, arany, zsályazöld és fehér.
- Rózsaszín: szürke, tengerészkék, olívazöld, fehér és arany.
- Barna: krémszín, zöld, petróleumkék, narancssárga és csontfehér.
Biztosan feltűnt, hogy a semleges színek szinte minden listában ott vannak. Ezek egy erős szín legbiztosabb társai.
Így állítsd össze a saját kombinációdat
- Válassz egy fő színt aszerint, hogy mit akarsz kifejezni.
- Keress egy másodlagos színt a színkörön: egy szomszédot a nyugodt hatáshoz, egy ellentétet ahhoz, ami kitűnik.
- Adj hozzá egy-két semleges színt.
- Válassz egy kiemelő színt a legfontosabb elemhez.
- Teszteld a színpalettát egy valódi példán: egy weboldalon, egy prezentációs dián vagy a szoba fotóján.
Ha bizonytalan vagy, használj kevesebb színt. Három-öt szín szinte minden projekthez elég.
Gyakori hibák a színekkel
- Túl sok szín. Az eredmény zsúfolt, és semmi sem tűnik ki.
- Minden szín egyforma súlyt kap. Domináns szín nélkül a szem nem tudja, hová nézzen.
- Elfelejtett kontraszt. Olvashatatlan szöveg vagy gombok, amelyeket senki sem lát.
- Minden túltelítve. A nagyon erős színek fárasztanak. Kombináld őket lágyabb árnyalatokkal.
- A környezet figyelmen kívül hagyása. Egy szín másképp néz ki nappali fényben, képernyőn és papíron.
- Másolás alkalmazkodás nélkül. Egy színpaletta, amely egy márkánál működik, nem feltétlenül illik a te célközönségedhez.
- Eltérő hőmérsékletű semleges színek keverése. Egy hideg szürke egy meleg bézs mellett piszkosnak tűnhet. A semleges színeket ugyanabból a családból válaszd.
- Tesztelés csak egy képernyőn. Egy szín lehet szép a számítógépen és fakó a mobilon. Mindig nézd meg egynél több eszközön.