Колір у CSS

9.1 Способи завдання кольору в CSS

Колір відіграє важливу роль у веб-дизайні та веб-розробці. У CSS існує кілька способів завдання кольору, які дозволяють розробникам створювати привабливі та інтуїтивно зрозумілі інтерфейси. Нижче ми розглянемо різні способи завдання кольорів у CSS, включаючи колірні моделі, прозорість, градієнти та стандартні функції для роботи з кольором.

Способи завдання кольору в CSS:

• Іменовані кольори
• Шістнадцяткові кольори
• RGB і RGBA
• HSL і HSLA
• Градієнти
• Прозорість

9.2 Колірна модель RGB

Модель RGB (Red Green Blue) визначає колір шляхом змішування червоного, зеленого та синього кольорів. Кожному кольору присвоюється значення від 0 до 255.

Синтаксис:

    
      color: rgb(255, 0, 0); /* Червоний */
      color: rgb(0, 255, 0); /* Зелений */
      color: rgb(0, 0, 255); /* Синій */
    
  

Приклад:

    
      body {
        background-color: rgb(240, 248, 255); /* Колір фону: aliceblue */
      }
    
  

9.3 Колірна модель HEX

HEX (Hexadecimal) представляє колір із використанням шістнадцяткових значень. Кожне зі значень (RR, GG, BB) може варіюватися від 00 до FF.

Синтаксис:

    
      color: #ff0000; /* Червоний */
      color: #00ff00; /* Зелений */
      color: #0000ff; /* Синій */
    
  

Приклад:

    
      h1 {
        color: #4CAF50; /* Зелений */
      }
    
  

9.4 Колірна модель HSL

HSL (Hue, Saturation, Lightness) представляє колір у вигляді відтінку, насиченості та яскравості. Відтінок (Hue) вимірюється у градусах (0-360), насиченість (Saturation) та яскравість (Lightness) — у відсотках (0%-100%).

Синтаксис:

    
      color: hsl(0, 100%, 50%); /* Червоний */
      color: hsl(120, 100%, 50%); /* Зелений */
      color: hsl(240, 100%, 50%); /* Синій */
    
  

Приклад:

    
      p {
        color: hsl(210, 100%, 50%); /* Синій */
      }
    
  

9.5 Прозорість: RGBA і HSLA

Для додавання прозорості до кольорів використовуються моделі RGBA та HSLA. У цих моделях додається четвертий параметр — альфа-канал (Alpha), який визначає рівень прозорості від 0 (повністю прозорий) до 1 (повністю непрозорий).

1. RGBA (Red, Green, Blue, Alpha):

Синтаксис:

    
      color: rgba(255, 0, 0, 0.5); /* Напівпрозорий червоний */
      color: rgba(0, 255, 0, 0.3); /* Напівпрозорий зелений */
      color: rgba(0, 0, 255, 0.7); /* Напівпрозорий синій */
    
  

Приклад:

    
      div {
        background-color: rgba(255, 99, 71, 0.6); /* Напівпрозорий колір томата */
      }
    
  

2. HSLA (Hue, Saturation, Lightness, Alpha):

Синтаксис:

    
      color: hsla(0, 100%, 50%, 0.5); /* Напівпрозорий червоний */
      color: hsla(120, 100%, 50%, 0.3); /* Напівпрозорий зелений */
      color: hsla(240, 100%, 50%, 0.7); /* Напівпрозорий синій */
    
  

Приклад:

    
      span {
        color: hsla(210, 100%, 50%, 0.8); /* Напівпрозорий синій */
      }