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

En Es De Fr

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 нижче:

rgb(255, 99, 71)

RED

255

GREEN

99

BLUE

71

Приклад

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 нижче:

rgba(255, 99, 71, 0.5)

RED

255

GREEN

99

BLUE

71

ALPHA

0.5

Приклад

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)

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


Коментарі