Palete de culori

Palete de culori pentru aplicații mobile

Într-o aplicație, culorile arată ce se poate atinge, ce e activ și ce a mers bine sau prost. Aceste 12 palete includ fundal, suprafețe, o culoare principală și text, după tipul aplicației, cu coduri HEX pe care le poți duce în Figma, Flutter, SwiftUI sau React Native.

Fintech albastru și verde

Albastru pentru încredere și verde pentru solduri și operațiuni reușite.

Livrări portocaliu

Portocaliul scoate în evidență butoanele de comandă și promoțiile.

Sănătate și wellness

Liniștită; pentru aplicații de programări medicale, obiceiuri sau monitorizare.

Dark mode mov

Fundal gri foarte închis în loc de negru pur, cu accent mov deschis.

Social roz și mov

Pentru rețele sociale, dating sau creatori de conținut.

Productivitate minimal

Foarte lizibilă; pentru aplicații de task-uri și instrumente de lucru.

Educație galbenă

Veselă și clară; pentru aplicații de limbi străine sau învățare.

Fitness energic

Lime și roșu pe fundal închis; pentru antrenamente și statistici.

Meditație lavandă

Delicată și calmă; pentru somn, meditație sau jurnal personal.

Călătorii turcoaz și nisip

Amintește de plajă și soare; pentru rezervări și ghiduri de călătorie.

Mâncare proaspătă verde

Pentru supermarketuri, rețete sau nutriție.

Cumpărături premium

Neutră și elegantă; lasă pozele produselor în prim-plan.

Atinge o culoare ca să-i copiezi codul HEX. Iconița creion deschide paleta în editor, ca s-o modifici.

Stabilește culorile de stare de la început

Orice aplicație are nevoie de culori pentru eroare, succes, avertisment și informare. Alege tonuri care se potrivesc cu paleta ta și nu folosi culoarea de eroare pentru alte lucruri, ca butoanele brandului. Pune lângă culoare o iconiță sau un text, ca mesajul să se înțeleagă și fără ea.

Proiectează și dark mode-ul

Majoritatea telefoanelor au dark mode și mulți utilizatori îl au activat. Nu ajunge să inversezi culorile: folosește gri foarte închis în loc de negru pur și scade puțin saturația accentelor, ca să nu „vibreze” pe fundal.

Verifică contrastul și zonele tactile

Textul trebuie să aibă un contrast de cel puțin 4,5:1 față de fundal, conform WCAG. Butoanele trebuie să arate diferit când sunt active, apăsate sau dezactivate. Testează aplicația afară și cu luminozitate scăzută, așa cum o folosesc mulți oameni.

Culorile din aceste palete

Alb fumAlbInPortocaliuNegru cărbuneAlb stinsVerde bradAbanosAlb zăpadăPlatinăAlbastru de PrusiaIvoriuChihlimbarGalben fluorescentȘampanieAlbastru Tiffany

Întrebări frecvente

Câte culori ar trebui să aibă o aplicație?

De obicei o culoare principală, una secundară opțională, neutre pentru fundaluri și texte și patru culori de stare: eroare, succes, avertisment și informare.

Ce culoare să folosești pentru butonul principal al unei aplicații?

Culoarea principală a brandului, cu condiția să contrasteze bine cu fundalul. Folosește-o doar pentru cea mai importantă acțiune de pe fiecare ecran.

Mai multe palete: Design

Explorează mai departe