Як використовувати кольори шістнадцяткового коду CSS з альфа значенням?

У CSS буває кілька варіантів запису кольорів, які можна використовувати. До поширених належать RGB (червоний, зелений, синій), RGBA (червоний, зелений, синій, альфа канал), HSL (відтінок, насиченість, яскравість). Найпопулярнішим є шістнадцятковий (HEX) код. CSS підтримує іменовані кольори. БІльність сучасних браузерів їх можут прочитати та інтерпретувати. Таких кольорів наразі 147. Всі вони записуються англійською мовою (red, yellow, yellowgreen і т. ін.) CSS запис виглядає наступним чином:


div {
	
  color: blue;

}

Шістнадцяткова система числення складається із цифр 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 та літер A, B, C, D, E, F. За допомомогою HEX (hexadecimal / шістнадцятковий) можна записати в CSS практично будь-який колір. Використання HEX кольору у CSS HEX код кольору використовується у CSS як значення для властивостей (наприклад color, background-color і т. ін.)   Конструкція така:  об’єкт, відкривальна фігурна дужка ({) назва властивості, двокрапка (:), значення, крапка з комою (;) закривальна фігурна дужка (}) 

 div {
   color: #HEX-код;
 }

  Перед HEX-кодом має стояти знак решітки (#). Після нього потрібно записувати HEX значення потрібного кольору в форматі #RRGGBB.  Пари RR - відповідають за червоний (Red), GG - зелений (Green) та BB - синій (Blue).  Також можна використовувати скорочений варіант запису для деяких кольорів - #RGB Використовуємо шістнадцятковий колір з альфа каналом

HEX альфа каналом (Alpha) записується як HEXA. HEX ALPHA записується в CSS як #RRGGBBAA де AA - це значення альфа-каналу. AA - це теж шістнадцяткове значення, але цей шістнадцятковий код для прозорого кольору / рівня прозорості кольору. Стовідсотковий рівень прозорості має значення FF. Тобто будь-який колір з стовідсотковим значенням прозорості в альфа-каналі - повністю прозорий шістнадцятковий код (колір). Наприклад #F2F2F2FF Шістнадцятковий код прозорості - не дуже правильна назва. Більш правильна - рівень прозорості шістнадцяткового коду кольору, або альфа-канал hex-коду. Шістнадцяткові коди прозорості альфа-каналу для HEX-кольору: 100% — FF - повна прозорість.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 - напівпрозорий49% — 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 - повна непрозорість Рівень альфа-каналу в діапазоні від 0 до 100 відсотків. Повністю непрозорий шістнадцятковий колір буде мати 00 наприкінці HEXA формату запису #RRGGBBAA. Наприклад #F2F2F200 Напівпрозорість - це альфа канал який буде мати рівень прозорості 50% (80). Тобто напівпрозорий колір в CSS буде мати 80 наприкінці HEXA формату запису #RRGGBBAA. Наприклад #F2F2F280 Напівпрозорий колір тексту в CSS:

p {
  color: #F2F2F280;
}

Напівпрозорий колір фону в CSS:

div {
  background-color: #F2F2F280;
}