piątek, 2023-12-29

CSS: Model RGB

Model RGB

Model RGB (Red, Green, Blue – Czerwony, Zielony, Niebieski) to addytywny model kolorów wykorzystywany w różnych technologiach wyświetlania obrazu, takich jak monitory komputerowe, telewizory, kamery, a także w grafice komputerowej. W modelu RGB kolory są tworzone poprzez mieszanie trzech podstawowych kolorów światła: czerwonego, zielonego i niebieskiego.

Kluczowe cechy modelu RGB

• Addytywny charakter: W modelu RGB kolory powstają poprzez dodawanie światła o różnych kolorach. Dodanie razem czerwonego, zielonego i niebieskiego światła w pełnych intensywnościach daje światło białe.
• Składowe kolorów: Każdy kolor w modelu RGB jest określany przez trzy wartości, odpowiadające intensywności czerwonego, zielonego i niebieskiego. Na przykład, czysty czerwony kolor będzie miał składowe (255, 0, 0) w 8-bitowym modelu RGB, gdzie 255 oznacza pełną intensywność, a 0 brak intensywności.
• Zakres wartości: W standardowej, 8-bitowej przestrzeni kolorów RGB każdy kolor (czerwony, zielony, niebieski) może przyjmować wartość od 0 do 255, co daje w sumie 16,777,216 (256^3) możliwych kombinacji kolorów.
• Zastosowania: Model RGB jest szeroko stosowany w urządzeniach emitujących światło, takich jak ekrany cyfrowe. Jest on podstawą dla określania kolorów w językach programowania stron internetowych i grafiki komputerowej.

Przykłady mieszania kolorów w RGB

• Biały: (255, 255, 255) - pełna intensywność wszystkich trzech kolorów.
• Czarny: (0, 0, 0) - brak światła z każdego z kolorów.
• Szary: (128, 128, 128) - równe intensywności wszystkich trzech kolorów na średnim poziomie.
• Żółty: (255, 255, 0) - pełna intensywność czerwonego i zielonego przy braku niebieskiego.

RGB i CSS

W kaskadowych arkuszach stylów notacja rgb() jest jednym z podstawowych sposobów określania kolorów. W jej przypadku kolory definiowane są za pomocą modelu RGB (Red, Green, Blue), gdzie każdy składnik koloru jest określany przez wartość liczbową od 0 do 255.

Notacja rgb() składa się z trzech wartości liczbowych oddzielonych przecinkami:

• R (Red): Wartość czerwonego koloru (0-255).
• G (Green): Wartość zielonego koloru (0-255).
• B (Blue): Wartość niebieskiego koloru (0-255).

Przykłady kodu

.red {
    background-color: rgb(255, 0, 0); /* Czerwony */
}

.green {
    background-color: rgb(0, 255, 0); /* Zielony */
}

.blue {
    background-color: rgb(0, 0, 255); /* Niebieski */
}

.custom-color {
    background-color: rgb(123, 104, 238); /* Średni fiolet */
}

RGB w skrócie

1. Zakres wartości: Każda z wartości RGB może przyjmować liczby całkowite od 0 do 255. Na przykład, rgb(255, 0, 0) jest pełnym czerwonym kolorem, ponieważ tylko składnik czerwony (R) jest maksymalny, a pozostałe (G i B) są zerowe.
2. Mieszanie kolorów: Możesz tworzyć różnorodne kolory poprzez mieszanie różnych wartości RGB. Na przykład, rgb(255, 255, 0) stworzy kolor żółty, będący połączeniem pełnego czerwonego i pełnego zielonego.
3. Przezroczystość: Jeśli do koloru chcesz dodać przejrzystość, możesz użyć notacji rgba(), gdzie dodatkowy czwarty parametr reprezentuje poziom przezroczystości (alfa) w zakresie od 0 do 1.