НАЙКРАЩИЙ САЙТ ДЛЯ ВЕБ-РОЗРОБНИКІВ
HTML5. Уроки для початківців. W3Schools українською

En Es De

HTML RGB та RGBA кольори


Значення кольору RGB відображає ЧЕРВОНИЙ (RED), ЗЕЛЕНИЙ (GREEN) і СИНІЙ (BLUE) джерела світла.

Значення кольору RGBA - це розширення RGB з альфа-каналом (opacity/непрозорість).


RGB Значення кольору

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

rgb(red, green, blue)

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

Це означає, що існує 256 x 256 x 256 = 16777216 можливих кольорів!

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

Інший приклад, rgb (0, 255, 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(60, 60, 60)
rgb(100, 100, 100)
rgb(140, 140, 140)
rgb(180, 180, 180)
rgb(200, 200, 200)
rgb(240, 240, 240)

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

RGBA Значення кольору

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

Значення кольору RGBA вказано з:

rgba(red, green, blue, alpha)

Параметр альфа - це число від 0,0 (повністю прозоре) до 1,0 (зовсім не прозоре):

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

 

RED

255

GREEN

0

BLUE

0

ALPHA

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)

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


Коментарі