Χρώματα CSS

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

Όνομα χρώματος CSS

Στην CSS, μπορείτε να χρησιμοποιήσετε ονόματα χρωμάτων για να καθορίσετε χρώματα:

Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
Φωτεινό Γκρι

Δοκιμάστε το προσωπικά

Υποστήριξη CSS/HTML 140 τυπικά ονόματα χρώματος。

Χρώμα παρασκηνίου CSS

Μπορείτε να ρυθμίσετε το χρώμα του παρασκηνίου για το στοιχείο HTML:

Καλωσορίσατε στην Κίνα
Η Κίνα είναι μια μεγάλη χώρα!

παράδειγμα

<h1 style="background-color:Δωδώνη του Αιγαίου;">Κίνα</h1>
<p style="background-color:Κόκκινο Τμαθιάς;">Η Κίνα είναι μια μεγάλη χώρα!</p>

Δοκιμάστε το προσωπικά

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

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

Κίνα

Η Κίνα είναι μια μεγάλη χώρα!

Η Κίνα, επίσημα η Λαϊκή Δημοκρατία της Κίνας, είναι μια χώρα στην Ανατολική Ασία.

παράδειγμα

<h1 style="color:Κόκκινο Τμαθιάς;">Κίνα</h1>
<p style="color:Δωδώνη του Αιγαίου;">Η Κίνα είναι μια μεγάλη χώρα!</p>
<p style="color:Μέσος Αιγαίο Πράσινο;">Κίνα, επίσημα η Λαϊκή Δημοκρατία της Κίνας...</p>

Δοκιμάστε το προσωπικά

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

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

Γεια σου Κόσμε
Γεια σου Κόσμε
Γεια σου Κόσμε

παράδειγμα

<h1 style="border:2px solid Κόκκινο Τμαθιάς;">Γεια σου Κόσμε</h1>
<h1 style="border:2px solid Δωδώνη του Αιγαίου;">Γεια σου Κόσμε</h1>
<h1 style="border:2px solid Βιόλα;">Γεια σου Κόσμε</h1>

Δοκιμάστε το προσωπικά

Τιμές Χρωμάτων 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)
<h3>παράδειγμα</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>

Δοκιμάστε το προσωπικά

Για να μάθετε περισσότερα για τις τιμές των χρωμάτων

Στο επόμενο κεφάλαιο, θα μάθετε για RGB、HEX και HSL Περισσότερες γνώσεις.