Χρώματα CSS

Πίνακας περιεχομένων

Τα χρώματα καθορίζονται χρησιμοποιώντας προκαθορισμένα ονόματα χρωμάτων ή τιμές RGB, HEX, HSL, RGBA, HSLA.

Ονόματα χρωμάτων CSS

Στο CSS, ένα χρώμα μπορεί να καθοριστεί χρησιμοποιώντας ένα προκαθορισμένο όνομα χρώματος:

Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
LightGray

Δοκιμάστε το μόνοι σας →

<!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 υποστηρίζει 140 τυπικά ονόματα χρωμάτων.

Χρώμα φόντου CSS

Μπορείτε να ορίσετε το χρώμα φόντου για στοιχεία 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.

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

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

Χρώμα κειμένου CSS

Μπορείτε να ορίσετε το χρώμα του κειμένου:

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.

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

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

Χρώμα περιγράμματος CSS

Μπορείτε να ορίσετε το χρώμα των περιγραμμάτων:

Hello World

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

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

Τιμές χρώματος CSS

Στο CSS, τα χρώματα μπορούν επίσης να καθοριστούν χρησιμοποιώντας τιμές RGB, τιμές HEX, HSL τιμές, τιμές RGBA και τιμές HSLA:

Ίδιο με το όνομα χρώματος "Tomato":

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

Ίδιο με το όνομα χρώματος "Tomato", αλλά 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>

Δοκιμάστε το μόνοι σας →

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

Μάθετε περισσότερα για τις τιμές χρώματος

Θα μάθετε περισσότερα για τα RGB, HEX και HSL στα επόμενα κεφάλαια.