Besplatan generator palete boja

Iz jedne boje dobijete pet, a uz svaku stoji kontrast, pa znate koji se tekst na njoj može pročitati. Ništa ne odlazi s vašeg uređaja.

1. Izaberite osnovnu boju

Boja vašeg loga, ako ga imate. Sve ispod gradi se iz nje.

Tekst na vašoj osnovnoj boji

6.7:1, u redu za obični tekst

Ili krenite od djelatnosti

2. Vaša paleta

Pritisnite boju da kopirate njen hex kod. Broj ispod svake je kontrast, i da li tekst prolazi u običnoj veličini.

Jedna boja, pet nijansi

Jedan ton, pet nivoa svjetline. Siguran izbor za malu firmu, jer se tu ništa ne može potući.

Susjedne boje

Komšije na krugu boja. Mirno i složeno, i obično rješenje kad paleta treba djelovati toplo, a ne glasno.

Suprotna boja

Suprotan ton, čuvan za ono jedno na šta želite da se klikne. Ide na dugme, ne po cijeloj stranici.

Ništa što ovdje izaberete ne napušta vaš uređaj.

Besplatan alat od Siitea, web i marketinške agencije koja radi s firmama u Bosni i Hercegovini.

Generator je besplatan i radi bez računa. Sve ispod objašnjava šta s tih pet boja raditi.

Kako radi

Kako napraviti paletu boja u četiri koraka

Traje oko dva minuta i završava na ovoj stranici. Ne treba vam račun i nema se šta instalirati. Pisano je za ljude koji vode firmu, ali dobrodošao je i svako ko bira boje.

  1. 1

    Krenite od boje koju već imate

    Ako imate logo, tablu ili ceradu, uzmite boju s njih umjesto da birate novu. Upišite hex kod u generator iznad, ili koristite birač ako kod ne znate.

  2. 2

    Izaberite shemu koja odgovara poslu

    Jedna boja u pet nijansi ako hoćete sigurno, susjedne boje ako hoćete toplo, suprotna boja ako vam treba jedan ton koji oko vuče na dugme.

  3. 3

    Provjerite šta se na kojoj boji može pročitati

    Svako polje pokazuje svoj kontrast. Sve ispod 4,5 prema 1 ide samo u velike naslove, nikad u obični tekst ni u natpis na dugmetu.

  4. 4

    Kopirajte kodove ili preuzmite list

    Pritisnite boju da kopirate hex kod za Canvu, vašu stranicu ili štampariju. PNG vam daje cijelu paletu na jednom listu, za onoga ko vam radi dizajn.

Četiri stvari koje vrijedi znati prije

  • Hex kod je šest znakova koji boju imenuju tačno, na primjer 1D4ED8. Razumiju ga Canva, Facebook, Shopify i svaka štamparija.
  • Pet boja je sasvim dovoljno. Paleta je granica koju sami sebi postavite, a ne zbirka.
  • Istu paletu držite na stranici, na Facebook naslovnici, na ceradi i na ambalaži. Ponavljanje je najveći dio onoga što ljudi zovu brendom.
  • Štampa i ekran nisu isto. Štampariji dajte hex kodove pa neka oni pretvore, umjesto da se pogađa na mašini.
Sheme boja

Tri sheme boja, i kad se koja koristi

Svaka paleta iznad je jedna od ove tri. Redovi ispod su stvarni rezultat generatora, građen iz naše narandžaste, pa vidite šta koja radi prije nego na nju vežete firmu.

Jedna boja, pet nijansi

Jedan ton

Jedan ton, pet nivoa svjetline. Siguran izbor za malu firmu, jer se tu ništa ne može potući.

  • #EAA58E9.2:1
  • #EB7F5A6.9:1
  • #EF5A285.5:1
  • #BC360A5.7:1
  • #79220510.3:1

Susjedne boje

Susjedni tonovi

Komšije na krugu boja. Mirno i složeno, i obično rješenje kad paleta treba djelovati toplo, a ne glasno.

  • #F3577E5.8:1
  • #F03B3B4.9:1
  • #EF5A285.5:1
  • #EE82157.0:1
  • #D4A3108.1:1

Suprotna boja

Suprotni tonovi

Suprotan ton, čuvan za ono jedno na šta želite da se klikne. Ide na dugme, ne po cijeloj stranici.

  • #F1BCAA11.3:1
  • #EF5A285.5:1
  • #962A068.0:1
  • #3BC3F09.2:1
  • #0A8FBC5.1:1
Boje brenda

Koje boje odgovaraju vašoj firmi

Ako krećete od nule, krenite od svoje djelatnosti. Ovi parovi su dizajnerska konvencija, a ne istraživanje, i konvencija se razlikuje od sredine do sredine, pa ih uzmite kao razuman prvi pokušaj, a ne kao pravilo.

  • Plava#1D4ED8

    Ordinacije, stomatologija, laboratorije, knjigovodstvo, osiguranje

    Čita se kao stručno i smireno, a to pacijent od ordinacije i traži. Ujedno je najsigurnija boja iza bijelog teksta.

  • Zelena#15803D

    Poljoprivreda, voće i povrće, zdrava hrana, uređenje okućnice, solari

    Kaže svježe i neprerađeno. Radi kad je proizvod nešto što raste ili vam čini dobro.

  • Crvena#DC2626

    Ćevabdžinice, pekare, brza hrana, gvožđara, akcijska prodaja

    Jedini ton koji čovjeka i ogladni i požuri. Poguban kao pozadina, odličan na jednom dugmetu.

  • Narandžasta#EA580C

    Zanati, dostava, servisi, popravke, jeftinija trgovina

    Pristupačna i jeftina za uočiti izdaleka, što znači kad je natpis cerada koja se čita iz auta u prolazu.

  • Ljubičasta#7C3AED

    Frizerski i kozmetički saloni, spa, događaji, butici, fotografija

    Prečica do premium dojma. Koristite je gdje kupac kupuje osjećaj, a ne cijenu.

  • Tirkizna#0F766E

    Stomatologija, optika, IT, coworking, logistika

    Čisto bez hladnoće. Dobar izlaz kad je u vašoj branši svaki konkurent već uzeo plavu.

Koliko čega

Pravilo 60-30-10

Pet boja nije dozvola da se svih pet koristi podjednako. Raspodjela ispod je ono što brend razdvaja od vašara, i najlakša je stvar koju možete pogoditi.

60%

Osnovna

Obično bijela ili nešto blizu bijelog. Ona je pozadina gotovo svega, a jaka boja na ovom mjestu stranicu učini zamornom za nekoliko sekundi.

30%

Sporedna

Vaš tekst, zaglavlje i podnožje. Tamno i tiho, radi posao koji niko ne primijeti.

10%

Naglasak

Boja brenda, čuvana za dugmad i linkove. Trošite je tamo gdje hoćete da se pritisne, i gotovo nigdje drugdje.

Čitljivost

Šta znači broj kontrasta

Većina alata za palete vam da pet boja i tu stane. Tu se i desi skupa greška: boja brenda koja u polju izgleda tačno, a pod bijelim tekstom na dugmetu nestane.

  • 4,5:1

    Obični tekst i dugmad

    Prag WCAG AA u običnoj veličini. Svaka boja u generatoru pokazuje svoj broj, pa to znate prije nego gradite, a ne nakon što se neko požali.

  • 3:1

    Samo veliki naslovi

    Sve od otprilike 24 piksela, ili 19 piksela podebljano. Mnoge boje brenda padnu ovdje, i zato im je mjesto u naslovu, a ne u pasusu.

  • 7:1

    Ugodno svima

    Prag AAA. Vrijedi ga gađati na stranici koju koriste stariji kupci, ili onoj koja se čita napolju, na telefonu, po danjem svjetlu.

Pitanja o paleti boja

Šta vlasnici pitaju kad biraju boje

Pitanja koja se jave svaki put kad firma bira svoje boje, odgovorena prije nego ih morate postaviti.

Je li stvarno besplatno i moram li nekoga navesti?
Besplatno je, a boje su vaše. Boja se ne može posjedovati, pa ništa što ovdje napravite ne traži navođenje izvora, licencu ni potpis. Nećemo tražiti račun ni e-mail adresu, a fajl koji preuzmete nema vodeni žig.
Šta je hex kod?
Šest znakova koji imenuju tačno jednu boju, napisanih iza ljestvice, na primjer 1D4ED8. To je format koji će od vas tražiti Canva, Facebook, Shopify, WordPress i svaka štamparija, i zato generator daje njega, a ne naziv boje. Pritisnite bilo koje polje da ga kopirate.
Koliko boja maloj firmi stvarno treba?
Tri koje nose posao i dvije rezervne. Jedna osnovna, obično bijela, jedna tamna za tekst, i jedna za dugmad i linkove. Palete ovdje daju pet da ima mjesta za svjetliju pozadinu i tamniji naslov bez uvođenja šestog tona.
Šta znači broj kontrasta ispod svake boje?
To je razlika u svjetlini između te boje i teksta koji na njoj stoji, mjerena onako kako je mjeri standard pristupačnosti. Sve na 4,5 prema 1 ili više je sigurno za obični tekst i za natpis na dugmetu. Između 3 i 4,5 boja ide samo u velike naslove. Ispod 3 na nju ne stavljajte riječi uopšte.
Koju shemu da izaberem ako pojma nemam?
Jednu boju u pet nijansi. Jedan ton u pet nivoa svjetline ne može se potući sam sa sobom, što je čini paletom koju je najteže pokvariti. Na susjedne boje prelazite kad brend treba više topline, a suprotnu boju koristite samo kad hoćete jedan ton koji oko vuče na jedno dugme.
Hoće li se ove boje odštampati isto kako izgledaju na ekranu?
Neće tačno, i to niko pošteno ne može obećati. Ekran boju pravi svjetlom, a mašina bojom, pa duboki tonovi na ceradi ispadnu tuplji nego na telefonu. Štampariji dajte hex kodove pa neka oni pretvore kako treba, umjesto da se boja pogađa na mašini.
Mogu li ovo koristiti za nešto što nije firma?
Možete. Ovdje ništa ne pita ko ste. Primjeri i savjeti pisani su za ljude koji boje biraju za firmu, jer za njih i gradimo, ali generator razliku ne zna, a ni boje.
Stiže li išta što ovdje izaberem do Siitea?
Ne. Paletu računa vaš pregledač, a PNG se crta na vašem uređaju, pa ništa što izaberete ne ide ni nama ni bilo kome drugom. Stranica radi i kad se, nakon što se učita, isključite s interneta.
Ko ga je napravio

Naši dizajneri ovo biraju svake sedmice.

Provjera kontrasta postoji zato što je to ispravka koju na klijentskim projektima radimo najčešće: boja koja u polju izgleda tačno, a na dugmetu nestane pod bijelim tekstom.

Članovi Siite tima za dizajn i brending
Da neko drugi odradi ostalo?

Boje su lakša polovina.

Alat ostaje besplatan bez obzira radimo li ikad zajedno. Kad paleta treba postati identitet koji drži kroz web, oglase i štampu, recite nam šta već imate.