Χρώματα στην HTML
Τα χρώματα στην HTML καθορίζονται με προκαθορισμένα ονόματα χρωμάτων ή με τιμές RGB, HEX, HSL, RGBA ή HSLA.
Παραδείγματα:
- Προκαθορισμένο όνομα χρώματος:
<p style="color: red;">Κόκκινο κείμενο</p>
- HEX τιμή:
<p style="color: #ff0000;">Κόκκινο κείμενο</p>
- RGB τιμή:
<p style="color: rgb(255, 0, 0);">Κόκκινο κείμενο</p>
- HSL τιμή:
<p style="color: hsl(0, 100%, 50%);">Κόκκινο κείμενο</p>
- RGBA τιμή:
<p style="color: rgba(255, 0, 0, 0.5);">Ημιδιαφανές κόκκινο κείμενο</p>
- HSLA τιμή:
<p style="color: hsla(0, 100%, 50%, 0.5);">Ημιδιαφανές κόκκινο κείμενο</p>
Στα παραπάνω παραδείγματα, η ιδιότητα “style” χρησιμοποιείται για να οριστεί το χρώμα του κειμένου με διαφορετικούς τρόπους, χρησιμοποιώντας προκαθορισμένα ονόματα χρωμάτων, HEX, RGB, HSL, RGBA ή HSLA τιμές.
[adinserter block=”2″]
Ονόματα Χρωμάτων
Στην HTML, ένα χρώμα μπορεί να καθοριστεί χρησιμοποιώντας το όνομα ενός χρώματος:
<p style="color: red;">Κόκκινο κείμενο</p>
Η παραπάνω γραμμή κώδικα ορίζει το χρώμα του κειμένου σε κόκκινο, χρησιμοποιώντας το όνομα του χρώματος “red”. Άλλα παραδείγματα ονομάτων χρωμάτων περιλαμβάνουν το “blue”, “green”, “yellow”, “orange”, “purple”, “pink”, κ.λπ.
Παρόλο που οι προκαθορισμένα ονόματα χρωμάτων είναι εύκολοι στη χρήση, η παλέτα των διαθέσιμων χρωμάτων είναι περιορισμένη. Για αυτόν τον λόγο, συνήθως χρησιμοποιούνται τιμές HEX, RGB, HSL, RGBA ή HSLA για να καθοριστούν πιο συγκεκριμένα τα χρώματα.
Χρώμα Φόντου
Μπορείτε να ορίσετε το χρώμα φόντου για στοιχεία της HTML:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body style="background-color: lightblue">
<h1>Κεντρική Σελίδα</h1>
<p>Καλώς ήρθατε στην ιστοσελίδα μας.</p>
</body>
</html>
Στο παραπάνω παράδειγμα, ορίζουμε το χρώμα φόντου για το στοιχείο “body” σε ανοιχτό μπλε χρησιμοποιώντας την ιδιότητα “background-color”. Οποιοδήποτε στοιχείο που βρίσκεται μέσα στο “body” θα έχει το ίδιο χρώμα φόντου, εκτός αν ορίσουμε διαφορετικό χρώμα φόντου για το συγκεκριμένο στοιχείο.
Το χρώμα φόντου μπορεί να καθοριστεί επίσης με τιμές HEX, RGB, HSL, RGBA ή HSLA, με παρόμοιο τρόπο με τον ορισμό του χρώματος κειμένου.
Χρώμα Κειμένου
Μπορείτε να ορίσετε το χρώμα του κειμένου:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<p style="color: red">Hello World</p>
<p style="color: #0000ff">
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: green">
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p>
</body>
</html>
Στο παραπάνω παράδειγμα, ορίζουμε το χρώμα κειμένου για τις τρεις παραγράφους με διαφορετικά χρώματα, χρησιμοποιώντας την ιδιότητα “color”. Η πρώτη παράγραφος έχει κόκκινο χρώμα, η δεύτερη έχει μπλε χρώμα με HEX τιμή και η τρίτη έχει πράσινο χρώμα.
[adinserter block=”3″]
Επίσης, μπορείτε να καθορίσετε το χρώμα κειμένου χρησιμοποιώντας τις τιμές RGB, HSL, RGBA ή HSLA, όπως είχαμε αναφέρει και προηγουμένως.
Χρώμα Περιγράμματος
Μπορείτε να ορίσετε το χρώμα περιγράμματος:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<p style="border: 2px solid red">Κείμενο με κόκκινο περίγραμμα</p>
<div style="border: 2px solid green">Πλαίσιο με πράσινο περίγραμμα</div>
<button style="border: 2px solid yellow">
Κουμπί με κίτρινο περίγραμμα
</button>
</body>
</html>
Στο παραπάνω παράδειγμα, ορίζουμε το χρώμα περιγράμματος για διάφορα στοιχεία HTML, χρησιμοποιώντας την ιδιότητα “border” με τιμές πάχους περιγράμματος (πχ 2px), τύπου περιγράμματος (πχ solid) και χρώματος περιγράμματος (πχ red, green, blue, yellow). Τα παραπάνω στοιχεία που δημιουργούνται είναι αντίστοιχα ένα κείμενο, ένα πλαίσιο, μια εικόνα και ένα κουμπί, τα οποία καλύπτονται από ένα περίγραμμα με διαφορετικό χρώμα σε κάθε περίπτωση.
Τιμές Χρωμάτων
Στην HTML, τα χρώματα μπορούν επίσης να καθοριστούν χρησιμοποιώντας τιμές RGB, HEX, HSL, RGBA και HSLA.
Τα παρακάτω τρία στοιχεία <div> έχουν οριστεί το χρώμα φόντου τους με τιμές RGB, HEX και HSL:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<div style="background-color: rgb(255, 0, 0)">
Red background using RGB values
</div>
<div style="background-color: #0000ff">Blue background using HEX value</div>
<div style="background-color: hsl(120, 100%, 50%)">
Green background using HSL value
</div>
</body>
</html>
Στο παραπάνω παράδειγμα, οι τρεις <div> έχουν διαφορετικό χρώμα φόντου, ορισμένο με τιμές RGB, HEX και HSL αντίστοιχα. Σημειώστε ότι οι τιμές RGB καθορίζονται χρησιμοποιώντας τρεις αριθμούς με τιμές από 0 έως 255 για το κόκκινο, το πράσινο και το μπλε χρώμα αντίστοιχα. Τα HEX χρώματα αποτελούνται από έξι ψηφία, με τιμές από 0 έως F, καθώς και οι τιμές HSL καθορίζονται με τρεις τιμές – έναν αριθμό για την απόχρωση, έναν για την κορεσμότητα και έναν για τη φωτεινότητα.
Στα παρακάτω δύο στοιχεία <div> ορίζεται το χρώμα του φόντου τους με τιμές RGBA και HSLA, που προσθέτουν ένα κανάλι Alpha στο χρώμα (στο παρακάτω παράδειγμα έχουμε 50% διαφάνεια):
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<div style="background-color: rgba(255, 0, 0, 0.5)">
Red background using RGBA value
</div>
<div style="background-color: hsla(120, 100%, 50%, 0.5)">
Green background using HSLA value
</div>
</body>
</html>
Στο παραπάνω παράδειγμα, τα δύο <div> έχουν το χρώμα τους καθορισμένο με τιμές RGBA και HSLA αντίστοιχα. Σημειώστε ότι οι τιμές RGBA καθορίζονται χρησιμοποιώντας τέσσερις αριθμούς, όπου ο πρώτος αριθμός είναι για το κόκκινο, ο δεύτερος για το πράσινο, ο τρίτος για το μπλε χρώμα και ο τέταρτος για τη διαφάνεια. Η τιμή της διαφάνειας είναι ανάμεσα σε 0 και 1, όπου 0 σημαίνει πλήρη διαφάνεια και 1 σημαίνει απόλυτη αδιαφάνεια. Οι τιμές HSLA έχουν μια παρόμοια μορφή με τις τιμές HSLA, με την προσθήκη μιας τιμής διαφάνειας στο τέλος.
HTML Χρώματα RGB και RGBA
Μια τιμή χρώματος RGB αναπαριστά το κόκκινο, το πράσινο και το μπλε φωτισμό.
[adinserter block=”4″]
Μια τιμή χρώματος RGBA είναι μια επέκταση του RGB με ένα κανάλι Alpha (διαφάνεια). Ο κανάλι Alpha καθορίζει το επίπεδο διαφάνειας του χρώματος. Η τιμή του καναλιού Alpha είναι ανάμεσα σε 0 (απόλυτα διαφανές) και 1 (απόλυτα αδιαφανές). Όταν η τιμή του καναλιού Alpha είναι 0, το χρώμα είναι αόρατο.
Τιμές Χρωμάτων RGB
Στην HTML, ένα χρώμα μπορεί να καθοριστεί ως τιμή RGB, χρησιμοποιώντας τον ακόλουθο τύπο:
rgb(κόκκινο, πράσινο, μπλε)
Κάθε παράμετρος (κόκκινο, πράσινο και μπλε) καθορίζει την ένταση του χρώματος με μια τιμή ανάμεσα σε 0 και 255.
Αυτό σημαίνει ότι υπάρχουν 256 x 256 x 256 = 16777216 πιθανά χρώματα!
Για παράδειγμα, το rgb(255, 0, 0) εμφανίζεται ως κόκκινο, επειδή το κόκκινο έχει οριστεί στην υψηλότερη τιμή του (255), και οι άλλες δύο τιμές (πράσινο και μπλε) είναι 0.
Ένα άλλο παράδειγμα, το rgb(0, 255, 0) εμφανίζεται ως πράσινο, επειδή το πράσινο έχει οριστεί στην υψηλότερη τιμή του (255), και οι άλλες δύο τιμές (κόκκινο και μπλε) είναι 0.
Για να εμφανιστεί μαύρο χρώμα, ορίστε όλες τις παραμέτρους του χρώματος σε 0, όπως αυτό: rgb(0, 0, 0).
Για να εμφανιστεί άσπρο χρώμα, ορίστε όλες τις παραμέτρους του χρώματος σε 255, όπως αυτό: rgb(255, 255, 255).
Οι αποχρώσεις του γκρι συνήθως καθορίζονται χρησιμοποιώντας ίσες τιμές για όλες τις τρεις παραμέτρους:
rgb(128, 128, 128) <!-- medium gray --> rgb(192, 192, 192) <!-- light gray --> rgb(64, 64, 64) <!-- dark gray -->
Οι αποχρώσεις του γκρι έχουν ίσες τιμές σε όλες τις παραμέτρους του χρώματος RGB. Μπορείτε να δημιουργήσετε διάφορες αποχρώσεις του γκρι, αλλάζοντας τις τιμές των παραμέτρων μέσα στο εύρος 0-255.
Οι τιμές χρώματος RGBA είναι μια επέκταση των τιμών χρώματος RGB με ένα κανάλι Alpha – που καθορίζει τη διαφάνεια ενός χρώματος.
Μια τιμή χρώματος RGBA καθορίζεται ως εξής:
rgba(red, green, blue, alpha)
Η παράμετρος alpha είναι ένας αριθμός ανάμεσα στο 0,0 (πλήρως διαφανές) και 1,0 (καθόλου διαφανές):
rgba(255, 0, 0, 0.5) <!-- 50% transparent red --> rgba(0, 255, 0, 0.2) <!-- 20% transparent green --> rgba(0, 0, 255, 0.8) <!-- 80% transparent blue -->
Μπορείτε να χρησιμοποιήσετε τις τιμές RGBA για να καθορίσετε ένα χρώμα με συγκεκριμένη διαφάνεια.
Ένα δεκαεξαδικό χρώμα καθορίζεται με τον τύπο #RRGGBB, όπου οι δεκαεξαδικοί ακέραιοι RR (κόκκινο), GG (πράσινο) και BB (μπλε) καθορίζουν τα συστατικά του χρώματος.
Οι δεκαεξαδικοί αριθμοί χρησιμοποιούνται στην HTML για να καθορίσουν τις τιμές του χρώματος. Τα δεκαεξαδικά χρησιμοποιούν τους αριθμούς 0-9 και τα γράμματα A-F, για να καθορίσουν τις τιμές ανάμεσα στο 0 και στο 255.
Για παράδειγμα, το #FF0000 αντιστοιχεί στο κόκκινο (FF = 255 στο δεκαδικό), ενώ το #00FF00 αντιστοιχεί στο πράσινο (FF = 255 στο δεκαδικό) και το #0000FF αντιστοιχεί στο μπλε (FF = 255 στο δεκαδικό).
Μπορείτε να χρησιμοποιήσετε τις τιμές HEX για να καθορίσετε ένα χρώμα στην HTML.
Στην HTML, μπορείτε να καθορίσετε ένα χρώμα χρησιμοποιώντας μια δεκαεξαδική τιμή στη μορφή:
#rrggbb
Όπου rr (κόκκινο), gg (πράσινο) και bb (μπλε) είναι δεκαεξαδικές τιμές μεταξύ 00 και ff (ίδια με δεκαδικό 0-255).
Για παράδειγμα, το #ff0000 εμφανίζεται ως κόκκινο, επειδή το κόκκινο είναι ρυθμισμένο στην υψηλότερη τιμή του (ff), και τα άλλα δύο (πράσινο και μπλε) είναι ρυθμισμένα σε 00.
Ένα άλλο παράδειγμα, το #00ff00 εμφανίζεται ως πράσινο, επειδή το πράσινο είναι ρυθμισμένο στην υψηλότερη τιμή του (ff), και τα άλλα δύο (κόκκινο και μπλε) είναι ρυθμισμένα σε 00.
Για να εμφανίσετε μαύρο, ρυθμίστε όλες τις παραμέτρους χρώματος σε 00, όπως αυτό: #000000.
Για να εμφανίσετε λευκό, ρυθμίστε όλες τις παραμέτρους χρώματος σε ff, όπως αυτό: #ffffff.
[adinserter block=”5″]
Οι αποχρώσεις του γκρι συνήθως καθορίζονται με ίσες τιμές για όλες τις τρεις παραμέτρους:
#333333 <!-- dark gray --> #666666 <!-- medium gray --> #999999 <!-- light gray --> #CCCCCC <!-- very light gray -->
Μπορείτε να προσαρμόσετε την απόχρωση του γκρι αλλάζοντας την τιμή των δεκαεξαδικών αριθμών.
Τα HSL σημαίνουν απόχρωση (hue), κορεσμό (saturation) και φωτεινότητα (lightness).
Τα HSLA είναι μια επέκταση των HSL με ένα κανάλι Alpha (διαφάνεια). Οι τιμές τους καθορίζονται με τη μορφή:
hsl(hue, saturation, lightness) hsla(hue, saturation, lightness, alpha)
Στο HSL, η απόχρωση εκφράζεται σε μοίρες (degrees), ενώ η κορεσμένοτητα και η φωτεινότητα εκφράζονται σε ποσοστά (%).
Οι τιμές της απόχρωσης ποικίλλουν από 0 έως 360, όπου το κόκκινο αντιστοιχεί στο 0, το πράσινο στο 120 και το μπλε στο 240.
Παρακάτω υπάρχει ένα παράδειγμα:
<!-- HSL color --> <div style="background-color: hsl(120, 100%, 50%); color: white"> This is a background color in HSL format. </div> <!-- HSLA color --> <div style="background-color: hsla(240, 100%, 50%, 0.5); color: white"> This is a background color in HSLA format with 50% opacity. </div>
Η πρώτη διαμόρφωση εμφανίζει ένα πράσινο χρώμα με μέση φωτεινότητα, ενώ η δεύτερη διαμόρφωση εμφανίζει ένα μπλε χρώμα με μέση φωτεινότητα και 50% διαφάνεια.
Στην HTML, ένα χρώμα μπορεί να καθοριστεί χρησιμοποιώντας το HSL (Hue, Saturation, Lightness) στη μορφή:
hsl(απόχρωση, κορεσμός, φωτεινότητα)
Η απόχρωση εκφράζεται σε μοίρες στον κύκλο του χρώματος, από 0 έως 360. Το 0 αντιστοιχεί στο κόκκινο, το 120 στο πράσινο και το 240 στο μπλε.
Η κορεσμένοτητα εκφράζεται σε ποσοστά. Το 0% σημαίνει απόχρωση του γκρι, ενώ το 100% αντιστοιχεί στο πλήρες χρώμα.
Η φωτεινότητα είναι επίσης ποσοστιαία τιμή. Το 0% είναι μαύρο, ενώ το 100% είναι λευκό.
Παρακάτω υπάρχει ένα παράδειγμα:
<!-- HSL color --> <div style="background-color: hsl(120, 100%, 50%); color: white"> Αυτό είναι ένα χρώμα φόντου σε μορφή HSL. </div>
Η παραπάνω διαμόρφωση εμφανίζει ένα πράσινο χρώμα με μέση φωτεινότητα.
Η κορεσμένοτητα (Saturation) περιγράφει την ένταση ενός χρώματος.
Στο 100% εμφανίζεται το πλήρες χρώμα χωρίς κανέναν αναμειγνυόμενο τόνο γκρι.
Στο 50% εμφανίζεται το χρώμα μαζί με μια ανάμειξη 50% γκρι.
Στο 0% εμφανίζεται ένα πλήρες γκρι χωρίς κανέναν τόνο χρώματος.
Η φωτεινότητα (Lightness) ενός χρώματος μπορεί να περιγραφεί ως πόσο φως θέλουμε να δώσουμε στο χρώμα, όπου το 0% σημαίνει κανένα φως (μαύρο), το 50% σημαίνει 50% φωτεινότητα (ούτε σκούρο ούτε ανοιχτό), και το 100% σημαίνει πλήρη φωτεινότητα (λευκό).
Τα αποχρώματα του γκρι συνήθως καθορίζονται θέτοντας την απόχρωση (hue) και την κορεσμένοτητα (saturation) στο 0, και προσαρμόζοντας την φωτεινότητα (lightness) από το 0% έως το 100% για να πάρουμε πιο σκούρα / ανοιχτά αποχρώσεις:
<!-- Αποχρώσεις του γκρι με διαφορετική φωτεινότητα --> <div style="background-color: hsl(0, 0%, 0%)">Μαύρο</div> <div style="background-color: hsl(0, 0%, 25%)">Σκούρο Γκρι</div> <div style="background-color: hsl(0, 0%, 50%)">Γκρι</div> <div style="background-color: hsl(0, 0%, 75%)">Ανοιχτό Γκρι</div> <div style="background-color: hsl(0, 0%, 100%)">Λευκό</div>
Στο παραπάνω παράδειγμα, η απόχρωση (hue) και η κορεσμένοτητα (saturation) είναι ίσες με 0, και η φωτεινότητα (lightness) προσαρμόζεται για να δημιουργήσει διαφορετικές αποχρώσεις του γκρι.
Οι τιμές HSLA είναι μια επέκταση των τιμών HSL με τη χρήση ενός καναλιού Alpha που καθορίζει τη διαφάνεια ενός χρώματος.
Η τιμή HSLA καθορίζεται ως εξής:
hsla(hue, saturation, lightness, alpha)
Το κανάλι Alpha είναι ένας αριθμός μεταξύ 0.0 (πλήρως διαφανές) και 1.0 (πλήρως αδιαφανές):
<!-- Παράδειγμα HSLA με διαφορετικές τιμές διαφάνειας --> <div style="background-color: hsla(0, 100%, 50%, 1)">Πλήρες χρώμα</div> <div style="background-color: hsla(0, 100%, 50%, 0.5)">Μερικώς διαφανές</div> <div style="background-color: hsla(0, 100%, 50%, 0)">Πλήρως διαφανές</div>
Στο παραπάνω παράδειγμα, το χρώμα καθορίζεται από τις τιμές Hue, Saturation και Lightness, ενώ η διαφάνεια καθορίζεται από την τιμή Alpha. Μπορείτε να πειραματιστείτε με τις διαφορετικές τιμές για να δημιουργήσετε το επιθυμητό χρώμα με την επιθυμητή διαφάνεια.