Egy weboldalon minden színnek dolga van: háttér, szöveg, gombok, linkek és figyelmeztetések. Ez a 12 paletta erre készült, világos vagy sötét háttérrel, jól olvasható szövegszínnel és egy kiemelő színnel a gombokhoz. A HEX kódokat egyből bemásolhatod a CSS-be vagy a weboldalkészítődbe.
Tiszta SaaS-kék
Szinte fehér háttér, nagyon sötétkék szöveg és élénkkék gombok.
Visszafogott céges
Ügyvédi irodáknak, tanácsadó cégeknek vagy ipari vállalatoknak.
Meleg webshop
A narancs meleg háttéren ragyogóvá teszi a vásárlás gombokat.
Sötét mód zölddel
Rétegzett sötét hátterek, világos szöveg és zöld kiemelés a műveletekhez.
Természetes és bio
Natúrtermék-boltokhoz, gazdaságokhoz vagy wellness márkákhoz.
Barátságos pasztell
Könnyed; a sötét kékesszürke tónus olvashatóan tartja a szöveget.
Szerkesztőségi pirossal
Blogokhoz, magazinokhoz és médiához; a piros a linkeket és a címeket emeli ki.
Tech lila
Gyakori digitális termékeknél, online kurzusoknál és AI-eszközöknél.
Türkiz és korall
Két kiegészítő kiemelés: egy a gombokhoz, egy a figyelmeztetésekhez.
Sötét luxus
Szállodákhoz, éttermekhez vagy prémium márkákhoz, ahol a fotók visznek mindent.
Egészség és jóllét
Tiszta és nyugodt; jó klinikákhoz és terápiás rendelőkhöz.
Homok és kékeszöld
Meleg, mégis komoly; utazáshoz, ingatlanhoz vagy kávézóhoz.
Koppints egy színre a HEX-kód másolásához. A ceruza ikonnal megnyithatod a palettát a szerkesztőben, és testre szabhatod.
Használd a 60-30-10 szabályt
A domináns szín (általában a háttér) az oldal nagyjából 60%-át foglalja el, a másodlagos szín 30%-ot (szekciók, kártyák, fejléc), a kiemelő szín pedig a maradék 10%-ot. A kiemelő színt tartsd meg a gomboknak és a linkeknek, hogy a látogatók tudják, hová kattintsanak.
Ellenőrizd a szöveg kontrasztját
A WCAG akadálymentességi irányelvek normál szövegnél legalább 4,5:1 kontrasztot írnak elő. A világosszürke fehéren elegánsnak tűnik, de nehezen olvasható, főleg mobilon, napfényben. Közzététel előtt futtass le egy kontrasztellenőrzést.
Határozd meg az állapotok és figyelmeztetések színét
A márka palettája mellett egy weboldalnak kellenek színek a hibához (piros), a sikerhez (zöld) és a figyelmeztetéshez (sárga vagy narancs). Válassz a palettádhoz illő változatokat, és használd őket következetesen az űrlapokon és az üzenetekben.