четвъртък, 14 март 2024 г.

CSS цветове

 Цветовете се посочват с помощта на предварително дефинирани имена на цветове или стойности RGB, HEX, HSL, RGBA, HSLA.


CSS имена на цветове

В CSS цвят може да бъде посочен с помощта на предварително дефинирано име на цвят:

Домат
Оранжево
DodgerBlue
MediumSeaGreen
Сиво
SlateBlue
Виолетово
Светло сиво

Опитайте сами »

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 стойности:

Същото като името на цвета "Домат":

rgb (255, 99, 71)
# ff6347
hsl (9, 100%, 64%)

Същото като името на цвета "Домат", но 50% прозрачен:

rgba (255, 99, 71, 0,5)
hsla (9, 100%, 64%, 0,5)

Пример

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

ЧЕРВЕН

255

ЗЕЛЕНО

99

СИН

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)

Опитайте сами »

Нюансите на сивото често се определят, като се използват равни стойности за всичките 3 източника на светлина:

Пример

rgb(0, 0, 0)
rgb(60, 60, 60)
rgb(120, 120, 120)
rgb(180, 180, 180)
rgb(240, 240, 240)
rgb(255, 255, 255)

Опитайте сами »

RGBA стойност

RGBA цветовите стойности са разширение на RGB цветовите стойности с алфа канал - който определя непрозрачността на даден цвят.

RGBA стойността на цвета е посочена със:

rgba ( червено, зелено , синьо, алфа )

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

Експериментирайте, като смесите RGBA стойностите по-долу:

rgba (255, 99, 71, 0,5)

ЧЕРВЕН

255

ЗЕЛЕНО

99

СИН

71

АЛФА

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)

Опитайте сами »