Щоб задати колір шрифта, необхідно використовувати властивість color в атрибуті style. Значення цієї властивості може бути задане в кількох форматах: у вигляді назви кольору (наприклад, "червоний"), у вигляді шестнадцяткового коду кольору (наприклад, "#FF0000") або у вигляді RGB-значень (наприклад, "rgb(255, 0, 0)")
| Колір | Приклад коду |
|---|---|
| Червоний | Червоний текст |
| Синій | Синій текст |
| Зелений | Зелений текст |
Також можна використовувати спеціальні ключові слова для заздалегідь визначених кольорів, такі як "чорний", "білий", "сірий" тощо.
Задаючи колір шрифта, можна створювати ефектні та привабливі текстові елементи на веб-сторінці. Важливо пам'ятати, що використання кольорів на веб-сторінці має бути помірним і відповідати її загальній концепції дизайну.
Колірні моделі
Веб-сторінки можуть використовувати кілька колірних моделей для вказівки кольору шрифту або фону. Ці моделі представляють різні способи визначення кольору за допомогою комбінацій основних кольорів.
Однією з найбільш розповсюджених колірних моделей є модель RGB (Червоний, Зелений, Синій). У цій моделі колір визначається шляхом змішування трьох основних кольорів - червоного, зеленого та синього. Значення кожного кольору вказуються в діапазоні від 0 до 255.
Ще однією популярною колірною моделлю є модель HSL (Відтінок, Насиченість, Яскравість). У цій моделі колір визначається за відтінком, насиченістю і яскравістю. Відтінок вказується в градусах (від 0 до 360), насиченість і яскравість задаються у відсотках.
Для вказівки кольору шрифту або фону в HTML використовується атрибут color та...колір фону відповідно. Значення атрибута вказується у вигляді кольору в одній з колірних моделей.Приклад використання кольорової моделі RGB:КолірRGBЧервоний255, 0, 0Зелений0, 255, 0Синій0, 0, 255Приклад використання кольорової моделі HSL:КолірHSLЧервоний0, 100%, 50%Зелений120, 100%, 50%Синій240, 100%, 50%Вибір кольорової моделі залежить від цілей і уподобань розробника, а також від особливостей сприйняття кольору читачем. Будьте уважні при виборі кольору шрифту і фону, щоб досягти максимальної читабельності тексту на веб-сторінці.Назви кольорівДеякі з найбільш поширених назв кольорів в HTML:Червоний (red) - яскравий і викликаючий колір, що символізує пристрасть і енергію. Синій (blue) - спокійний і холодний колір, асоціюється з миром і довірою. Зелений (green) - природний і освіжаючий колір, який асоціюється зі здоров'ям і природою. Жовтий (yellow) - яскравий і сонячний колір, що символізує радість і оптимізм. Помаранчевий (orange) - теплий і енергійний колір, який асоціюється з емоціями і веселощами. Фіолетовий (purple) - розкішний і таємничий колір, що символізує розкіш і владу. Рожевий (pink) - ніжний і жіночний колір, асоціюється з чуттєвістю і романтикою. Сірий (gray) - нейтральний і стриманий колір, який використовується для створення збалансованого і стильного дизайну. Це тільки кілька прикладів назв кольорів, доступних в HTML. Ви можете використовувати ці кольори для створення красивих і привабливих веб-сторінок. Звісно, окрім назв кольорів, в HTML також можна використовувати шістнадцяткові коди кольорів і функцію RGB для точного вказівки кольору шрифту.Шістнадцяткові значенняШістнадцяткові значення використовуються для встановлення кольору шрифту в HTML-коді. Шістнадцяткова система числення використовує 16 символів (0-9 та A-F), щоб представляти числа.Шістнадцяткові значення кольору починаються з символу #, за яким слідують шість символів. Перші два символи позначають кількість червоного (red), наступні два символи - зеленого (green), а останні два символи - синього (blue).Кожен символ у шістнадцятковій системі має своє значення. Наприклад, символ 0 представляє значення 0, символ F - значення 15. Різні комбінації символів дозволяють створювати.безліч відтінків кольору шрифту.Наприклад, щоб встановити чорний колір шрифту, використовується значення#000000.Для встановлення білого кольору шрифту використовується значення#FFFFFF.Використовуючи різні комбінації символів, ви можете створювати різноманітні кольори для свого тексту.Деякі поширені значення кольору шрифту:Червоний -#FF0000Зелений -#00FF00Синій -#0000FFЖовтий -#FFFF00Фіолетовий -#800080Помаранчевий -#FFA500Використовуючи шестнадцяткові значення, ви можете створювати барвистий та привабливий текст на своєму веб-сайті.RGB та RGBA значення.У HTML та CSS колір шрифту може бути визначений за допомогою різних методів, включаючи використанняRGB і RGBA значення.RGB (від англ. Red, Green, Blue) - це система, в якій кожен колір представлений змішуванням червоного (Red), зеленого (Green) та синього (Blue) кольорових каналів. Кожен канал може мати значення від 0 до 255, де 0 - мінімальна інтенсивність кольору, а 255 - максимальна інтенсивність.Щоб вказати колір шрифту, використовуючи значення RGB, необхідно використовувати наступний формат:Кольоровий каналЗначенняЧервоний (Red)0-255Зелений (Green)0-255Синій (Blue)0-255Наприклад, щоб встановити червоний колір шрифту, можна використовувати наступний код:color: rgb(255, 0, 0);RGBA (від англ. Red, Green, Blue, Alpha) - це розширення системи RGB, яке також включає значення альфа-каналу (Alpha). Альфа-канал визначає прозорість кольору і може матизначення від 0 до 1, де 0 - повністю прозорий, а 1 - повністю непрозорий.Щоб вказати колір шрифту з використанням RGBA значення, необхідно використовувати наступний формат:Колірний каналЗначенняЧервоний (Red)0-255Зелений (Green)0-255Синій (Blue)0-255Альфа (Alpha)0-1Наприклад, щоб встановити напівпрозорий червоний колір шрифту, можна використати наступний код:color: rgba(255, 0, 0, 0.5);HSL та HSLA значенняHSL (від англ. Hue, Saturation, Lightness) представляє собою кольорову модель, яка визначається трьома компонентами:Відтінок (Hue): задає сам колір і може бути представленим числом від 0 до 360. Наприклад, 0 відповідає червоному кольору, 120 - зеленому, 240 - синьому і так далі.Насиченість (Saturation):визначає ступінь насиченості кольору і може приймати значення від 0% до 100%. Значення 0% відповідає відтінку сірого, а 100% - найяскравішому кольору.Яскравість (Lightness):вказує, наскільки світлим або темним повинен бути колір. Значення 0% відповідає чорному, а 100% - білому кольору.HSLA значенням є розширена версія HSL, доповнена альфа-каналом, який визначає прозорість кольору. Значення альфа-каналу може бути числом від 0 до 1, де 0 відповідає повністю прозорому кольору, а 1 - повністю непрозорому.Приклади використання HSL і HSLA значень для встановлення кольору шрифта:В результаті вказаних стилів, перший абзац матиме зелений текст, а другий - напівпрозорий синій текст.Використання в CSSДля задання кольору шрифта в CSS використовується властивість color. Існує декілька способів вказати колір:1. Використання назви кольору. Наприклад, color: red; задасть червоний колір. У CSS також доступні інші назви кольорів, такі як "blue" (синій), "green" (зелений) тощо.2. Використання шестнадцяткового коду. Наприклад, color: #ff0000; задасть червоний колір. Шестнадцятковий код складається з шести символів, які представляють значення червоного, зеленого та синього кольорів відповідно.3. Використання RGB значення. Наприклад, color: rgb(255, 0, 0); також задасть червоний колір. Тут кожне число в дужках представляє значення червоного, зеленого та синього кольорів відповідно.4. Використання RGBA значення. Наприклад, color: rgba(255, 0, 0, 0.5); задасть напівпрозорий червоний колір. Тут останнє число представляє рівень прозорості і може бути від 0 (повністю прозорий) до 1 (повністю непрозорий).Таким чином, за допомогою CSS.можна легко задати колір тексту на веб-сторінці, що дозволяє створювати красивий і стильний дизайн.Приклади застосування кольорівВ HTML можна вказувати колір шрифту за допомогою значення атрибута "color" для тега . Нижче наведено деякі приклади:Текст буде написаний червоним кольором.Текст буде написаний зеленим кольором.Текст буде написаний синім кольором.Текст буде написаний червоним кольором з використанням RGB-значення.Текст буде написаний червоним кольором з використанням HEX-коду.Також можна вказувати колір шрифту за допомогою стилів CSS. Наприклад, можна використовувати внутрішній CSS-стиль:Текст буде написаний червоним кольором з використанням CSS-стилю.Або зовнішній CSS-файл:Текст буде написаний зеленим кольором з використанням зовнішнього CSS-файлу.В обох випадках можна використовувати й інші значення.кольори, наприклад, значення RGB або HEX-коди.