Lastnosti barv CSS. Barvne kode

Eno od orodij za spreminjanje slogov spletnih strani je barva CSS. Ta nastavitev lahko spremenite na več načinov. Vsakdo ima tako prednosti kot slabosti.

Naslov

Lastnost barve določa barvo elementa. V CSS je bilo vključenih 145 naslovov CSS. Med njimi so preproste (na primer črna, modra) in kompleksne (na primer, grimizna, zakonska).
Ker je celoten seznam shranjen, se imena v slogovni listi redko uporabljajo.

RGB

Večina televizorjev, pametnih telefonov, monitorjev deluje z barvnim modelom RGB. Vsak odtenek lahko nastavite s kombinacijo osnovnih barv, ki vključujejo rdečo, zeleno in modro barvo. Ta pristop se uporablja tako v napravah kot tudi v CSS. Barve glavne kompozicije prevzamejo vrednosti od 0 do 255. Število možnih odtenkov je eno od 16777216.


Ker je RGB model neposredno povezan s fizikalnimi zakonitostmi barvnega upodabljanja, je črna v njej podana kot rgb (000), bela - rgb (255255255). Sistem RGBA je popolnoma podoben RGB, le z dodatkom alfa kanala. To vpliva na prosojnost, ki združuje odtenek z osnovno ploščo. V tem primeru se videz elementa razlikuje glede na "podlago".

HSL

Za razumevanje delovanja sistema HLS morate zagotoviti barvno kolo. V njenem središču je rdeča, nato (v smeri urinega kazalca) vse druge odtenke mavrice. Za definiranje CSS barv s sistemom HLS morate nastaviti tri parametre:
  • senco (v stopinjah) - smer iz središča kroga;
  • Nasičenost (v odstotkih),koliko barve je potrebno;
  • svetlost (v odstotkih).
  • Na primer, vijolična se lahko opredeli na naslednji način: hsl (315100%, 45%). HSL je najbolj primeren za poskuse. Z učenjem barvnega kolesa lahko približno prikažete barvo določenega elementa, ko gledate slogovno datoteko. # Hsla-color hsla - isti HLS, samo z alfa kanalom: hsl (0100%, 5006) - rdeča, transparentna malo več kot polovica.


    HEX

    V CSS se barva lahko določi s šestnajstiško predstavitvijo, na primer oranžna je nastavljena na # FF4500. Za boljše razumevanje, kaj je heksadecimalna reprezentacija, je globlje upoštevanje decimalnega sistema. Vsebuje številke od 0 do 9. Ko je številka zahtevana, se številki doda še ena, nato pa 10, potem je 100 itd. V šestnajstiškem sistemu je vse popolnoma enako, po 9 pa gre za A in B in F - enako kot 15 v decimalnem sistemu. Nato se doda ena števka in rezultat je enak 10 v našem običajnem računu.
    Tako kot v RGB, odtenki v HEX-u nakazujejo, kateri deli uporabljajo glavne barve. V tem primeru niso ločeni z vejicami (barva: # FFD500). Vsaka dva znaka določata število rdeče, zelene in modre. Sistem HEX se praviloma ne uporablja med poskusi, saj ni mogoče izbrati zahtevanih CSS barv. Tabela lahko pomaga v tem primeru, vendar, če ste nenehno preveriti z njo, bo delo zamudo. Šestnajstiški prikaz je najbolj primeren pri prenosu predloge iz grafičnega urejevalnika. To je veliko lažje kopirati iz njegaena števka kot ena v tri.

    Kaj je najboljši način?

    O tem ni ničesar konkretnega. Če elementi vmesnika zahtevajo preglednost, izberite med RGBA in # hsla-color hsla. Če želite eksperimentirati v brskalniku, bo barvno kolo HLS najbolj primerno. Če uporabljate paleto ali prenašate zasnovo Photoshopa, bi morali raje imeti šestnajstiške CSS barve.

    Sorodne publikacije