Pretvorba boja
#ff69b4
Varijacije
Svrha ovog odjeljka je precizno proizvesti nijanse (dodana čista bijela) i sjene (dodana čista crna) tvoje odabrane boje u koracima od 10%.
Profesionalni savjet: Koristi sjene za hover stanja i sjene, nijanse za naglaske i pozadine.
Sjene
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 naglascima
- • Izgradnja konzistentnih sustava boja
Savjet za dizajn sustava
Ove varijacije čine temelj kohezivne palete boja. Izvezi ih kako bi održao konzistentnost u cijelom projektu.
Kombinacije boja
Svaka harmonija ima svoje raspoloženje. Koristi harmonije za osmišljavanje kombinacija boja koje dobro funkcioniraju zajedno.
Kako koristiti
Klikni na bilo koju boju da kopiraš njezinu 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 njezina suprotnost na kotaču boja, +180 stupnjeva nijanse. Visok kontrast.
Podijeljeni komplement
Boja i dvije susjedne njezinom komplementu, +/-30 stupnjeva nijanse od vrijednosti suprotne glavnoj boji. Odvažan kao izravni komplement, ali svestraniji.
Triadni
Tri boje ravnomjerno raspoređene na kotaču boja, svaka 120 stupnjeva nijanse udaljena. Najbolje je dopustiti jednoj boji da dominira, a ostale koristiti kao naglaske.
Analogni
Tri boje iste luminancije i zasićenosti s nijansama koje su susjedne na kotaču boja, 30 stupnjeva udaljene. Glatki prijelazi.
Monokromatski
Tri boje iste nijanse s vrijednostima luminancije +/-50%. Suptilno i profinjeno.
Tetradni
Dva seta komplementarnih boja, odvojena za 60 stupnjeva nijanse.
Principi teorije boja
Ravnoteža
Koristi jednu dominantnu boju, podrži s sekundarnom i naglasi rijetko.
Kontrast
Osiguraj dovoljan kontrast za čitljivost i pristupačnost.
Harmonija
Boje trebaju raditi zajedno kako bi stvorile ujednačeno vizualno iskustvo.
Provjera kontrasta boja
Testiraj kombinacije boja kako bi osigurao da zadovoljavaju WCAG standarde pristupačnosti za čitljivost teksta.
Boja teksta
Boja pozadine
Kontrast
WCAG standardi
Napredni provjerivač kontrasta
Precizno podešavanje s klizačima, višestruki pregledi i više
Svatko je genij. Ali ako sudiš ribu po njezinoj sposobnosti da se penje na drvo, cijeli će život vjerovati da je glupa.