Model barw CMY, CMYK i inne oraz kolory w internecie

Lekcja: Model barw CMY, CMYK i inne oraz kolory w internecie

Część teoretyczna: Modele barw CMY i CMYK

1. Model barw CMY

  • CMY (Cyan, Magenta, Yellow) to model barw subtraktywnych używany w druku i w innych procesach opartych na barwach odbijanych.
  • W tym modelu kolor powstaje poprzez odejmowanie światła od białego tła (np. papieru).
  • Kolory podstawowe:
    • Cyan (błękitny): odejmowanie czerwonego światła.
    • Magenta (purpurowy): odejmowanie zielonego światła.
    • Yellow (żółty): odejmowanie niebieskiego światła.

2. Model barw CMYK

  • To rozszerzenie modelu CMY o dodatkowy składnik: K (Key, czyli czarny).
  • Czarny atrament dodawany jest w druku, aby uzyskać głębsze cienie i zmniejszyć ilość kolorowych tuszy.
  • Zastosowania:
    • Używany głównie w poligrafii i druku.
    • Przykład: Kolor czerwony w CMYK może być opisany jako (0%, 100%, 100%, 0%).

3. Różnice między RGB a CMY/CMYK

  • RGB jest modelem addytywnym (światło dodaje kolory, tworząc biel).
  • CMY/CMYK to modele subtraktywne (światło jest odejmowane, tworząc czerń).
  • RGB używa się w urządzeniach cyfrowych, a CMYK w druku.

Kolory w Internecie

1. Reprezentacja kolorów w Internecie

  • W Internecie kolory opisuje się w różnych formatach, głównie:
    • Hexadecimal (HEX): np. #FF5733 (odpowiada wartościom RGB).
    • RGB: np. rgb(255, 87, 51).
    • HSL (Hue, Saturation, Lightness): np. hsl(11, 100%, 60%).
  • Kolory HEX są najczęściej używane w projektowaniu stron.

2. Bezpieczne kolory sieciowe (Web Safe Colors)

  • W początkowej fazie Internetu stosowano ograniczoną paletę kolorów (216 kolorów), które były wyświetlane poprawnie na różnych urządzeniach.
  • Obecnie większość urządzeń obsługuje pełną paletę kolorów, ale koncepcja bezpiecznych kolorów nadal jest ważna przy projektowaniu minimalnych lub prostych interfejsów.

3. Psychologia kolorów w projektowaniu stron

  • Kolory wywołują emocje:
    • Niebieski: zaufanie, spokój.
    • Czerwony: pasja, energia, uwaga.
    • Zielony: natura, zdrowie.
    • Żółty: radość, ostrzeżenie.

Ćwiczenia praktyczne

Ćwiczenie 1: Porównanie modeli CMY i RGB

  1. Stwórz prostą stronę HTML z trzema prostokątami:
    • Jeden wypełniony kolorem z modelu RGB.
    • Drugi z modelem CMY (z symulacją w RGB).
    • Dodaj tekst objaśniający różnice między modelami.

Ćwiczenie 2: Tworzenie własnych kolorów w HEX

  1. Przygotuj formularz HTML, w którym uczniowie będą mogli wprowadzać wartości HEX.
  2. Dodaj podgląd koloru w czasie rzeczywistym za pomocą CSS i JavaScript.

Kod HTML + JS:

<label for="colorInput">Wpisz kolor w HEX:</label>
<input type="text" id="colorInput" placeholder="#RRGGBB">
<div id="colorPreview" style="width: 100px; height: 100px; margin-top: 10px;"></div>

<script>
    const input = document.getElementById('colorInput');
    const preview = document.getElementById('colorPreview');

    input.addEventListener('input', () => {
        preview.style.backgroundColor = input.value;
    });
</script>

Ćwiczenie 3: Projektowanie palety CMYK w CSS

  1. Uczniowie mają za zadanie stworzyć tabelę z kolorami w formacie CMYK.
  2. Każdy kolor powinien być opisany odpowiednimi procentowymi wartościami składników (symulacja CMYK w RGB).

Ćwiczenie 4: Gradienty w HSL i RGB

  1. Stwórz stronę HTML z gradientem, który przechodzi między kolorami w modelu RGB i HSL.
  2. Uczniowie mają porównać różnice wizualne między modelami.

Podsumowanie lekcji:

  • Zrozumienie różnic między modelami barw RGB, CMY i CMYK.
  • Poznanie sposobów reprezentowania kolorów w Internecie (HEX, RGB, HSL).
  • Nauczenie się praktycznie wykorzystywać modele barw do projektowania stron internetowych.
  • Pogłębianie świadomości psychologii kolorów oraz ich wpływu na użytkowników.