Generatorul de paletă e gratuit?

Da, și nu cere cont. Paleta se calculează în browserul tău, așa că nimic din ce scrii nu pleacă spre un server, iar variantele nu sunt limitate.

Câte culori ar trebui să aibă paleta unui brand?

O culoare principală, un accent și două neutre ajung pentru cele mai multe branduri; o secundară ajută când ai multe materiale. Generatorul adaugă fundalurile și, la unele stiluri, culori suport, de aceea dă între 7 și 9 culori.

Ce înseamnă AA și AAA la contrast?

Sunt nivelurile standardului WCAG. AA cere un raport de cel puțin 4,5:1 pentru text obișnuit și 3:1 pentru text mare; AAA cere 7:1, respectiv 4,5:1. Pentru o identitate de brand, AA e minimul rezonabil.

Pot porni de la o culoare pe care o am deja?

Aici, nu: generatorul pornește de la domeniu și stil. Într-un proiect RHAM, da: în descrierea brandului scrii culorile pe care le folosești deja, ca cod HEX sau ca nume, iar prima devine culoarea principală; dată ca cod HEX, rămâne exact cum ai scris-o.

Se salvează paleta undeva?

Nu. Pagina nu păstrează nimic, așa că înainte s-o închizi copiază codurile sau variabilele CSS. Aceleași răspunsuri dau însă aceleași variante, în aceeași ordine, deci o poți regăsi. Într-un proiect RHAM, paleta se salvează odată cu restul identității.

Unealtă gratuită, fără cont

Generator gratuit de paletă de culori pentru brand

Scrii numele brandului, domeniul și stilul, iar generatorul propune o paletă întreagă: culoarea principală, secundara, accentul, neutrele și fundalurile, fiecare cu rolul și codul ei HEX. Măsoară contrastul perechilor de text și fundal după standardul WCAG și îți dă paleta ca variabile CSS.

Gratuit și fără cont. Paleta se calculează în browserul tău, cu motorul aplicației RHAM, așa că nimic din ce scrii nu pleacă spre un server.

Fără domeniu, culoarea principală e aleasă la întâmplare. „Altă variantă” o schimbă.

Paleta ta

8 culori. Schema: patru culori, la distanțe egale.

Patru nuanțe la sferturi egale. Echilibrată și versatilă, cu o culoare gata pentru fiecare stare dintr-o interfață.

principală
Ferigă Umbră
Logo, butoane principale, linkuri. Ar trebui să ducă brandul singură dacă ar dispărea toate celelalte culori.
secundară
Acva Umbră
Fundaluri de secțiune, butoane secundare, umpleri în ilustrații. Susține culoarea principală fără să concureze cu ea.
accent
Ultramarin
Rezervată pentru un singur lucru pe ecran: acțiunea pe care chiar o vrei făcută. Niciodată ca fundal.
fundal
Fundal cerneală noapte
Fundaluri de pagină și de card. Dă temperatura întregului sistem.
fundal
Fundal cretă ceață
Fundaluri de pagină și de card. Dă temperatura întregului sistem.
neutră
Cenușă
Text curent, linii, stări dezactivate, tot ce e structural.
neutră
Cerneală Noapte
Text curent, linii, stări dezactivate, tot ce e structural.
suport
Cian Umbră
Grafice, etichete, culori secundare în ilustrații. Extind gama fără să introducă o culoare nouă de brand.

Contrastul perechilor de text și fundal

Măsurat cu formula WCAG. Pătratul din stânga arată perechea, nivelul e scris lângă ea.

Text pe fundalul deschis
paragrafe, meniuri, formulare, #393a36 pe #f5f5f5
Trece pentru orice text.
Contrast 10,5:1
AAA
Text pe fundalul închis
subsol, benzi închise, #f5f5f5 pe #151514
Trece pentru orice text.
Contrast 16,7:1
AAA
Principala ca text pe fundalul deschis
titluri, linkuri, #bce02c pe #f5f5f5
Nu folosi perechea pentru text.
Contrast 1,3:1
Nu trece
Text pe culoarea principală
butoane, benzi colorate, #151514 pe #bce02c
Trece pentru orice text.
Contrast 12:1
AAA
Text pe accent
butonul de acțiune, #f5f5f5 pe #662af1
Trece pentru text obișnuit.
Contrast 6:1
AA
Neutra deschisă pe fundalul deschis
linii, stări dezactivate, #9fa09c pe #f5f5f5
Nu folosi perechea pentru text.
Contrast 2,4:1
Nu trece

Variabile CSS

/* Paleta de culori
   https://rham.ro/generator-paleta-culori */
:root {
  --color-primary: #bce02c; /* Ferigă Umbră */
  --color-secondary: #39dbaa; /* Acva Umbră */
  --color-accent: #662af1; /* Ultramarin */
  --color-surface-1: #151514; /* Fundal cerneală noapte */
  --color-surface-2: #f5f5f5; /* Fundal cretă ceață */
  --color-neutral-1: #9fa09c; /* Cenușă */
  --color-neutral-2: #393a36; /* Cerneală Noapte */
  --color-support: #2d9ada; /* Cian Umbră */
}

Aceleași nume ca în tokenii CSS pe care îi exportă un proiect RHAM.

Calculat în browserul tău. Ce scrii aici nu pleacă spre niciun server.

Construiește identitatea completă

Cum alegi culorile brandului

Pornește de la ce trebuie să transmită brandul, nu de la culoarea ta preferată. O culoare foarte saturată se citește ca energie și urgență, una stinsă ca seriozitate, oricare ar fi nuanța. De aceea generatorul îți cere un stil: el decide cât de vii și cât de luminoase ies culorile și ce scheme sunt permise.

Apoi uită-te la concurență: dacă patru din cinci firme din domeniul tău folosesc albastru, nimeni nu mai ține minte încă un albastru. Generatorul are o nuanță de pornire pentru multe domenii (cafenea, restaurant, clinică, avocatură, imobiliare) și o alege la întâmplare pentru restul, așa că rezultatul e o propunere de verificat, nu un verdict.

Ce spun studiile despre asocierile culorilor, în ghidul despre psihologia culorilor.

Principală, accent, neutre: ce face fiecare

O paletă bună are o ierarhie, nu cinci culori la fel de importante. Generatorul dă fiecărei culori un rol, aceleași roluri ca în manualul de brand RHAM:

Principala poartă brandul: logoul, butoanele principale, linkurile.
Secundara o susține fără să concureze cu ea, în fundaluri de secțiune și în ilustrații.
Accentul e păstrat pentru un singur lucru pe ecran: acțiunea pe care vrei s-o facă cititorul.
Neutrele, două griuri cu o urmă din nuanța principală, duc textul, liniile și tot ce e structură.
Fundalurile, unul aproape alb și unul aproape negru, dau temperatura întregului sistem. Nu folosesc albul și negrul pur, care, puse față în față, dau pe ecran un contrast agresiv.
Culorile suport apar doar la stilurile care cer un sistem mai larg, pentru grafice și etichete.

Proporția contează cât alegerea: accentul ar trebui să ocupe între 5 și 10% din suprafață, iar neutrele cea mai mare parte. O culoare care acoperă jumătate din ecran nu mai e accent, e fundal.

Câte culori îți trebuie

Pentru cele mai multe branduri ajung o culoare principală, un accent și două neutre; o secundară ajută când ai multe materiale. Peste cinci culori de brand, fiecare material iese altfel și brandul nu mai e recunoscut după culoare. Generatorul dă între 7 și 9 culori pentru că adaugă două fundaluri și, la stilurile care cer un sistem mai larg, culori suport.

Contrastul și de ce contează

Contrastul decide dacă textul se poate citi, inclusiv de un client de 55 de ani, pe un telefon, afară. Standardul e WCAG, care compară luminozitatea a două culori și dă un raport între 1:1 (aceeași culoare) și 21:1 (negru pe alb).

AA, minimul rezonabil: 4,5:1 pentru text obișnuit și 3:1 pentru text mare, adică de la 24 px în sus sau de la aproximativ 19 px îngroșat.
AAA, nivelul strict: 7:1 pentru text obișnuit și 4,5:1 pentru text mare.
3:1, tot la nivelul AA, pentru butoane, câmpuri de formular și iconițele care transmit ceva, față de ce e în jurul lor.

Generatorul măsoară perechile care contează: textul pe cele două fundaluri, principala ca text, textul pe principală și pe accent, griul deschis pe fundalul deschis. Și nu lăsa culoarea să fie singurul semnal: o eroare are nevoie și de text sau de o iconiță, nu doar de roșu.

Cum intră paleta în manualul de brand

În manual, paleta e un set de reguli: codul exact al fiecărei culori (HEX pentru ecran, CMYK sau Pantone pentru tipar), rolul și proporția ei, perechile de text și fundal permise, cu contrastul verificat, și combinațiile interzise. Pentru site, culorile devin variabile cu nume după rol, nu după nuanță, ca o schimbare de culoare să însemne o singură valoare modificată.

În RHAM, secțiunea de culoare a manualului începe cu un paragraf care explică schema și pune apoi fiecare culoare sub rolul ei, cu numele, codul HEX și contrastul; aceleași culori se descarcă și ca tokeni CSS, pe toate planurile. Codurile CMYK pentru tipar nu le calculează nici generatorul, nici manualul RHAM: le stabilești separat și le verifici pe o probă pe hârtie.

Paleta pas cu pas, cu greșelile obișnuite, în ghidul despre paleta de culori a brandului.

Întrebări frecvente

Generatorul de paletă e gratuit?: Da, și nu cere cont. Paleta se calculează în browserul tău, așa că nimic din ce scrii nu pleacă spre un server, iar variantele nu sunt limitate.
Câte culori ar trebui să aibă paleta unui brand?: O culoare principală, un accent și două neutre ajung pentru cele mai multe branduri; o secundară ajută când ai multe materiale. Generatorul adaugă fundalurile și, la unele stiluri, culori suport, de aceea dă între 7 și 9 culori.
Ce înseamnă AA și AAA la contrast?: Sunt nivelurile standardului WCAG. AA cere un raport de cel puțin 4,5:1 pentru text obișnuit și 3:1 pentru text mare; AAA cere 7:1, respectiv 4,5:1. Pentru o identitate de brand, AA e minimul rezonabil.
Pot porni de la o culoare pe care o am deja?: Aici, nu: generatorul pornește de la domeniu și stil. Într-un proiect RHAM, da: în descrierea brandului scrii culorile pe care le folosești deja, ca cod HEX sau ca nume, iar prima devine culoarea principală; dată ca cod HEX, rămâne exact cum ai scris-o.
Se salvează paleta undeva?: Nu. Pagina nu păstrează nimic, așa că înainte s-o închizi copiază codurile sau variabilele CSS. Aceleași răspunsuri dau însă aceleași variante, în aceeași ordine, deci o poți regăsi. Într-un proiect RHAM, paleta se salvează odată cu restul identității.

Mai departe

De la paletă la identitate

În RHAM, paleta vine odată cu logoul, perechea de fonturi și manualul de brand, toate din aceeași descriere a firmei, deci potrivite între ele. Planul gratuit nu cere card.

Creează-ți brandul gratuit

Contul se confirmă prin email.