#F0FFFF · Generator i Picker kodova boja

Generiši kodove boja, varijacije, harmonije i proveri kontrastne odnose.

Konverzija boja

#f0ffff

Varijacije

Svrha ovog odeljka je da precizno proizvede nijanse (dodato čisto belo) i senke (dodato čisto crno) tvoje izabrane boje u koracima od 10%.

Pro Savet: Koristi senke za hover stanja i senke, nijanse za isticanje i pozadine.

Senke

Tamnije varijacije kreirane dodavanjem crne tvojoj osnovnoj boji.

Nijanse

Svetlije varijacije kreirane dodavanjem bele tvojoj osnovnoj boji.

Uobičajeni slučajevi upotrebe

  • • Stanja UI komponenti (hover, aktivno, onemogućeno)
  • • Stvaranje dubine sa senkama i isticanjima
  • • Izgradnja konzistentnih sistema boja

Savet za dizajn sistem

Ove varijacije čine osnovu kohezivne palete boja. Izvezi ih da bi održao konzistentnost u celom projektu.

Kombinacije boja

Svaka harmonija ima svoj raspoloženje. Koristi harmonije da osmisliš kombinacije boja koje dobro funkcionišu zajedno.

Kako koristiti

Klikni na bilo koju boju da kopiraš njen hex vrednost. Ove kombinacije su matematički dokazano da stvaraju vizuelnu harmoniju.

Zašto je važno

Harmonije boja stvaraju ravnotežu i izazivaju specifične emocije u tvojim dizajnima.

Komplement

Boja i njena suprotnost na točku boja, +180 stepeni nijanse. Visok kontrast.

Najbolje za: Dizajni sa visokim uticajem, CTA, logotipi

Podeljeni komplement

Boja i dve susedne njenom komplementu, +/-30 stepeni nijanse od vrednosti suprotne glavnoj boji. Smela kao direktni komplement, ali svestranija.

Najbolje za: Živopisni, ali uravnoteženi rasporedi

Triadna

Tri boje ravnomerno raspoređene duž točka boja, svaka 120 stepeni nijanse udaljena. Najbolje je da jedna boja dominira, a ostale se koriste kao akcenti.

Najbolje za: Razigrani, energični dizajni

Analogna

Tri boje iste luminance i zasićenosti sa nijansama koje su susedne na točku boja, 30 stepeni razdvojene. Glatki prelazi.

Najbolje za: Prirodom inspirisani, umirujući interfejsi

Monohromatska

Tri boje iste nijanse sa vrednostima luminance +/-50%. Suptilna i rafinirana.

Najbolje za: Minimalistički, sofisticirani dizajni

Tetradna

Dva seta komplementarnih boja, razdvojena za 60 stepeni nijanse.

Najbolje za: Bogate, raznovrsne šeme boja

Principi teorije boja

Ravnoteža

Koristi jednu dominantnu boju, podrži sa sekundarnom i akcentuj štedljivo.

Kontrast

Osiguraj dovoljan kontrast za čitljivost i pristupačnost.

Harmonija

Boje treba da rade zajedno kako bi stvorile jedinstveno vizuelno iskustvo.

Provera kontrasta boja

Testiraj kombinacije boja kako bi osigurao da ispunjavaju WCAG standarde pristupačnosti za čitljivost teksta.

Kontrast

1.00
common.contrastFail
Veoma loše
Mali tekst
common.contrastFail
Veliki tekst
common.contrastFail

WCAG standardi

AA:Minimalni odnos kontrasta od 4.5:1 za običan tekst i 3:1 za veliki tekst. Potrebno za većinu sajtova.
AAA:Poboljšani odnos kontrasta od 7:1 za običan tekst i 4.5:1 za veliki tekst. Preporučeno za optimalnu pristupačnost.
Nedovoljan kontrast za sve veličine teksta - ne ispunjava WCAG standarde.

Napredni proverivač kontrasta

Fino podešavanje sa klizačima, višestruki pregledi i više

Svi su genijalci. Ali ako sudite ribi po njenoj sposobnosti da se popne na drvo, živeće ceo život verujući da je glupa.

contrastChecker.quote1Author

Tehnički formati

Istraži napredne prikaze prostora boja i profesionalne modele boja korišćene u video produkciji, fotografiji, naučnim aplikacijama i sistemima za upravljanje bojama. Ovi tehnički formati pružaju precizne specifikacije boja za specijalizovane industrije i primene.

Praktični formati

Konvertuj boje u praktične formate za stvarne primene uključujući simulaciju štampe, LED displeje, terminalni izlaz i kodiranje podataka. Ovi formati ti pomažu da implementiraš boje na različitim medijima, platformama i fizičkim uređajima.

Analiza boja

Analiziraj svojstva boja sa naprednim metrikama uključujući spektralni sastav, čistoću boje, efekte metamerizma i perceptivne karakteristike. Ovi alati pružaju dubok uvid u ponašanje i izgled boja pod različitim uslovima gledanja.

Simulator slepila za boje

Proveri kako se boja percipira kod osoba sa različitim tipovima slepila za boje kako bi kreirao pristupačnije dizajne. Razumevanje percepcije boja pomaže da tvoj sadržaj bude dostupan svima.

Kreativni aspekti

Istraži umetničke i psihološke dimenzije boja uključujući sezonske asocijacije, emocionalni uticaj, prirodne pojave, istorijske pigmente i recepte za mešanje boja za kreativne primene.