Spalvų nurodymas naudojant rgb CSS

Pačioje vadovėlio pradžioje, kai mes studijavome spalvas, aš jums pasakiau, kad spalvą galima nurodyti arba angliška žodžiu, arba per rgb, arba per #. Paskutieji du formatai leidžia gauti bet kokio atspalvio spalvą. Pažiūrėkime, kaip tiksliai veikia šie formatai.

Kad suprastume šiuos būdus, pirmiausia mums reikia suprasti, kaip ekrane susidaro reikiama spalva.

Tiesą sakant, atskiras ekrano taškas (pikselis) negali švytėti visomis spalvomis, kurios reikalingos, nes techniškai tai būtų labai sudėtinga. Kiekvienas ekrano taškas gali švytėti tik trimis spalvomis: raudona, žalia ir žydra. Bet tuo pačiu metu ir skirtingomis proporcijomis.

Kombinuodami šias spalvas mes galime gauti bet kokią mums reikalingą spalvą panašiai kaip tai daro dailininkai su dažais: sumaišydami keletą spalvų jie gauna dar vieną naują.

Spalvų maišymui CSS reikia savybės reikšme nurodyti raktažodį rgb, po kurio per kablelį išvardinti nurodančius, kokiomis proporcijomis reikia paimti šias tris pagrindines spalvas. Pačios spalvos gali keistis nuo 0 iki 255. Be to, nulis - tai spalvos nebuvimas, o 255 - tai gryna spalva (pavyzdžiui, gryna raudona).

Pačios raidės rgb iššifruojamos kaip red, green, blue.

Pažiūrėkime pavyzdžiais.

Pavyzdys

Sumaišykime grynai raudoną ir grynai žydrą spalvą. Tam pirmą reikšmę nustatome į 255, antrą į 0, o trečią - į 255. Mes gausime violetinę spalvą:

html<p>
  tekstas
</p>

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

Результат:

Pavyzdys

Dabar nustatykime pirmą reikšmę į 255, o visas likusias - į nulius. Rezultate gausime grynai raudoną spalvą:

html<p>
  tekstas
</p>

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

Результат:

Pavyzdys

Taip gausime grynai žalią spalvą:

html<p>
  tekstas
</p>

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

Результат:

Pavyzdys

O jei žaliai nustatysime ne 255, o 100, tai gausis dalinė žalia spalva:

html<p>
  tekstas
</p>

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

Результат:

Pavyzdys

Sumaišykime visas tris spalvas savavališkose proporcijose. Pažiūrėkite, kas gavosi:

html<p>
  tekstas
</p>

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

Результат:

Pavyzdys

Jei nustatysime visas reikšmes į 255, Tai gausis grynai balta spalva:

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

Pavyzdys

Jei nustatysime visas reikšmes į 0, tai gausis grynai juoda spalva:

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

Praktinės užduotys