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:

html<p>
  tekst
</p>

cssp {
  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:

html<p>
  tekst
</p>

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

Результат:

Przykład

W ten sposób otrzymamy czysty zielony kolor:

html<p>
  tekst
</p>

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

Результат:

Przykład

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

html<p>
  tekst
</p>

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

Результат:

Przykład

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

html<p>
  tekst
</p>

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

Результат:

Przykład

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

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

Przykład

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

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

Zadania praktyczne