Урок №13. HTML. Кольори

Курс по основам HTML | CSS. W3Schools українською. Уроки для початківців



HTML кольори. Як додавати кольори на веб-сторінках? Які бувають кольори в веб-дизайні?

HTML кольори задаються за допомогою попередньо визначених назв кольорів, або значень RGB, HEX, HSL, RGBA, HSLA.


Назви кольорів

В HTML можна вказати колір за допомогою назви кольору:

Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
LightGray
Darkred

Спробуйте самі! »

HTML підтримує 140 стандартних назв кольорів.


HTML Background Color - колір фону

Можна встановити колір фону для HTML елементів:


Hello World

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Приклад:

<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>
Спробуйте самі! »

HTML Text Color - колір тексту

Можна встановити колір тексту:

Hello World

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Приклад:

<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisienim...</p>
Спробуйте самі! »

HTML Border Color - колір межі

Можна встановити колір меж (border):

Hello World

Hello World

Hello World

Приклад:

<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
Спробуйте самі! »

Колірні значення

У HTML можна також вказати кольори, використовуючи значення RGB, значення HEX, значення HSL, значення RGBA і значення HSLA:

Те ж саме, що і назва кольору "Tomato":

rgb(255, 99, 71)
#ff6347
hsl(9, 100%, 64%)

Те ж саме, що і назва кольору "Tomato", але 50% прозорості:

rgba(255, 99, 71, 0.5)
hsla(9, 100%, 64%, 0.5)

Приклад:

<h2 style="background-color:rgb(255, 99, 71);">...</h2>
<h2 style="background-color:#ff6347;">...</h2>
<h2 style="background-color:hsl(9, 100%, 64%);">...</h2>

<h2 style="background-color:rgba(255, 99, 71, 0.5);">...</h2>
<h2 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h2>
Спробуйте самі! »

Значення RGB

У HTML колір можна вказувати як значення RGB, використовуючи цю формулу:

rgb (red, green, blue)

що означає: червоний, зелений, синій.

Кожен параметр (червоний, зелений і синій) визначає інтенсивність кольору від 0 до 255.

Наприклад, rgb (255, 0, 0) відображається у вигляді червоного кольору, тому що червоний встановлюється на його найвище значення (255), а інші встановлюються на 0.

Для відображення чорного кольору всі параметри кольору повинні бути встановлені в 0, наприклад: rgb (0, 0, 0).

Для відображення білого кольору всі параметри кольору повинні бути встановлені на 255, наприклад: rgb (255, 255, 255).

Поекспериментуйте самостійно, змішуючи значення RGB.

Приклад:

rgb(255, 0, 0)
rgb(0, 0, 255)
rgb(60, 179, 113)
rgb(238, 130, 238)
rgb(255, 165, 0)
rgb(106, 90, 205)
Спробуйте самі! »

Відтінки сірого часто визначаються з використанням рівних значень для всіх 3 джерел світла:

Приклад:

rgb(0, 0, 0)
rgb(60, 60, 60)
rgb(120, 120, 120)
rgb(180, 180, 180)
rgb(240, 240, 240)
rgb(255, 255, 255)
Спробуйте самі! »

Значення HEX

У HTML можна вказати колір, використовуючи шістнадцяткове значення у вигляді:

#rrggbb

Де rr (червоний), gg (зелений) і bb (синій) є шістнадцятковими значеннями між 00 і ff (такими ж, як десяткові 0-255).

Наприклад, #ff0000 відображається у вигляді червоного кольору, оскільки червоний встановлюється на його найвище значення (ff), а інші встановлюються на найнижчі значення (00).

Приклад:

#ff0000
#0000ff
#3cb371
#ee82ee
#ffa500
#6a5acd
Спробуйте самі! »

Відтінки сірого часто визначаються з використанням рівних значень для всіх 3 джерел світла:

Приклад:

#000000
#3c3c3c
#787878
#b4b4b4
#f0f0f0
#ffffff
Спробуйте самі! »

Значення HSL

У HTML можна вказати колір за допомогою відтінку, насиченості та легкості (освітленості) - (HSL) у вигляді:

hsl (відтінок, насиченість, легкість)

Відтінок (Hue)

Відтінок - це ступінь на колірному колесі від 0 до 360. 0 - червоний, 120 - зелений, а 240 - блакитний.

Насиченість - це процентне значення, 0% означає відтінок сірого, а 100% - повний колір.

Легкість також становить відсоток, 0% - чорний, 50% - на половину світлий або темний, 100% - білий.

Приклад:

hsl(0, 100%, 50%)
hsl(240, 100%, 50%)
hsl(147, 50%, 47%)
hsl(300, 76%, 72%)
hsl(39, 100%, 50%)
hsl(248, 53%, 58%)
Спробуйте самі! »

Насиченість (Saturation)

Насиченість може бути описана як інтенсивність кольору.

100% - це чистий колір, немає сірих відтінків.

50% - це 50% сірого кольору, але ви все ще можете побачити колір.

0% повністю сірий, ви не можете більше бачити колір.

Приклад:

hsl(0, 100%, 50%)
hsl(0, 80%, 50%)
hsl(0, 60%, 50%)
hsl(0, 40%, 50%)
hsl(0, 20%, 50%)
hsl(0, 0%, 50%)
Спробуйте самі! »

Легкість / Освітленість / Яскравість (Lightness)

Легкість кольору можна охарактеризувати як світло, яке ви хочете надати кольору, де 0% означає відсутність світла (чорний), 50% означає 50% світла (ні темний, ні світлий), 100% означає повну легкість (білий колір).

Приклад:

hsl(0, 100%, 0%)
hsl(0, 100%, 25%)
hsl(0, 100%, 50%)
hsl(0, 100%, 75%)
hsl(0, 100%, 90%)
hsl(0, 100%, 100%)
Спробуйте самі! »

Відтінки сірого часто визначаються встановленням відтінку і насиченості в 0, а також регулюють яскравість від 0% до 100%, щоб отримати темніші / світліші відтінки:

Приклад:

hsl(0, 0%, 0%)
hsl(0, 0%, 24%)
hsl(0, 0%, 47%)
hsl(0, 0%, 71%)
hsl(0, 0%, 94%)
hsl(0, 0%, 100%)
Спробуйте самі! »

Значення RGBA

Значення кольорів RGBA є розширенням значень кольорів RGB з альфа-каналом, який визначає непрозорість кольору.

Значення кольору RGBA вказано за допомогою:

rgba (red - червоний, green - зелений, blue - синій, alpha - альфа)

Параметр "alpha" - це число між 0.0 (повністю прозорим) та 1.0 (зовсім не прозорим):

Приклад:

rgba(255, 99, 71, 0)
rgba(255, 99, 71, 0.2)
rgba(255, 99, 71, 0.4)
rgba(255, 99, 71, 0.6)
rgba(255, 99, 71, 0.8)
rgba(255, 99, 71, 1)
Спробуйте самі! »

Значення HSLA

Значення кольорів HSLA є розширенням значень кольорів HSL за допомогою альфа-каналу, який визначає непрозорість кольору.

Значення кольору HSLA вказано за допомогою:

hsla (hue - відтінок, saturation - насиченість, lightness - легкість, alpha - альфа)

Параметр "альфа" - це число між 0.0 (повністю прозорим) та 1.0 (зовсім не прозорим):

Приклад:

hsla(9, 100%, 64%, 0)
hsla(9, 100%, 64%, 0.2)
hsla(9, 100%, 64%, 0.4)
hsla(9, 100%, 64%, 0.6)
hsla(9, 100%, 64%, 0.8)
hsla(9, 100%, 64%, 1)
Спробуйте самі! »

Таким чином, ви можете використовувати різні способи запису кольору в HTML-розмітці. Але найчастіше використовується написання кольору в шістнадцятковому значенні HEX - як в найбільш універсальному і компактному стилі.

Існує безліч різних програм і плагінів до браузерів, за допомогою яких можна підбирати потрібний вам колір в будь-якому з колірних значень: за назвою, HEX, RGB, HSL. Наприклад, онлайн сервіси Color Picker на сайті https://www.w3schools.com/, https://colorscheme.ru/ та ін., програми ColorMania, Microsearch Color Picker, Pixie та ін., розширення ColorZilla, ColorPicker в Chrome та ін.


Довідник HTML тегів

Примітка: Для отримання повного списку всіх доступних HTML тегів, відвідайте довідник HTML тегів.



warning

Не викладайте свій код безпосередньо в коментарях, він відображається некоректно. Скористайтесь такими сервісами, як jsfiddle.net, codepen.io, liveweave.com, jsbin.com, збережіть код на будь-якому з цих сервісів і в коментарях дайте на нього посилання. Так буде видно і код, і результат.