ფერის მითითება rgb-ის მეშვეობით CSS-ში

ძალიან დასაწყისში, როდესაც ჩვენ ვსწავლობდით ფერებს, მე გითხარით, რომ ფერის მითითება შესაძლებელია ან ინგლისური სიტყვით, ან rgb-ის მეშვეობით, ან #-ის მეშვეობით. ბოლო ორი ფორმატი საშუალებას გაძლევთ მიიღოთ ნებისმიერი ჩრდილის ფერი. მოდით გავერკვიეთ, თუ როგორ მუშაობს ეს ფორმატები.

ამ მეთოდების გასაგებად, თავიდან ჩვენ საჭიროა გავერკვიეთ, თუ როგორ მიიღება სასურველი ფერი კომპიუტერის ეკრანზე.

სინამდვილეში ეკრანის ცალკე წერტილი (პიქსელი) არ შეიძლება ანათებდეს ყველა იმ ფერით, რაც საჭიროა, ვინაიდან ეს ტექნიკურად ძალიან რთული იქნებოდა. ეკრანის ყოველი წერტილი მხოლოდ სამი ფერით შეიძლება ანათებდეს: წითელი, მწვანე და ცისფერი. მაგრამ ერთდროულად და სხვადასხვა პროპორციით.

ამ ფერების კომბინირებით ჩვენ შეგვიძლია მივიღოთ ნებისმიერი საჭირო ფერი, ისევე როგორც ეს აკეთებენ მხატვრები საღებავებით: რამდენიმე ფერის აურევით ისინი იღებენ კიდევ ერთ ახალ ფერს.

ფერების შერევისთვის CSS-ში საჭიროა თვისების მნიშვნელობად მიუთითოთ საკვანძო სიტყვა rgb, რის შემდეგაც მძიმით გამოყოფით ჩამოთვალოთ სამი ძირითადი ფერის აღების პროპორციები. თავად ფერები შეიძლება იცვალებოდეს 0-დან 255-მდე. ნული - ეს არის ფერის არარსებობა, ხოლო 255 - ეს არის სუფთა ფერი (მაგალითად, სუფთა წითელი).

თავად ასოები rgb იშიფრება როგორც red, green, blue.

შევხედოთ მაგალითებს.

მაგალითი

მოდით შევურიოთ სუფთა წითელი და სუფთა ცისფერი ფერი. ამისთვის პირველ მნიშვნელობას ვსვამთ 255-ზე, მეორეს 0-ზე, ხოლო მესამეს - 255-ზე. ჩვენ მივიღებთ იისფერ ფერს:

<p>
	ტექსტი
</p>

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

მაგალითი

მოდით ახლა პირველი მნიშვნელობა დავსვათ 255-ზე, ხოლო ყველა დანარჩენი - ნულებზე. შედეგად მივიღებთ სუფთა წითელ ფერს:

<p>
	ტექსტი
</p>

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

მაგალითი

ასე მივიღებთ სუფთა მწვანე ფერს:

<p>
	ტექსტი
</p>

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

მაგალითი

ხოლო თუ მწვანესთვის დავსვამთ არა 255, არამედ 100, მაშინ მივიღებთ ნაწილობრივ მწვანეს:

<p>
	ტექსტი
</p>

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

მაგალითი

შევურიოთ სამივე ფერი თვითნებურ პროპორციებში. ნახეთ, რა მიიღეთ:

<p>
	ტექსტი
</p>

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

მაგალითი

თუ ყველა მნიშვნელობას დავსვამთ 255-ზე, მაშინ მივიღებთ სუფთა თეთრ ფერს:

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

მაგალითი

თუ ყველა მნიშვნელობას დავსვამთ 0-ზე, მაშინ მივიღებთ სუფთა შავ ფერს:

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

პრაქტიკული ამოცანები

ფერის rgb-ის მეშვეობით მითითებით გახადეთ ყველა აბზაცი წითელი ფერის.

ფერის rgb-ის მეშვეობით მითითებით გახადეთ ყველა h2 მწვანე ფერის.

ფერის rgb-ის მეშვეობით მითითებით გახადეთ ყველა h3 ცისფერი ფერის.

შეურიეთ სუფთა წითელი და სუფთა მწვანე. რა ფერი მიიღება?