Ustawianie koloru za pomocą rgb w CSS

Na samym początku podręcznika, kiedy uczyliśmy się kolorów, powiedziałem wam, że kolor można ustawić albo angielskim słowem, albo za pomocą rgb, albo za pomocą #. Dwa ostatnie formaty pozwalają uzyskać kolor dowolnego odcienia. Zastanówmy się, jak dokładnie działają te formaty.

Aby zrozumieć te sposoby, najpierw musimy zrozumieć, jak uzyskuje się potrzebny kolor na ekranie komputera.

W rzeczywistości pojedynczy punkt ekranu (piksel) nie może świecić wszystkimi kolorami, które są potrzebne, ponieważ byłoby to technicznie bardzo trudne. Każdy punkt ekranu może świecić tylko trzema kolorami: czerwonym, zielonym i niebieskim. Ale jednocześnie i w różnych proporcjach.

Kombinując te kolory, możemy uzyskać dowolny potrzebny nam kolor, podobnie jak robią to artyści z farbami: mieszając kilka kolorów, otrzymują kolejny nowy.

Aby zmieszać kolory w CSS, należy jako wartość właściwości podać słowo kluczowe rgb, a po nim wymienić przez przecinek określające, w jakich proporcjach należy wziąć te trzy kolory podstawowe. Same kolory mogą zmieniać się od 0 do 255. Przy czym zero - to brak koloru, a 255 - to czysty kolor (na przykład, czysty czerwony).

Same litery rgb rozszyfrowuje się jako red, green, blue.

Spójrzmy na przykładach.

Przykład

Pomieszajmy czysty czerwony i czysty niebieski kolor. W tym celu pierwszą wartość ustawiamy na 255, drugą na 0, a trzecią - na 255. Otrzymamy kolor fioletowy:

<p>
	tekst
</p>

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

Przykład

Ustawmy teraz pierwszą wartość na 255, a wszystkie pozostałe - na zera. W wyniku otrzymamy czysty czerwony kolor:

<p>
	tekst
</p>

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

Przykład

W ten sposób otrzymamy czysty zielony kolor:

<p>
	tekst
</p>

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

Przykład

A jeśli dla zielonego ustawimy nie 255, a 100, to otrzymamy częściowo zielony:

<p>
	tekst
</p>

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

Przykład

Pomieszajmy wszystkie trzy kolory w dowolnych proporcjach. Zobaczcie, co wyszło:

<p>
	tekst
</p>

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

Przykład

Jeśli ustawimy wszystkie wartości na 255, to otrzymamy czysty biały kolor:

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

Przykład

Jeśli ustawimy wszystkie wartości na 0, to otrzymamy czysty czarny kolor:

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

Zadania praktyczne

Ustawiając kolor za pomocą rgb spraw, aby wszystkie akapity były czerwone.

Ustawiając kolor za pomocą rgb spraw, aby wszystkie h2 były zielone.

Ustawiając kolor za pomocą rgb spraw, aby wszystkie h3 były niebieskie.

Pomieszaj czysty czerwony i czysty zielony. Jaki kolor otrzymasz?