CSS Допустимі значення кольору
CSS Кольори
Кольори в CSS можуть бути визначені за допомогою наступних методів:
- Шістнадцяткові кольори (HEX)
- Шістнадцяткові кольори з прозорістю
- RGB кольори
- RGBA кольори
- HSL кольори
- HSLA кольори
- Попередньо визначені/кросбраузерні назви кольорів
- За допомогою ключового слова
currentcolor
Шістнадцяткові кольори
Шістнадцятковий колір визначається за допомогою: #RRGGBB, де шістнадцяткові цілі числа RR (червоний), GG (зелений) і BB (синій) визначають компоненти кольору. Усі значення мають бути від 00 до FF.
Наприклад, значення #0000ff відображається синім кольором, оскільки для синього компонента встановлено найвище значення (ff), а для інших – 00.
Приклад
Визначте різні кольори HEX:
#p1 {background-color: #ff0000;} /* червоний */
#p2 {background-color: #00ff00;} /* зелений */
#p3 {background-color: #0000ff;} /* синій */
Спробуйте самі »
Шістнадцяткові кольори з прозорістю
Шістнадцятковий колір указується за допомогою: #RRGGBB. Щоб додати прозорість, додайте дві додаткові цифри між 00 та FF.
Приклад
Визначайте різні шістнадцяткові кольори з прозорістю:
#p1a {background-color: #ff000080;} /* червона прозорість */
#p2a {background-color: #00ff0080;} /* зелена прозорість */
#p3a {background-color: #0000ff80;} /* синя прозорість */
Спробуйте самі »
RGB Кольори
Значення кольору RGB визначається за допомогою функції rgb(), яка має такий синтаксис:
rgb(red, green, blue)
Кожен параметр (червоний, зелений і синій) визначає інтенсивність кольору та може бути цілим числом від 0 до 255 або відсотковим значенням (від 0% до 100%).
Наприклад, значення rgb(0,0,255) відображається синім кольором, оскільки синій параметр має найвище значення (255), а інші — 0.
Крім того, такі значення визначають рівний колір: rgb(0,0,255) та rgb(0%,0%,100%).
Приклад
Визначте різні кольори RGB:
#p1 {background-color: rgb(255, 0, 0);} /* червоний */
#p2 {background-color: rgb(0, 255, 0);} /* зелений */
#p3 {background-color: rgb(0, 0, 255);} /* синій */
Спробуйте самі »
RGBA Кольори
Значення кольорів RGBA є розширенням значень кольорів RGB з альфа-каналом, який визначає непрозорість об’єкта.
Колір RGBA визначається за допомогою функції rgba(), яка має такий синтаксис:
rgba(red, green, blue, alpha)
Альфа-параметр — це число від 0,0 (повністю прозорий) до 1,0 (повністю непрозорий).
Приклад
Визначте різні кольори RGB з непрозорістю:
#p1 {background-color: rgba(255, 0, 0, 0.3);} /* червоний з непрозорістю */
#p2 {background-color: rgba(0, 255, 0, 0.3);} /* зелений з непрозорістю */
#p3 {background-color: rgba(0, 0, 255, 0.3);} /* синій з непрозорістю */
Спробуйте самі »
HSL Кольори
HSL розшифровується як hue, saturation, lightness (відтінок, насиченість, яскравість) і представляє циліндричні координати представлення кольорів.
Значення кольору HSL визначається за допомогою функції hsl(), яка має такий синтаксис:
hsl(hue, saturation, lightness)
Відтінок — це градус на колірному колі (від 0 до 360) — 0 (або 360) — червоний, 120 — зелений, 240 — синій. Насиченість – значення у відсотках; 0% означає відтінок сірого, а 100% – повний колір. Яскравість теж у відсотках; 0% - чорний, 100% - білий.
Приклад
Визначте різні кольори HSL:
#p1 {background-color: hsl(120, 100%, 50%);} /* зелений */
#p2 {background-color: hsl(120, 100%, 75%);} /* світло-зелений */
#p3 {background-color: hsl(120, 100%, 25%);} /* темно-зелений */
#p4 {background-color: hsl(120, 60%, 70%);} /* пастельний зелений */
Спробуйте самі »
HSLA Кольори
Значення кольорів HSLA є розширенням значень кольорів HSL з альфа-каналом, який визначає непрозорість об’єкта.
Значення кольору HSLA вказується за допомогою функції hsla(), яка має такий синтаксис:
hsla(hue, saturation, lightness, alpha)
Альфа-параметр — це число від 0,0 (повністю прозорий) до 1,0 (повністю непрозорий).
Приклад
Визначте різні кольори HSL з непрозорістю:
#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* зелений з непрозорістю */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* світло-зелений з непрозорістю */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* темно-зелений з непрозорістю */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);} /* пастельний зелений з непрозорістю */
Спробуйте самі »
Попередньо визначені/кросбраузерні назви кольорів
140 назв кольорів попередньо визначено в специфікації кольорів HTML і CSS.
Для прикладу: blue, red, coral, brown, тощо:
Приклад
Визначте різні назви кольорів:
#p1 {background-color: blue;}
#p2 {background-color: red;}
#p3 {background-color: coral;}
#p4 {background-color: brown;}
Спробуйте самі »
Список усіх попередньо визначених назв можна знайти в Довіднику назв кольорів на нашому сайті W3Schools українською.
Ключове слово currentcolor
Ключове слово currentcolor стосується значення властивості кольору елемента.
Приклад
Колір межі наступного елемента <div> буде синім, оскільки колір тексту елемента <div> є синій:
#myDIV {
color: blue; /* Синій колір тексту */
border: 10px solid currentcolor; /* Синій колір межі */
}
Спробуйте самі »
