Barwy i ich atrybuty, Model RGB

Lekcja: Barwy i ich atrybuty oraz Model barw RGB

Część teoretyczna: Barwy i ich atrybuty

Barwy odgrywają kluczową rolę w projektowaniu graficznym i interfejsach użytkownika. Wyróżniamy trzy podstawowe atrybuty barw:

  1. Odcień (Hue)

    • Odcień to podstawowa cecha barwy, która decyduje, czy kolor jest czerwony, niebieski, zielony, itp.
    • Przykład: Barwa o odcieniu czerwonym jest kojarzona z energią i dynamiką.

  2. Nasycenie (Saturation)

    • Oznacza intensywność koloru.
    • Wysokie nasycenie oznacza żywy, intensywny kolor, a niskie – bardziej wyblakły, pastelowy odcień.

  3. Jasność (Brightness lub Lightness)

    • Jasność określa, jak ciemny lub jasny jest kolor.
    • Kolor o wysokiej jasności jest bliższy bieli, a niski – czerni.

Część teoretyczna: Model barw RGB

Model barw RGB (Red, Green, Blue) to system używany w urządzeniach elektronicznych do mieszania barw. Kolory powstają przez łączenie trzech podstawowych składników:

  1. Czerwony (Red)
  2. Zielony (Green)
  3. Niebieski (Blue)

Każdy z tych składników jest reprezentowany w skali od 0 do 255.

  • Maksymalne wartości (255, 255, 255) dają biel.
  • Minimalne wartości (0, 0, 0) dają czerń.
  • Różne kombinacje tworzą pełne spektrum barw.

Ćwiczenia praktyczne

Ćwiczenie 1: Eksploracja barw w CSS

  1. Utwórz stronę HTML z kilkoma sekcjami.
  2. Dla każdej sekcji ustaw inny kolor tła za pomocą modelu RGB w CSS, np.: 
    background-color: rgb(255, 0, 0); /* czerwony */
  3. Zmień nasycenie i jasność barw, manipulując wartościami RGB.

Ćwiczenie 2: Stwórz paletę barw

  1. Na stronie HTML stwórz tabelę z 6 wierszami i 3 kolumnami.
  2. Każda komórka tabeli powinna mieć inny kolor w modelu RGB, np.: 
    <td style="background-color: rgb(100, 150, 200);"></td>
  3. Pod tabelą dodaj podpisy wyjaśniające, jak wartości RGB wpłynęły na kolor.

Ćwiczenie 3: Animacja zmieniająca kolory

  1. Utwórz w CSS animację, która stopniowo zmienia kolor elementu, np.: 
    @keyframes zmianaKoloru {
    0% { background-color: rgb(255, 0, 0); }
    50% { background-color: rgb(0, 255, 0); }
    100% { background-color: rgb(0, 0, 255); }
}
div {
    animation: zmianaKoloru 5s infinite;
}
  2. Wyjaśnij, jak zmiany w modelu RGB wpływają na powstające kolory.

Ćwiczenie 4: Gra w odgadywanie kolorów (RGB Challenge)

  1. Utwórz stronę HTML z trzema przyciskami i kolorowym kwadratem.
  2. Na każdy przycisk przypisz funkcję JavaScript, która zmienia wartości RGB koloru kwadratu losowo.
  3. Uczniowie mają za zadanie zgadnąć, jakie wartości RGB są przypisane do danego koloru, np.: 
    function zmienKolor() {
    let r = Math.floor(Math.random() * 256);
    let g = Math.floor(Math.random() * 256);
    let b = Math.floor(Math.random() * 256);
    document.getElementById("kwadrat").style.backgroundColor = 'rgb(${r}, ${g}, ${b})';
}