CSS barvy

Obsah

    Zobrazit obsah

Barvy jsou specifikovány pomocí předdefinovaných názvů barev nebo hodnot RGB, HEX, HSL, RGBA, HSLA.

Názvy barev CSS

V CSS lze barvu určit pomocí předdefinovaného názvu barvy:

Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
LightGray

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1>

</body>
</html>

CSS/HTML podporuje 140 standardních názvů barev.

Barva pozadí CSS

Můžete nastavit barvu pozadí pro prvky HTML:

Hello World


Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Příklad

 <h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem 
  ipsum...</p>

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:DodgerBlue;">Hello World</h1>

<p style="background-color:Tomato;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p>

</body>
</html>

Barva textu CSS

Můžete nastavit barvu textu:

Hello World

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Příklad

 <h1 style="color:Tomato;">Hello 
  World</h1>
<p style="color:DodgerBlue;">Lorem 
  ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi 
  enim...</p>

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h3 style="color:Tomato;">Hello World</h3>

<p style="color:DodgerBlue;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<p style="color:MediumSeaGreen;">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

</body>
</html>

Barva ohraničení CSS

Můžete nastavit barvu okrajů:

Hello World

Hello World

Hello World

Příklad

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

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

Hodnoty barev CSS

V CSS lze barvy specifikovat také pomocí hodnot RGB, HEX hodnot, HSL hodnoty, hodnoty RGBA a hodnoty HSLA:

Stejné jako název barvy "Tomato":

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

Stejné jako název barvy „Tomato“, ale z 50 % průhledné:

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

Příklad

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

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<p>Same as color name "Tomato":</p>

<h1 style="background-color:rgb(255, 99, 71);">rgb(255, 99, 71)</h1>
<h1 style="background-color:#ff6347;">#ff6347</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">hsl(9, 100%, 64%)</h1>

<p>Same as color name "Tomato", but 50% transparent:</p>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">rgba(255, 99, 71, 0.5)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">hsla(9, 100%, 64%, 0.5)</h1>

<p>In addition to the predefined color names, colors can be specified using RGB, HEX, HSL, or even transparent colors using RGBA or HSLA color values.</p>

</body>
</html>

Další informace o hodnotách barev

Více o RGB, HEX a HSL se dozvíte v dalších kapitolách.