Цветовете се посочват с помощта на предварително дефинирани имена на цветове или стойности RGB, HEX, HSL, RGBA, HSLA.
CSS имена на цветове
В CSS цвят може да бъде посочен с помощта на предварително дефинирано име на цвят:
CSS / HTML поддържа 140 стандартни имена на цветове .
CSS Цвят на фона
Можете да зададете цвета на фона за HTML елементи:
Lorem ipsum dolor sit amet, concectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud упражнение ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo следствие.
Пример
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>
CSS Цвят на текста
Можете да зададете цвета на текста:
Здравей свят
Lorem ipsum dolor sit amet, concectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud упражнение ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo следствие.
Пример
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
Цвят на границата на CSS
Можете да зададете цвета на границите:
Здравей свят
Здравей свят
Здравей свят
Пример
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
CSS стойности на цвета
В CSS цветовете могат да бъдат посочени и чрез RGB стойности, HEX стойности, HSL стойности, RGBA стойности и HSLA стойности:
Същото като името на цвета "Домат":
Същото като името на цвета "Домат", но 50% прозрачен:
Пример
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>
CSS RGB цветове
Стойността на RGB цвят представлява ЧЕРВЕНА, ЗЕЛЕНА и СИНЯ светлинни източници.
RGB стойност
В CSS цвят може да бъде посочен като RGB стойност, като се използва тази формула:
rgb ( червено, зелено , синьо )
Всеки параметър (червен, зелен и син) определя интензивността на цвета между 0 и 255.
Например rgb (255, 0, 0) се показва като червено, тъй като червеното е настроено на най-високата си стойност (255), а останалите са настроени на 0.
За да покажете черно, задайте всички цветови параметри на 0, като това: rgb (0, 0, 0).
За да покажете бяло, задайте всички цветни параметри на 255, като това: rgb (255, 255, 255).
Експериментирайте, като смесите RGB стойностите по-долу:
rgb (255, 99, 71)
ЧЕРВЕН
ЗЕЛЕНО
СИН
Пример
Нюансите на сивото често се определят, като се използват равни стойности за всичките 3 източника на светлина:
Пример
RGBA стойност
RGBA цветовите стойности са разширение на RGB цветовите стойности с алфа канал - който определя непрозрачността на даден цвят.
RGBA стойността на цвета е посочена със:
rgba ( червено, зелено , синьо, алфа )
Алфа параметърът е число между 0.0 (напълно прозрачно) и 1.0 (изобщо непрозрачно):
Експериментирайте, като смесите RGBA стойностите по-долу:
rgba (255, 99, 71, 0,5)
ЧЕРВЕН
ЗЕЛЕНО
СИН
АЛФА