Värvi määramine rgb kaudu CSS-is

Õpiku alguses, kui me õppisime värve, rääkisin ma teile, et värvi saab määrata kas inglise keelse sõnaga, läbi rgb või läbi #. Viimased kaks vormingut võimaldavad saada mis tahes tooniga värvi. Vaatame läbi, kuidas need vormingud täpselt töötavad.

Et mõista neid viise, peame kõigepealt selgeks saama, kuidas saadakse vajalik värv arvuti ekraanil.

Tegelikult ei saa ekraani üksik punkt (piksel) hiilgata kõigi vajalike värvidega, kuna see oleks tehniliselt väga keeruline. Iga ekraani punkt saab hiilgata ainult kolme värviga: punane, roheline ja helesinine. Kuid samaaegselt ja erinevates proportsioonides.

Kombineerides neid värve saame mis tahes vajaliku värvi, sarnaselt sellele, kuidas seda teevad kunstnikud värvidega: segades mitu värvi saavad nad veel ühe uue.

Värvide segamiseks CSS-is tuleb omaduse väärtuseks määrata võtmesõna rgb, mille järel loetled koma abil need proportsioonid, milles neid kolme põhivärvi võtta. Värvid ise võivad muutuda 0 kuni 255. Kusjuures null - see on värvi puudumine, ja 255 - see on puhas värv (näiteks puhas punane).

Tähed rgb ise lahti kirjutatuna on red, green, blue.

Vaatame näidete varal.

Näide

Segame puhast punast ja puhast helesinist värvi. Selleks paneme esimeseks väärtuseks 255, teiseks 0, ja kolmandaks - 255. Meil saab lilla värv:

html<p>
  tekst
</p>

cssp {
  color: rgb(255, 0, 255);
}

Результат:

Näide

Paneme nüüd esimese väärtuse 255, ja kõik ülejäänud - nullidesse. Tulemuseks saame puhast punast värvi:

html<p>
  tekst
</p>

cssp {
  color: rgb(255, 0, 0);
}

Результат:

Näide

Nii saame puhast rohelist värvi:

html<p>
  tekst
</p>

cssp {
  color: rgb(0, 255, 0);
}

Результат:

Näide

Ja kui rohelise jaoks panna mitte 255, vaid 100, siis saab osaliselt roheline:

html<p>
  tekst
</p>

cssp {
  color: rgb(0, 100, 0);
}

Результат:

Näide

Segame kõik kolm värvi suvalistes proportsioonides. Vaadake, mis sai:

html<p>
  tekst
</p>

cssp {
  color: rgb(200, 100, 125);
}

Результат:

Näide

Kui panna kõik väärtused 255, siis saab puhast valget värvi:

cssp {
  color: rgb(255, 255, 255);
}

Näide

Kui panna kõik väärtused 0, siis saab puhast musta värvi:

cssp {
  color: rgb(0, 0, 0);
}

Praktilised ülesanded