Jak używać kolorów szesnastkowych CSS z wartością alfa?

W CSS istnieje kilka sposobów zapisu kolorów, które można używać. Do najpopularniejszych należą RGB (czerwony, zielony, niebieski), RGBA (czerwony, zielony, niebieski, kanał alfa), HSL (odcień, nasycenie, jasność). Najpopularniejszy jest szesnastkowy (HEX) kod. CSS obsługuje nazwane kolory. Większość nowoczesnych przeglądarek może je odczytać i zinterpretować. Takich kolorów jest obecnie 147. Wszystkie są zapisywane w języku angielskim (red, yellow, yellowgreen itd.) CSS zapis wygląda następująco:


div {
	
  color: blue;

}

Szesnastkowy system liczbowy składa się z cyfr 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 oraz liter A, B, C, D, E, F. Dzięki HEX (szesnastkowy) można zapisać w CSS praktycznie każdy kolor. Użycie koloru HEX w CSS Kod HEX koloru jest używany w CSS jako wartość dla właściwości (np. color, background-color itd.)  Konstrukcja wygląda następująco:  obiekt, otwierający nawias klamrowy ({) nazwa właściwości, dwukropek (:), wartość, średnik (;) zamykający nawias klamrowy (}) 

 div {
   color: #HEX-kod;
 }

  Przed kodem HEX musi stać znak krzyżyka (#). Po nim należy zapisać wartość HEX potrzebnego koloru w formacie #RRGGBB.  Pary RR - odpowiadają za czerwony (Red), GG - zielony (Green) oraz BB - niebieski (Blue).  Można również używać skróconej wersji zapisu dla niektórych kolorów - #RGB Używamy szesnastkowego koloru z kanałem alfa

Kod HEX z kanałem alfa (Alpha) zapisuje się jako HEXA. Kod HEX ALPHA zapisuje się w CSS jako #RRGGBBAA, gdzie AA - to wartość kanału alfa. AA - to również szesnastkowa wartość, ale ten szesnastkowy kod dotyczy przezroczystości koloru. Stuprocentowy poziom przezroczystości ma wartość FF. Oznacza to, że każdy kolor z stuprocentową wartością przezroczystości w kanale alfa - to całkowicie przezroczysty szesnastkowy kod (kolor). Na przykład #F2F2F2FF Kod szesnastkowy przezroczystości - to nie do końca poprawna nazwa. Bardziej poprawna - poziom przezroczystości szesnastkowego kodu koloru, lub kanał alfa kodu HEX. Szesnastkowe kody przezroczystości kanału alfa dla koloru HEX: 100% — FF - pełna przezroczystość.99% — FC98% — FA97% — F796% — F595% — F294% — F093% — ED92% — EB91% — E890% — E689% — E388% — E087% — DE86% — DB85% — D984% — D683% — D482% — D181% — CF80% — CC79% — C978% — C777% — C476% — C275% — BF74% — BD73% — BA72% — B871% — B570% — B369% — B068% — AD67% — AB66% — A865% — A664% — A363% — A162% — 9E61% — 9C60% — 9959% — 9658% — 9457% — 9156% — 8F55% — 8C54% — 8A53% — 8752% — 8551% — 8250% — 80 - półprzezroczysty49% — 7D48% — 7A47% — 7846% — 7545% — 7344% — 7043% — 6E42% — 6B41% — 6940% — 6639% — 6338% — 6137% — 5E36% — 5C35% — 5934% — 5733% — 5432% — 5231% — 4F30% — 4D29% — 4A28% — 4727% — 4526% — 4225% — 4024% — 3D23% — 3B22% — 3821% — 3620% — 3319% — 3018% — 2E17% — 2B16% — 2915% — 2614% — 2413% — 2112% — 1F11% — 1C10% — 1A9% — 178% — 147% — 126% — 0F5% — 0D4% — 0A3% — 082% — 051% — 030% — 00 - całkowita nieprzezroczystość Poziom kanału alfa w zakresie od 0 do 100 procent. Całkowicie nieprzezroczysty szesnastkowy kolor będzie miał 00 na końcu formatu HEXA #RRGGBBAA. Na przykład #F2F2F200 Półprzezroczystość - to kanał alfa, który będzie miał poziom przezroczystości 50% (80). Oznacza to, że półprzezroczysty kolor w CSS będzie miał 80 na końcu formatu HEXA #RRGGBBAA. Na przykład #F2F2F280 Półprzezroczysty kolor tekstu w CSS:

p {
  color: #F2F2F280;
}

Półprzezroczysty kolor tła w CSS:

div {
  background-color: #F2F2F280;
}