4 veidi, kā definēt krāsas CSS

Key Takeaways

• Krāsu nosaukumu izmantošana: CSS nodrošina 145 krāsu nosaukumus vienkāršai un iesācējiem draudzīgai krāsu izvēlei, taču iespējas ir ierobežotas un var neatbilst precīzām dizaina vajadzībām.
• Heksadecimālie krāsu kodi: Hex kodi piedāvā plašu krāsu opciju klāstu un precīzu pielāgošanu, lai gan to lietošana un atcerēšanās var būt mazāk intuitīva.
• RGB un RGBA krāsu vērtības: RGB nodrošina precīzu krāsu kontroli ar skaitliskām vērtībām, savukārt RGBA palielina caurspīdīgumu. Ir svarīgi nodrošināt pieejamas krāsu kombinācijas.

Krāsas ir viens no visbiežāk izmantotajiem CSS atribūtiem, kuriem ir būtiska nozīme vietnes vizuālās identitātes, noskaņojuma un lietotāja pieredzes veidošanā. CSS piedāvā virkni krāsu izmantošanas iespēju, katra pielāgota konkrētām dizaina vajadzībām un vēlmēm.

Lai gan ir viegli neievērot krāsu definīcijas nozīmi, jūsu izvēle var būtiski ietekmēt jūsu vietnes izskatu un darbību. Izpētot dažādu metožu atšķirības un to praktisko pielietošanu un apvienošanu, jūs uzlabosiet spēju izveidot vizuāli pievilcīgas tīmekļa vietnes.

1. Krāsu nosaukumu izmantošana

CSS nodrošina ērtu veidu, kā definēt krāsas, izmantojot nosaukumus, un ir pieejamas 145 opcijas. Šie krāsu nosaukumi svārstās no vienkāršas “sarkanas”, “zaļas” un “zilas” līdz konkrētākiem toņiem, piemēram, “koraļļi” vai “lavanda”.

Nosaukto krāsu izmantošana ir vienkārša: jūs atlasāt krāsas nosaukumu, piemēram, “sarkans”, un izmantojat to CSS rekvizītā, kas atbalsta krāsu vērtības. Tādas īpašības ietver acīmredzamo krāsa un fona krāsa, bet arī apmales krāsa, kontūra-krāsa, un teksts-ēna, starp citiem.

Krāsu nosaukumi ir noderīgi, ja prototipēšanai nepieciešama pagaidu krāsa vai vēlaties, lai kods būtu viegli lasāms. Lūk, sintakse:

color_property: color_name;

Šajā gadījumā vienkārši nomainiet krāsas_nosaukums ar konkrēto krāsu, kuru vēlaties izmantot. Piemēram, ja vēlaties iestatīt tekstu krāsa rindkopas uz sarkans, rakstiet:

p {
color: red;
}

Tas jūsu rindkopām piešķirs sarkanu teksta krāsu:

Pros: tos ir viegli lasīt un saprast jūsu CSS kodā. Tie ir piemēroti iesācējiem, labi darbojas visās pārlūkprogrammās un ir ērti ātrai dizaina ideju radīšanai.

Mīnusi: tiem ir ierobežotas iespējas, un tie var nepiedāvāt precīzus toņus, kas jums nepieciešami, ierobežojot dizaina radošumu. Turklāt tie ne vienmēr atbilst stingrām pieejamības prasībām, un atbalsts vecākām sistēmām var atšķirties.

2. Heksadecimālie krāsu kodi

Heksadecimālie krāsu kodi, ko bieži dēvē par “heksadecimālajiem kodiem”, ir visizplatītākās krāsu norādīšanas metodes tīmekļa dizainā. Šie kodi sastāv no sešu rakstzīmju ciparu un burtu kombinācijām (0-9, A-F), kas attēlo sarkano, zaļo un zilo (RGB) komponentu kombināciju krāsā.

Lai gan tos ir viegli lietot, saprast, kā tie darbojas, var būt grūti. Tu vari ņemt dziļi iedziļināties hex kodos lai labāk saprastu. Šeit ir pamata piemērs tam, kā CSS var izmantot hex kodus:

color: #RRGGBB;

Šajā formātā RR, GG un BB apzīmē attiecīgi sarkano, zaļo un zilo komponentu. Katrs komponents var svārstīties no 00 (bez intensitātes) līdz FF (maksimālā intensitāte). Piemēram, ja vēlaties iestatīt vietnes galvenes fona krāsu uz noteiktu zilu toni, varat izmantot heksadecimālo kodu, piemēram:

header {
background-color: #336699;
}

Tas iegūs dziļi zilu krāsu:

​​​​​

Varat arī izmantot saīsinājumu, ja katrs no trim komponentiem divreiz atkārto vienu un to pašu rakstzīmi. Iepriekš minēto piemēru varat rakstīt šādi:

header {
background-color: #369;
}

Pros: Heksadecimālie krāsu kodi nodrošina plašu krāsu opciju klāstu, ļaujot ģenerēt detalizētus un pielāgotus toņus. Tie piedāvā vienmērīgu krāsu izvēles kontroli, padarot tos ideāli piemērotus sarežģītām dizaina prasībām.

Mīnusi: Lai gan hex kodi ir spēcīgi, tie var būt mazāk intuitīvi nekā nosauktās krāsas. Varat arī saskarties ar izaicinājumu atcerēties konkrētas krāsu vērtības. Par laimi, rīki krāsu hex kodu atrašanai ir pieejami, padarot procesu vieglāk pārvaldāmu.

3. RGB un RGBA krāsu vērtības

Tāpat kā heksadecimālie kodi, šis formāts ļauj norādīt krāsas pēc to sarkanā, zaļā un zilā komponenta. Tomēr šoreiz varat izmantot draudzīgākus veselus skaitļus.

RGB krāsu vērtības

RGB krāsu vērtības ir otrā visbiežāk izmantotā metode krāsu noteikšanai CSS. “RGB” apzīmē sarkanu, zaļu un zilu krāsu, kas izteikta kā CSS funkcija ar iekavām aiz tās. Iekavās katram krāsu kanālam piešķirat vērtības, sākot no 0 līdz 255. Tas ļauj kontrolēt sarkanās, zaļās un zilās krāsas intensitāti vēlamajā krāsā.

Lūk, sintakse:

rgb(red_value, green_value, blue_value);

Aizvietot sarkanā_vērtība, zaļā_vērtība, un zilā_vērtība ar to attiecīgajām skaitliskajām vērtībām. Piemēram, varat iegūt baltas, melnas un sarkanas krāsas, piemēram, šajā attēlā redzamās:

Iestatot visus trīs krāsu kanālus (sarkano, zaļo un zilo) uz maksimālo vērtību 255, tiek iegūta visaugstākā intensitāte katram kanālam, radot baltu krāsu:

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

Ja iestatāt visiem trim krāsu kanāliem to minimālo vērtību 0, tas norāda, ka katrā kanālā nav krāsas, kā rezultātā tiek iegūta melna krāsa.

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

Sarkanajam kanālam iestatot maksimālo vērtību 255, vienlaikus saglabājot pārējos kanālus to minimālajā vērtībā 0, tiek iegūta sarkanā krāsa:

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

RGBA krāsu vērtības

RGBA darbojas tāpat kā RGB, vienīgā atšķirība ir alfa vērtības iekļaušana. “A” RGBA apzīmē alfa, kas nosaka izvēlētās krāsas caurspīdīguma vai necaurredzamības līmeni. Vērtība 0 apzīmē pilnīgu caurspīdīgumu, padarot krāsu pilnībā neredzamu, savukārt vērtība 1 apzīmē pilnīgu necaurredzamību, padarot krāsu pilnībā redzamu.

RGBA ir īpaši noderīga, ja vēlaties izveidot elementus ar dažādu caurspīdīguma līmeni, piemēram, caurspīdīgu fonu vai izbalējušu tekstu. Pilna sintakse ir:

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

Šeit, sarkanā_vērtība, zaļā_vērtība, un zilā_vērtība attēlo krāsu kanālus kā RGB, un alfa_vērtība nosaka pārredzamības līmeni.

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

Šajā piemērā alfa vērtība 0,5 piešķir zaļajai krāsai 50% caurspīdīguma, ļaujot zem tās esošajam saturam parādīties:

Pros: RGB un RGBA ļauj precīzi kontrolēt krāsas, atvieglojot precīzu toņu izvēli un vizuāli pievilcīgu dizainu. Tie ir saderīgi ar dažādām tīmekļa pārlūkprogrammām, nodrošinot jūsu izvēlēto krāsu konsekventu izskatu.

Mīnusi: izaicinājums ir nodrošināt pieejamas krāsu kombinācijas. Ir ļoti svarīgi pievērst uzmanību kontrasta attiecībai, galvenokārt strādājot ar caurspīdīgumu RGBA. WCAG vadlīnijas var palīdzēt jūs nodrošināsiet, ka jūsu dizains ir pieejams.

4. HSL un HSLA krāsu vērtības

HSL — saīsinājums no Hue, Saturation un Lightness — ir vēl viena CSS funkcija, kas nosaka krāsas. Līdzīgi kā RGB, HSL izmanto skaitliskās vērtības, lai attēlotu krāsas, taču tas tiek darīts atšķirīgi. Jums var būt pazīstami ar HSL vērtības no UI komponentiem dizaina lietotnēs un citur.

Nokrāsa: tas attēlo pašu krāsu, izmantojot grādus krāsu aplī, sākot no 0 līdz 360. Iedomājieties to kā punkta atlasi uz apļa, kur katrs grāds atbilst citai krāsai. Piemēram, 0 un 360 grādi sarkanam, 120 grādi zaļam un 240 grādi zilam.

Piesātinājums: Piesātinājums nosaka krāsas spilgtumu vai intensitāti. Tas nosaka krāsas saistību ar pelēko krāsu, kur 0% ir pilnībā pelēktoņu (nepiesātināti) un 100% ir pilnībā piesātināti (dzīvi un tīri).

Vieglums: gaišums norāda, cik spilgta vai tumša ir krāsa. Tas ir saistīts ar krāsas pozīciju spektrā starp melnu (0%) un baltu (100%). Vērtība 50% apzīmē parasto krāsu, savukārt vērtības, kas ir mazākas par 50%, krāsu padara tumšāku, un vērtības, kas pārsniedz 50%, to padara gaišāku.

Papildus HSL ir arī HSLA, kur “A” apzīmē “alfa”. Tas ir līdzīgs “A” RGBA un nozīmē caurspīdīgumu.

Lūk, sintakse:

color: hsl(hue_value, saturation_percentage, lightness_percentage);

Izmantojot šo sintaksi, aizstājiet hue_value, piesātinājuma_procents, un viegluma_procents ar konkrētajām vērtībām, kuras vēlaties katram komponentam. Piemēram:

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

Šajā piemērā a fona krāsa div elements ir iestatīts uz koši zaļu, izmantojot HSL vērtības. 120 apzīmē nokrāsu (zaļu), 100% ir pilnīgam piesātinājumam, un 50% nosaka gaišumu līdzsvarotā līmenī.

Pros: HSL un HSLA piedāvā daudzpusīgus krāsu aprēķinus, izmantojot CSS pielāgotos rekvizītus. Tie ir ļoti saderīgi ar mūsdienu pārlūkprogrammām un ļauj viegli pielāgot krāsu gaišumu.

Mīnusi: HSL apguve ietver izpratne par krāsu zinātni, piemēram, nokrāsas un piesātinājumi, kas var būt grūtāk nekā pazīstamās RGB krāsas.

CSS krāsu jaudas izmantošana

Ir vairākas metodes, kuras varat pārbaudīt, un, izpētot dažādus krāsu noteikšanas formātus izmantojot CSS, ņemiet vērā, ka jums ir tiesības veidot savas vietnes izskatu, noskaņu un lietotāja pieredzi.

Jūsu izvēlētais krāsu formāts — neatkarīgi no tā, vai tie ir vienkārši krāsu nosaukumi, heksadecimālie kodi, RGB vai HSL — var ietekmēt to, kā jūsu auditorija uztver jūsu vietni. Tāpēc eksperimentējiet, mācieties un atrodiet krāsu definīcijas, kas vislabāk atbilst jūsu dizaina mērķiem.