Konverzija boja
#ff69b4
Varijacije
Svrha ovog dijela je precizno proizvesti nijanse (dodana čista bijela) i tonove (dodana čista crna) tvoje odabrane boje u koracima od 10%.
Pro savjet: Koristi tonove za hover stanja i sjene, nijanse za isticanje i pozadine.
Tonovi
Tamnije varijacije stvorene dodavanjem crne tvojoj osnovnoj boji.
Nijanse
Svjetlije varijacije stvorene dodavanjem bijele tvojoj osnovnoj boji.
Uobičajeni slučajevi korištenja
- • Stanja UI komponenti (hover, aktivno, onemogućeno)
- • Stvaranje dubine sa sjenama i isticanjima
- • Izgradnja konzistentnih sistema boja
Savjet za dizajn sistem
Ove varijacije čine osnovu kohezivne palete boja. Izvezi ih kako bi održao konzistentnost kroz cijeli projekat.
Kombinacije boja
Svaka harmonija ima svoj ugođaj. Koristi harmonije za osmišljavanje kombinacija boja koje dobro funkcioniraju zajedno.
Kako koristiti
Klikni na bilo koju boju da kopiraš njen hex vrijednost. Ove kombinacije su matematički dokazano da stvaraju vizualnu harmoniju.
Zašto je važno
Harmonije boja stvaraju ravnotežu i izazivaju specifične emocije u tvojim dizajnima.
Komplement
Boja i njena suprotna na točku boja, +180 stepeni nijanse. Visok kontrast.
Podijeljeni komplement
Boja i dvije susjedne njenom komplementu, +/-30 stepeni nijanse od vrijednosti suprotne glavnoj boji. Smjela kao direktni komplement, ali svestranija.
Triadni
Tri boje ravnomjerno raspoređene na točku boja, svaka 120 stepeni nijanse udaljena. Najbolje je dopustiti jednoj boji da dominira, a druge koristiti kao akcente.
Analogni
Tri boje iste luminancije i zasićenja s nijansama koje su susjedne na točku boja, 30 stepeni udaljene. Glatki prijelazi.
Monohromatski
Tri boje iste nijanse s vrijednostima luminancije +/-50%. Suptilno i profinjeno.
Tetradni
Dva seta komplementarnih boja, odvojena za 60 stepeni nijanse.
Principi teorije boja
Ravnoteža
Koristi jednu dominantnu boju, podrži sa sekundarnom i akcentiraj štedljivo.
Kontrast
Osiguraj dovoljan kontrast za čitljivost i pristupačnost.
Harmonija
Boje trebaju raditi zajedno kako bi stvorile jedinstveno vizualno iskustvo.
Provjera kontrasta boja
Testiraj kombinacije boja kako bi osigurao da ispunjavaju WCAG standarde pristupačnosti za čitljivost teksta.
Boja teksta
Boja pozadine
Kontrast
WCAG standardi
Napredni provjerivač kontrasta
Precizno podešavanje sa klizačima, višestruki pregledi i više
Svi su genijalci. Ali ako sudiš ribi po njenoj sposobnosti da se popne na drvo, cijeli život će vjerovati da je glupa.