Színpaletták

Színpaletták mobilappokhoz

Egy appban a színek mutatják meg, mire lehet koppintani, mi aktív, és mi sikerült vagy hiúsult meg. Ez a 12 paletta hátteret, felületeket, fő színt és szövegszínt ad különféle appokhoz, HEX kóddal, amit átvihetsz Figmába, Flutterbe, SwiftUI-ba vagy React Native-be.

Fintech kékben és zöldben

Kék a bizalomért, zöld az egyenlegekért és a sikeres tranzakciókért.

Ételrendelős narancs

A narancs kiemeli a rendelés gombokat és az ajánlatokat.

Egészség és jóllét

Nyugodt; időpontfoglaló, szokáskövető vagy egészségkövető appokhoz.

Sötét mód lilában

Teljes fekete helyett nagyon sötétszürke háttér, világoslila kiemeléssel.

Közösségi rózsaszín és lila

Közösségi hálózatokhoz, társkeresőkhöz vagy alkotóknak.

Minimalista produktivitás

Nagyon jól olvasható; teendőlistákhoz és munkaeszközökhöz.

Oktatási sárga

Vidám és egyértelmű; nyelvtanuló vagy tanulós appokhoz.

Energikus edzés

Limezöld és piros sötét alapon; edzésekhez és statisztikákhoz.

Meditációs levendula

Lágy és nyugodt; alvást segítő, meditációs vagy naplóíró appokhoz.

Utazás türkizben és homokban

Strandot és napsütést idéz; foglaláshoz és útikalauzokhoz.

Friss zöldséges zöld

Bevásárló-, receptes vagy táplálkozási appokhoz.

Prémium vásárlás

Semleges és elegáns; a termékfotók kerülnek a középpontba.

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.

Már az elején határozd meg az állapotok színeit

Minden appnak kellenek színek a hibához, a sikerhez, a figyelmeztetéshez és az információhoz. Válassz a palettádhoz illő tónusokat, és a hiba színét ne használd másra, például márkás gombokra. Tegyél a szín mellé ikont vagy szöveget, hogy ne csak a színen múljon az érthetőség.

Tervezd meg a sötét módot is

A legtöbb telefonon van sötét mód, és sokan be is kapcsolják. Nem elég megfordítani a színeket: teljes fekete helyett nagyon sötétszürke tónusokat használj, és kicsit csökkentsd a kiemelő színek telítettségét, hogy ne vibráljanak a háttéren.

Ellenőrizd a kontrasztot és az érintési felületeket

A szövegnek a WCAG szerint legalább 4,5:1 kontrasztúnak kell lennie a háttérhez képest. A gomboknak másképp kell kinézniük aktív, lenyomott és letiltott állapotban. Teszteld az appot szabadban és alacsony fényerőn is, mert sokan így használják.

A palettákban szereplő színek

FüstfehérFehérLenvászonNarancssárgaSzénfeketeTörtfehérFenyőzöldÉbenfeketeHófehérPlatinaPoroszkékElefántcsontBorostyánNeonsárgaPezsgőszínTiffany-kék

Gyakori kérdések

Hány színe legyen egy appnak?

Általában egy fő szín, egy opcionális másodlagos szín, semleges tónusok a háttérhez és a szöveghez, és négy állapotszín: hiba, siker, figyelmeztetés és információ.

Milyen színű legyen az app fő gombja?

A márka fő színe, amíg jól elüt a háttértől. Csak az adott képernyő legfontosabb műveletéhez használd.

További színpaletták: design

Fedezz fel többet