4 viisi värvide määratlemiseks CSS-is

Võtmed kaasavõtmiseks

• Värvinimede kasutamine: CSS pakub lihtsaks ja algajasõbralikuks värvivalikuks 145 värvinime, kuid valikud on piiratud ja ei pruugi vastata täpsetele disainivajadustele.
• Kuueteistkümnendsüsteemi värvikoodid: Kuueteistkümnendkoodid pakuvad laia valikut värvivalikuid ja täpset kohandamist, kuigi nende kasutamine ja meeldejätmine võib olla vähem intuitiivne.
• RGB ja RGBA värviväärtused: RGB võimaldab täpset värvijuhtimist arvväärtustega, RGBA aga lisab läbipaistvust. Oluline on tagada juurdepääsetavad värvikombinatsioonid.

Värvid on üks kõige sagedamini kasutatavaid CSS-i atribuute, mis mängivad olulist rolli veebisaidi visuaalse identiteedi, meeleolu ja kasutajakogemuse kujundamisel. CSS pakub värvide kasutamiseks mitmesuguseid valikuid, millest igaüks on kohandatud konkreetsete disainivajaduste ja eelistustega.

Kuigi värvimääratluse tähtsust on lihtne kahe silma vahele jätta, võivad teie valikud oluliselt mõjutada teie veebisaidi välimust ja tunnetust. Erinevate meetodite erinevuste ning nende praktilise rakendamise ja kombineerimise uurimine suurendab teie võimet luua visuaalselt atraktiivseid veebisaite.

1. Värvinimede kasutamine

CSS pakub mugavat viisi värvide määratlemiseks nimede abil ja saadaval on 145 valikut. Need värvinimed ulatuvad lihtsast "punasest", "rohelisest" ja "sinisest" kuni spetsiifilisemate toonideni, nagu "korall" või "lavendli".

Nimega värvide kasutamine on lihtne: valite värvinime, näiteks "punane" ja kasutate seda CSS-i atribuudis, mis toetab värviväärtusi. Sellised omadused hõlmavad ilmselget värvi ja taustavärv, aga ka piirivärv, piirjoon-värvja tekst-vari, teiste hulgas.

Värvinimed on käepärased, kui vajate prototüüpimiseks ajutist värvi või kui soovite, et kood oleks hõlpsasti loetav. Siin on süntaks:

color_property: color_name;

Sel juhul lihtsalt asendage värvi_nimi konkreetse värviga, mida soovite kasutada. Näiteks kui soovite teksti määrata värvi lõikest kuni punane, kirjutage:

p {
color: red;
}

See annab teie lõikudele punase tekstivärvi:

Plussid: neid on teie CSS-koodis lihtne lugeda ja mõista. Need on algajasõbralikud, töötavad hästi kõigis brauserites ja on mugavad kiirete disainiideede jaoks.

Miinused: neil on piiratud valikud ja need ei pruugi pakkuda teile vajalikke täpseid toone, piirates disaini loovust. Lisaks ei pruugi need alati vastata rangetele juurdepääsetavuse nõuetele ja vanemate süsteemide tugi võib erineda.

2. Kuueteistkümnendsüsteemi värvikoodid

Kuueteistkümnendsüsteemis kasutatavad värvikoodid, mida sageli nimetatakse kuueteistkümnendkoodideks, on kõige levinumad meetodid värvide määramiseks veebidisainis. Need koodid koosnevad kuuest tähemärgist koosnevatest numbrite ja tähtede kombinatsioonidest (0-9, A-F), mis tähistavad punase, rohelise ja sinise (RGB) komponentide kombinatsiooni värviga.

Kuigi neid on lihtne kasutada, võib nende tööpõhimõtete mõistmine olla keeruline. Sa võid võtta sügav sukeldumine kuueteistkümnendkoodidesse paremini mõista. Siin on põhinäide, kuidas saate CSS-is kasutada kuueteistkümnendkoode.

color: #RRGGBB;

Selles vormingus tähistavad RR, GG ja BB vastavalt punast, rohelist ja sinist komponenti. Iga komponent võib olla vahemikus 00 (intensiivsus puudub) kuni FF (maksimaalne intensiivsus). Näiteks kui soovite määrata veebisaidi päise taustavärviks teatud sinise tooni, saate kasutada sellist kuueteistkümnendkoodi:

header {
background-color: #336699;
}

See annab sügavsinise värvi:

​​​​​

Võite kasutada ka stenogrammi, kui kõik kolm komponenti kordavad sama märki kaks korda. Ülaltoodud näite saate kirjutada järgmiselt:

header {
background-color: #369;
}

Plussid: Kuueteistkümnendsüsteemis kasutatavad värvikoodid pakuvad laia valikut värvivalikuid, mis võimaldavad teil luua üksikasjalikke ja kohandatud toone. Need pakuvad sujuvat kontrolli värvivalikute üle, muutes need ideaalseks keerukate disaininõuete jaoks.

Miinused: Kuigi kuueteistkümnendkoodid on võimsad, võivad need olla vähem intuitiivsed kui nimega värvid. Samuti võib tekkida väljakutse konkreetsete värviväärtuste meeldejätmisel. Õnneks tööriistad värvide kuueteistkümnendkoodide leidmiseks on saadaval, muutes protsessi paremini juhitavaks.

3. RGB ja RGBA värviväärtused

Nagu kuueteistkümnendkoodid, võimaldab see vorming määrata värve nende punaste, roheliste ja siniste komponentide järgi. Seekord saab aga kasutada sõbralikumaid täisarve.

RGB värvi väärtused

RGB värviväärtused on CSS-is värvide määratlemiseks teine ​​kõige sagedamini kasutatav meetod. "RGB" tähistab punast, rohelist ja sinist, väljendatuna CSS-funktsioonina, millele järgnevad sulgud. Sulgudes saate määrata igale värvikanalile väärtused vahemikus 0 kuni 255. See võimaldab teil kontrollida punase, rohelise ja sinise intensiivsust soovitud värvitoonis.

Siin on süntaks:

rgb(red_value, green_value, blue_value);

Asenda punane_väärtus, roheline_väärtusja sinine_väärtus nende vastavate arvväärtustega. Näiteks saate saavutada valge, musta ja punase värvi, nagu on näidatud sellel pildil:

Kui seate kõik kolm värvikanalit (punane, roheline ja sinine) maksimaalsele väärtusele 255, annab see iga kanali jaoks suurima intensiivsuse, luues valge värvi:

.white-box {
 color: rgb(255, 255, 255);
}

Kui määrate kõigile kolmele värvikanalile minimaalse väärtuse 0, näitab see värvi puudumist igas kanalis, mille tulemuseks on must.

.black-box {
color: rgb(0, 0, 0);
}

Punase kanali seadistamine maksimaalsele väärtusele 255, hoides samal ajal teiste kanalite minimaalse väärtuse 0, annab punase värvi:

.red-box {
color: rgb(255, 0, 0); 
}

RGBA värviväärtused

RGBA toimib samamoodi nagu RGB, ainsaks erinevuseks on alfa-väärtuse kaasamine. RGBA täht "A" tähistab alfat, mis määrab valitud värvi läbipaistvuse või läbipaistmatuse taseme. Väärtus 0 tähistab täielikku läbipaistvust, muutes värvi täielikult nähtamatuks, samas kui väärtus 1 tähistab täielikku läbipaistmatust, muutes värvi täielikult nähtavaks.

RGBA on eriti kasulik, kui soovite luua erineva läbipaistvuse tasemega elemente, näiteks poolläbipaistvat tausta või tuhmunud teksti. Täielik süntaks on:

color: rgba(red_value, green_value, blue_value, alpha_value);

Siin punane_väärtus, roheline_väärtusja sinine_väärtus esindavad värvikanaleid nagu RGB-s ja alfa_väärtus määrab läbipaistvuse taseme.

div {
background-color: rgba(0, 128, 0, 0.5);
}

Selles näites määrab alfa väärtus 0,5 rohelisele värvile 50% läbipaistvuse, võimaldades selle all olevat sisu läbi näha:

Plussid: RGB ja RGBA võimaldavad teil värve täpselt juhtida, hõlbustades täpsete toonide valimist ja visuaalselt atraktiivsete kujunduste loomist. Need ühilduvad erinevate veebibrauseritega, tagades teie valitud värvide ühtluse.

Miinused: väljakutse seisneb juurdepääsetavate värvikombinatsioonide tagamises. Eriti oluline on pöörata tähelepanu kontrastsussuhetele, peamiselt RGBA läbipaistvusega töötamisel. WCAG juhised võivad aidata tagate, et teie disain on juurdepääsetav.

4. HSL ja HSLA värviväärtused

HSL – lühend sõnadest Hue, Saturation ja Lightness – on veel üks CSS-i funktsioon, mis määrab värve. Sarnaselt RGB-ga kasutab HSL värvide esitamiseks arvväärtusi, kuid teeb seda erinevalt. Võib-olla olete tuttav HSL-väärtused disainirakenduste kasutajaliidese komponentidest ja mujal.

Värvitoon: see tähistab värvi ennast, kasutades värvirattal olevaid kraade vahemikus 0 kuni 360. Kujutage ette, et valite ringil punkti, kus iga kraad vastab erinevale värvile. Näiteks 0 ja 360 kraadi punase jaoks, 120 kraadi rohelise ja 240 kraadi sinise jaoks.

Küllastus: küllastus määrab värvi erksuse või intensiivsuse. See määrab värvi seose halliga, kusjuures 0% on täielikult halltoonid (küllastumata) ja 100% on täielikult küllastunud (ergav ja puhas).

Kergus: Heledus näitab, kui hele või tume värv paistab. See on seotud värvi positsiooniga spektris musta (0%) ja valge (100%) vahel. Väärtus 50% tähistab normaalset värvi, samas kui väärtused alla 50% muudavad värvi tumedamaks ja väärtused üle 50% muudavad seda heledamaks.

Lisaks HSL-ile on olemas HSLA, kus "A" tähistab "alfa". See sarnaneb RGBA tähega "A" ja tähistab läbipaistvust.

Siin on süntaks:

color: hsl(hue_value, saturation_percentage, lightness_percentage);

Seda süntaksit kasutades asendage tooni_väärtus, küllastusprotsentja kerguse_protsent iga komponendi jaoks soovitud konkreetsete väärtustega. Näiteks:

div {
background-color: hsl(120, 100%, 50%);
}

Selles näites on a taustavärv div element seatakse HSL-väärtuste abil elavaks roheliseks. 120 tähistab tooni (rohelist), 100% on täieliku küllastuse jaoks ja 50% seab heleduse tasakaalustatud tasemele.

Plussid: HSL ja HSLA pakuvad CSS-i kohandatud atribuute kasutades mitmekülgseid värviarvutusi. Need ühilduvad suurel määral kaasaegsete brauseritega ja võimaldavad hõlpsalt reguleerida värvide heledust.

Miinused: HSL-i õppimine hõlmab värviteaduse mõistmine, nagu toonid ja küllastused, mis võivad olla keerulisemad kui tuttavad RGB-värvid.

CSS-värvide jõu omaksvõtmine

Saate kontrollida rohkem meetodeid ja samal ajal kui uurite erinevaid värvide määratlemise vorminguid CSS-is pidage meeles, et teil on õigus kujundada oma veebisaidi välimust, meeleolu ja kasutuskogemust.

Teie valitud värvivormingu – olgu selleks lihtsad värvinimed, kuueteistkümnendkoodid, RGB või HSL – võib mõjutada seda, kuidas teie vaatajaskond teie saiti tajub. Seega katsetage, õppige ja leidke värvimääratlused, mis sobivad kõige paremini teie disainieesmärkidega.