У 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;
}
