CSS Цветове

Цветовете в CSS могат да бъдат определени чрез следните методи:

  • Шестнадесетични цветове
  • RGB цветове
  • RGBA цветове
  • HSL цветове
  • HSLA цветове
  • Предварително дефинирани /Имената на цветовете в браузъра

Шестнадесетични цветове

Шестнадесетичен цвят е зададен с: #RRGGBB, където RR (червено), GG (зелено) и BB (синьо) шестнадесетично число определят компонентите на цвета. Всички стойности трябва да са между 00 и FF.

Например, стойността # 0000ff се изобразява като синьо, защото синият компонент е настроен на най-високата си стойност (ff), а останалите са зададени на 00.


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


RGBA Цветове

Цветовите стойности за RGBA са разширение на RGB цветовите стойности с алфа канал – който указва непрозрачността на обекта.

RGBA цвят се определя с rgba() функцията , която има следния синтаксис:

rgba(red, green, blue, alpha)

Алфа параметърът е число между 0.0 (напълно прозрачно) и 1.0 (напълно непрозрачно).


HSL Цветове

HSL означава нюанс, насищане и лекота – и представлява цилиндрично-координатно представяне на цветовете.

Стойността на цвета на HSL се определя с hsl()
функцията
, която има следния синтаксис:

hsl(hue, saturation, lightness)

Hue is a degree on the color Цветът (от 0 до 360) – 0 (или 360) е червен, 120 е зелен, 240 е син. Насищането е процентна стойност; 0% означава нюанс на сивото и 100% е пълен цвят. Светлината е също процент; 0% е черно, 100% е бяло.


HSLA Цветове

Цветовите стойности за HSLA са разширение на цветовите стойности за HSL с алфа канал – който указва непрозрачността на обекта.

Стойността на цвета HSLA се определя с hsla()
функцията
, която има следния синтаксис:

hsla(hue, saturation, lightness, alpha)

Алфа параметърът е число между 0.0 (напълно прозрачно) и 1.0 (напълно непрозрачно).


Предварително дефинирани/Предефинирани имена на цветовете за всички браузъри

140 color names are predefined in the HTML and CSS color specification.

Look at the table of predefined color names.