НАЙКРАЩИЙ САЙТ ДЛЯ ВЕБ-РОЗРОБНИКІВ
HTML CSS JAVASCRIPT SQL PHP PYTHON JAVA KOTLIN GO C C++ C# AI W3.CSS TypeScript Як зробити? ДОВІДНИКИ БІЛЬШЕ 🔍 ◑ ВПРАВИ
HTML5. Уроки для початківців. W3Schools українською

En Es De Fr

HTML Кольори

❮ Prev Next ❯

В цій темі:

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

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

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

Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
LightGray

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

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

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>

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

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 wisi enim...</p>
Спробуйте самі »

Border Color - Колір межі

Ви можете встановити колір меж:

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)

Приклад

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

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

RGB Значення

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

rgb(red, green, blue)

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

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

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

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

Експериментуйте, змішуючи значення RGB нижче:

 

RED

255

GREEN

0

BLUE

0

Приклад

rgb(255, 0, 0)
rgb(0, 0, 255)
rgb(60, 179, 113)
rgb(238, 130, 238)
rgb(255, 165, 0)
rgb(106, 90, 205)

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

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

Приклад

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 колір можна вказати, використовуючи шістнадцяткове (HEX) значення в формі:

#rrggbb

де rr (red), gg (green) та bb (blue) шістнадцяткові значення від 00 до ff (такі ж, як десяткові 0-255).

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

Приклад

#ff0000
#0000ff
#3cb371
#ee82ee
#ffa500
#6a5acd

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

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

Приклад

#000000
#3c3c3c
#787878
#b4b4b4
#f0f0f0
#ffffff

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

HSL значення

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

hsl(hue, saturation, lightness)

Відтінок (hue) - це градус колірного кола від 0 до 360. 0 - червоний, 120 - зелений, 240 - синій.

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

Яскравість (lightness) також в процентах, 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%)

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

Насиченість

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

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%)

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

Яскравість

Яскравість кольору можна описати як кількість світла, яке ви хочете дати кольору, де 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)

Альфа-параметр - це число від 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?
  • За допомогою якої властивості можна встановити колір фону HTML-сторінки?
  • За допомогою якої властивості можна встановити колір тексту HTML-сторінки?
  • За допомогою якої властивості можна встановити колір межі HTML-елемента?
  • За допомогою яких значень кольорів можна встановити кольори на веб-сторінці?
  • Як розшифровується RGB-значення кольору?
  • Що визначає кожний параметр в RGB-значенні кольору?
  • Яке мінімальне та максимальне значення кожного параметру в RGB-кольорі?
  • Які мають бути значення кожного з джерел світла при встановленні відтінків сірого в RGB-кольорі?
  • В якій формі вказується колір за допомогою шістнадцяткового (HEX) значення?
  • Яке мінімальне та максимальне значення кожного параметру в HEX-кольорі?
  • Які мають бути значення кожного з джерел світла при встановленні відтінків сірого в HEX-кольорі?
  • Як розшифровується HSL-значення кольору?
  • Яке мінімальне та максимальне значення кожного параметру в HSL-кольорі?
  • Які мають бути значення кожного з джерел світла при встановленні відтінків сірого в HSL-кольорі?
  • Для чого потрібен альфа-канал при встановленні значень кольору RGBA та HSLA?
❮ Prev Next ❯

✍ Коментарі