Kolory CSS

Określenie kolorów odbywa się poprzez użycie zdefiniowanych nazw kolorów, lub wartości RGB, HEX, HSL, RGBA, HSLA.

Nazwy kolorów CSS

W CSS można używać nazw kolorów do określenia kolorów:

Tomato
Pomarańczowy
DodgerBlue
Średnia Zielona Morska
Szary
SlateBlue
Fiolet
SłabySzary

Spróbuj sam

Obsługiwane przez CSS/HTML 140 standardowych nazw kolorów.

CSS Kolor tła

Możesz ustawić kolor tła dla elementu HTML:

Witaj w Chinach
Chiny to wspaniałe państwo!

Przykład

<h1 style="background-color:DodgerBlue;">Chiny</h1>
<p style="background-color:Pomarańczowa;">Chiny to wspaniałe państwo!</p>

Spróbuj sam

CSS Kolor tekstu

Możesz ustawić kolor tekstu:

Chiny

Chiny to wspaniałe państwo!

Chiny, oficjalnie Republika Ludowa Chin, to kraj w Azji Wschodniej.

Przykład

<h1 style="color:Pomarańczowa;">Chiny</h1>
<p style="color:DodgerBlue;">Chiny to wspaniałe państwo!</p>
<p style="color:ŚrednioMorza;">Chiny, oficjalnie Republika Ludowa Chin...</p>

Spróbuj sam

Kolor krawędzi CSS

Możesz ustawić kolor obramowania:

Hello World
Hello World
Hello World

Przykład

<h1 style="border:2px solid Pomarańczowa;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Fiolet;">Hello World</h1>

Spróbuj sam

Wartości kolorów CSS

W CSS można również używać wartości RGB, wartości HEX, wartości HSL, wartości RGBA lub wartości HSLA, aby określić kolor:

Jest równoważny nazwie koloru "Tomato":

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

Jest równoważny nazwie koloru "Tomato", ale z przezroczystością 50%:

rgba(255, 99, 71, 0.5)
hsla(9, 100%, 64%, 0.5)
<h3>Przykład</h3> 
<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>

Spróbuj sam

Dowiedz się więcej o wartościach kolorów

W następnym rozdziale nauczysz się o RGB,HEX i HSL Więcej informacji.