Przejdź do treści

Centrum Kształcenia Zawodowego i Ustawicznego w Mrągowie

CSS: Model RGB

piątek,

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.
Artykuł: Pierwszy dzień w Splicie

Pierwszy dzień w Splicie

Artykuł: OpenSolaris

OpenSolaris

Artykuł: Bob Frankston

Bob Frankston

Artykuł: Staże w Chorwacji

Staże w Chorwacji

Artykuł: 3Com

3Com

Nasze technikum

Technik informatyk

Szkoły dla dorosłych

Nasza szkoła

Pełna oferta edukacyjna

Oferta szkoły