Generator i birač kodova boja

Generirajte kodove boja, varijacije, harmonije i provjerite omjere kontrasta.

Pretvorba boja

HEX

#ca4e4e

Chestnut Rose

HEX
#ca4e4e
HSL
0, 54, 55
RGB
202, 78, 78
XYZ
28, 19, 9
CMYK
0, 61, 61, 21
LUV
50,105,21,
LAB
50, 49, 26
HWB
0, 31, 21

Varijacije

Svrha ovog odjeljka je precizno generiranje tonova (dodana čisto bijela) i nijansi (dodana čista crna) odabrane boje u koracima od 10%.

Profesionalni savjet: Koristite nijanse za stanja lebdenja i sjene, nijanse za svjetlucanja i pozadine.

Nijanse

Tamnije varijacije stvorene dodavanjem crne osnovnoj boji.

Nijanse

Svjetlije varijacije stvorene dodavanjem bijele osnovnoj boji.

Uobičajeni slučajevi upotrebe

  • Stanja komponenti korisničkog sučelja (zadržavanje pokazivača, aktivno, onemogućeno)
  • Stvaranje dubine sjenama i svjetlima
  • Izgradnja konzistentnih sustava boja

Savjet za dizajn sustava

Ove varijacije čine temelj kohezivne palete boja. Izvezite ih kako biste održali dosljednost u cijelom projektu.

Kombinacije boja

Svaka harmonija ima svoje raspoloženje. Koristite harmonije za osmišljavanje kombinacija boja koje dobro funkcioniraju zajedno.

Kako koristiti

Kliknite na bilo koju boju da biste kopirali njezinu heksadecimalnu vrijednost. Matematički je dokazano da ove kombinacije stvaraju vizualnu harmoniju.

Zašto je to važno

Harmonija boja stvara ravnotežu i izaziva specifične emocije u vašim dizajnima.

Komplement

Boja i njezina suprotnost na kotaču boja, +180 stupnjeva nijanse. Visoki kontrast.

#ca4e4e
Najbolje za: Dizajni visokog utjecaja, pozivi na akciju, logotipi

Split-komplementarni

Boja i dvije susjedne njenom komplementu, +/-30 stupnjeva nijanse od vrijednosti nasuprot glavnoj boji. Podebljano poput ravnog komplementa, ali svestranije.

Najbolje za: Živahni, ali uravnoteženi rasporedi

Trijadski

Tri boje ravnomjerno raspoređene duž kotača boja, svaka s razmakom od 120 stupnjeva nijanse. Najbolje je dopustiti jednoj boji da dominira, a ostale koristiti kao akcente.

Najbolje za: Razigrani, energični dizajni

Analogan

Tri boje iste luminancije i zasićenosti s nijansama koje su susjedne na kotaču boja, udaljene 30 stupnjeva. Glatki prijelazi.

Najbolje za: Sučelja inspirirana prirodom, umirujuća

Monokromatski

Tri boje iste nijanse s vrijednostima luminancije +/-50%. Suptilno i profinjeno.

Najbolje za: Minimalistički, sofisticirani dizajni

Tetradni

Dva seta komplementarnih boja, razdvojena za 60 stupnjeva nijanse.

Najbolje za: Bogate, raznolike sheme boja

Principi teorije boja

Stanje

Koristite jednu dominantnu boju, potkrijepite je sekundarnom i štedljivo naglašavajte.

Kontrast

Osigurajte dovoljan kontrast za čitljivost i pristupačnost.

Sklad

Boje bi trebale djelovati zajedno kako bi stvorile jedinstven vizualni doživljaj.

Provjera kontrasta boja

Testirajte kombinacije boja kako biste bili sigurni da zadovoljavaju WCAG standarde pristupačnosti za čitljivost teksta.

Boja teksta
Boja pozadine
Kontrast
Fail
Mali tekst
✖︎
Veliki tekst
✖︎
WCAG standardi
AA:Minimalni omjer kontrasta od 4,5:1 za normalan tekst i 3:1 za veliki tekst. Obavezno za većinu web-stranica.
AAA:Poboljšani omjer kontrasta od 7:1 za normalan tekst i 4,5:1 za veliki tekst. Preporučuje se za optimalnu pristupačnost.

Svatko je genije. Ali ako ribu prosuđujete po njenoj sposobnosti da se penje na drvo, ona će proživjeti cijeli život vjerujući da je glupa.

- Albert Einstein

Tehnički formati

Praktični formati

Analiza boja

Simulator sljepoće

Kreativni aspekti