piątek, 2023-12-29

CSS: Kolory - notacja HEXA

W CSS możliwe jest definiowanie kolorów w formacie heksadecymalnym z uwzględnieniem przezroczystości. W tym celu używa się rozszerzonego formatu HEX, który obejmuje dodatkowe dwie cyfry reprezentujące wartość alfa (przezroczystość). Taki format jest często nazywany HEXA (HEX + Alpha).

Format Heksadecymalny z przezroczystością (HEXA)

• Format HEXA składa się z 8 znaków: #RRGGBBAA.
• Pierwsze sześć znaków (RRGGBB) definiuje kolor w tradycyjnym formacie HEX.
• Ostatnie dwie cyfry (AA) reprezentują wartość przezroczystości (alfa), gdzie 00 oznacza całkowitą przezroczystość (niewidoczny), a FF pełną nieprzezroczystość.

Przykłady:

1. Półprzezroczysty Czerwony: #FF000080

   • R: FF
   • G: 00
   • B: 00
   • A: 80 (128 w systemie dziesiętnym, około 50% przezroczystości)

2. Półprzezroczysty Zielony: #00FF0040

   • R: 00
   • G: FF
   • B: 00
   • A: 40 (64 w systemie dziesiętnym, około 25% przezroczystości)

3. Półprzezroczysty Niebieski: #0000FF60

   • R: 00
   • G: 00
   • B: FF
   • A: 60 (96 w systemie dziesiętnym, około 37,5% przezroczystości)

Przykład użycia

.transparent-red {
    background-color: #FF000080; /* Półprzezroczysty czerwony */
}

.transparent-green {
    background-color: #00FF0040; /* Półprzezroczysty zielony */
}

.transparent-blue {
    background-color: #0000FF60; /* Półprzezroczysty niebieski */
}

Uwaga!

• Format HEXA nie jest obsługiwany przez wszystkie przeglądarki, szczególnie starsze wersje.
• Alternatywą dla HEXA, która jest bardziej powszechnie obsługiwana, jest użycie notacji rgba(), gdzie można określić kolor i przezroczystość, np. rgba(255, 0, 0, 0.5) dla półprzezroczystego czerwonego.

Używanie HEXA jest przydatne, gdy potrzebujemy precyzyjnie kontrolować zarówno kolor, jak i poziom przezroczystości elementu w naszych projektach CSS.