CSS Кольори
CSS підтримує 140+ назв кольорів, HEX значення, RGB значення, RGBA значення, HSL значення, HSLA значення і напівтони (непрозорість).
RGBA Кольори
Кольорові значення RGBA є розширенням кольорових значень RGB з альфа-каналом, який визначає непрозорість для кольору.
Значення кольору RGBA визначається за допомогою: rgba (червоний, зелений, синій, альфа). Альфа-параметр - це число від 0,0 (повністю прозоре) до 1,0 (повністю непрозоре).
В наступному прикладі визначаються різні кольори RGBA:
Приклад
#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(hue, saturation, lightness).
- Hue (відтінок) - це градус на кольоровому колі (від 0 до 360):
- 0 (або 360) - це червоний (red)
- 120 - це зелений (green)
- 240 - це синій (blue)
- Saturation (насиченість) - це процентне значення: 100% це повний колір.
- Lightness (яскравість) - це також процент; 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 (відтінок, насиченість, яскравість, альфа), де параметр альфа визначає непрозорість. Альфа-параметр - це число від 0,0 (повністю прозоре) до 1,0 (повністю непрозоре).
В наступному прикладі визначаються різні кольори HSLA:
Приклад
#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);} /* пастельно-зелений з непрозорістю */
Спробуйте самі »
Opacity - Непрозорість
CSS властивість opacity визначає непрозорість для всього елементу (колір фону і текст будуть непрозорими/прозорими).
Значення властивості opacity має бути числом від 0,0 (повністю прозорий) до 1,0 (повністю непрозорий).
Зверніть увагу, що текст вище також буде прозорим/непрозорим!
В наступному прикладі показані різні елементи з непрозорістю:
Приклад
#p1 {background-color:rgb(255,0,0);opacity:0.6;} /* червоний з непрозорістю */
#p2 {background-color:rgb(0,255,0);opacity:0.6;} /* зелений з непрозорістю */
#p3 {background-color:rgb(0,0,255);opacity:0.6;} /* синій з непрозорістю */
Спробуйте самі »
