Χρώματα CSS

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

    Εμφάνιση πίνακα περιεχομένων

Το CSS υποστηρίζει 140+ ονόματα χρωμάτων, τιμές HEX, τιμές RGB, RGBA τιμές, τιμές HSL, τιμές HSLA και αδιαφάνεια.

Χρώματα RGBA

Οι τιμές χρώματος RGBA είναι μια επέκταση των τιμών χρώματος RGB με ένα κανάλι άλφα - το οποίο καθορίζει την αδιαφάνεια για ένα χρώμα.

Μια τιμή χρώματος RGBA καθορίζεται με: rgba(κόκκινο, πράσινο, μπλε, άλφα). Η παράμετρος άλφα είναι ένας αριθμός μεταξύ 0,0 (πλήρως διαφανές) και 1.0 (πλήρως αδιαφανές).

rgba(255, 0, 0, 0.2);
rgba(255, 0, 0, 0.4);
rgba(255, 0, 0, 0.6);
rgba(255, 0, 0, 0.8);

Το ακόλουθο παράδειγμα ορίζει διαφορετικά χρώματα RGBA:

Παράδειγμα

#p1 {background-color: rgba(255, 0, 0, 0.3);}  /* red 
with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);}  /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);}  /* blue 
with opacity */

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

<!DOCTYPE html>
<html>
<head>
<style>
#p1 {background-color:rgba(255,0,0,0.3);}
#p2 {background-color:rgba(0,255,0,0.3);}
#p3 {background-color:rgba(0,0,255,0.3);}
#p4 {background-color:rgba(192,192,192,0.3);}
#p5 {background-color:rgba(255,255,0,0.3);}
#p6 {background-color:rgba(255,0,255,0.3);}
</style>
</head>
<body>

<h1>Define Colors With RGBA Values</h1>

<p id="p1">Red</p>
<p id="p2">Green</p>
<p id="p3">Blue</p>
<p id="p4">Grey</p>
<p id="p5">Yellow</p>
<p id="p6">Cerise</p>

</body>
</html>

Χρώματα HSL

Το HSL σημαίνει Hue, Saturation και Lightness.

Μια τιμή χρώματος HSL καθορίζεται με: hsl(απόχρωση, κορεσμός, ελαφρότητα).

  1. Η απόχρωση είναι μια μοίρα στον τροχό χρώματος (από 0 έως 360):

    • Το 0 (ή το 360) είναι κόκκινο

    • Το 120 είναι πράσινο

    • Το 240 είναι μπλε

  2. Ο κορεσμός είναι μια ποσοστιαία τιμή: 100% είναι το πλήρες χρώμα.

  3. Η ελαφρότητα είναι επίσης ένα ποσοστό? Το 0% είναι σκούρο (μαύρο) και το 100% είναι λευκό.

hsl(0, 100%, 30%);
hsl(0, 100%, 50%);
hsl(0, 100%, 70%);
hsl(0, 100%, 90%);

Το ακόλουθο παράδειγμα ορίζει διαφορετικά χρώματα HSL:

Παράδειγμα

#p1 {background-color: hsl(120, 100%, 50%);}  /* green */
#p2 {background-color: hsl(120, 100%, 75%);}  /* light green */
#p3 {background-color: hsl(120, 100%, 25%);}  /* dark 
green */
#p4 {background-color: hsl(120, 60%, 70%);}   /* pastel green */

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

<!DOCTYPE html>
<html>
<head>
<style>
#p1 {background-color:hsl(120,100%,50%);}
#p2 {background-color:hsl(120,100%,75%);}
#p3 {background-color:hsl(120,100%,25%);}
#p4 {background-color:hsl(120,60%,70%);}
#p5 {background-color:hsl(290,100%,50%);}
#p6 {background-color:hsl(290,60%,70%);}
</style>
</head>
<body>

<h1>Define Colors With HSL Values</h1>

<p id="p1">Green</p>
<p id="p2">Light green</p>
<p id="p3">Dark green</p>
<p id="p4">Pastel green</p>
<p id="p5">Violet</p>
<p id="p6">Pastel violet</p>

</body>
</html>

Χρώματα HSLA

Οι τιμές χρώματος HSLA είναι μια επέκταση των τιμών χρώματος HSL με ένα κανάλι άλφα - το οποίο καθορίζει την αδιαφάνεια για ένα χρώμα.

Μια τιμή χρώματος HSLA καθορίζεται με: hsla (απόχρωση, κορεσμός, ελαφρότητα, άλφα), όπου η Η παράμετρος άλφα ορίζει την αδιαφάνεια. Η παράμετρος άλφα είναι ένας αριθμός μεταξύ 0,0 (πλήρως διαφανής) και 1,0 (πλήρως αδιαφανής).

hsla(0, 100%, 30%, 0.3);
hsla(0, 100%, 50%, 0.3);
hsla(0, 100%, 70%, 0.3);
hsla(0, 100%, 90%, 0.3);

Το ακόλουθο παράδειγμα ορίζει διαφορετικά χρώματα HSLA:

Παράδειγμα

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}  /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}  /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}  /* dark 
green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}   /* pastel green 
with opacity */

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

<!DOCTYPE html>
<html>
<head>
<style>
#p1 {background-color:hsla(120,100%,50%,0.3);}
#p2 {background-color:hsla(120,100%,75%,0.3);}
#p3 {background-color:hsla(120,100%,25%,0.3);}
#p4 {background-color:hsla(120,60%,70%,0.3);}
#p5 {background-color:hsla(290,100%,50%,0.3);}
#p6 {background-color:hsla(290,60%,70%,0.3);}
</style>
</head>
<body>

<h1>Define Colors With HSLA Values</h1>

<p id="p1">Green</p>
<p id="p2">Light green</p>
<p id="p3">Dark green</p>
<p id="p4">Pastel green</p>
<p id="p5">Violet</p>
<p id="p6">Pastel violet</p>

</body>
</html>

Αδιαφάνεια

Η ιδιότητα opacity CSS ορίζει την αδιαφάνεια για ολόκληρο το στοιχείο (τόσο το χρώμα φόντου όσο και το κείμενο θα είναι αδιαφανή/διαφανή).

Η τιμή της ιδιότητας αδιαφάνεια πρέπει να είναι ένας αριθμός μεταξύ 0,0 (πλήρως διαφανές) και 1,0 (πλήρως αδιαφανής).

rgb(255, 0, 0);opacity:0.2;
rgb(255, 0, 0);opacity:0.4;
rgb(255, 0, 0);opacity:0.6;
rgb(255, 0, 0);opacity:0.8;

Σημειώστε ότι το παραπάνω κείμενο θα είναι επίσης διαφανές/αδιαφανές!

Το ακόλουθο παράδειγμα δείχνει διαφορετικά στοιχεία με αδιαφάνεια:

Παράδειγμα

#p1 {background-color:rgb(255,0,0);opacity:0.6;}  /* red with opacity 
*/
#p2 {background-color:rgb(0,255,0);opacity:0.6;}  /* green with 
opacity */
#p3 {background-color:rgb(0,0,255);opacity:0.6;}  /* blue 
with opacity */

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

<!DOCTYPE html>
<html>
<head>
<style>
#p1 {background-color:rgb(255,0,0);opacity:0.6;}
#p2 {background-color:rgb(0,255,0);opacity:0.6;}
#p3 {background-color:rgb(0,0,255);opacity:0.6;}
#p4 {background-color:rgb(192,192,192);opacity:0.6;}
#p5 {background-color:rgb(255,255,0);opacity:0.6;}
#p6 {background-color:rgb(255,0,255);opacity:0.6;}
</style>
</head>
<body>

<h1>Define Colors With Opacity</h1>

<p id="p1">Red</p>
<p id="p2">Green</p>
<p id="p3">Blue</p>
<p id="p4">Grey</p>
<p id="p5">Yellow</p>
<p id="p6">Cerise</p>

</body>
</html>