Η χρήση των χρωμάτων στις σελίδες μας τις κάνει πιο όμορφες και πιο ελκυστικές. Μπορούμε να βάλουμε χρώμα σε συνδέσμους, σε απλό κείμενο, σε ολόκληρο τον πίνακα ή σε ορισμένα κελιά αυτού. Μπορούμε επίσης να βάλουμε χρώμα στο φόντο όλης της σελίδας μας.
Υπάρχουν δύο τρόποι για να καθορίσουμε χρώματα:
1. Χρησιμοποιώντας ένα όνομα χρώματος από ένα σύνολο 16 προκαθορισμένων ονομάτων
2. Χρησιμοποιώντας το σύμβολο # ακολουθόμενο από έναν τριψήφιο δεκαεξαδικό αριθμό όπου κάθε ένα από τα τρία ψηφία είναι ένας διψήφιος δεκαεξαδικός αριθμός (π.χ. #CC99FF,). Ο κάθε ένας από τους τρεις διψήφιους δεκαεξαδικούς αριθμούς αντιπροσωπεύει την απόχρωση από τρία χρώματα: το Κόκκινο-Red, το Πράσινο-Green και το Μπλε-Blue και μπορεί να πάρει τιμές από 00 μέχρι FF. Το μοντέλο αυτό καθορισμού χρώματος λέγεται RGB (Red, Green, Blue).
Τον πρώτο τρόπο τον χρησιμοποιούμε κυρίως όταν θέλουμε ένα κύριο χρώμα και όχι μια απόχρωση. Υπάρχουν 16 κύρια χρώματα που μπορούμε να αναφερθούμε σε αυτά με τα όνομα τα τους:
Αν και τα ονόματα των χρωμάτων είναι εύκολα να τα θυμόμαστε, η χρήση τους δεν είναι τόσο ευέλικτη. Ακόμα και για έναν μέτρια απαιτητικό σχεδιαστή σελίδων τα 16 κύρια χρώματα είναι πολύ λίγα για να δώσει στο site του το στυλ που θέλει. Έτσι θα διαπιστώσετε και μόνοι σας ότι πολύ συχνά θα χρειάζεται να χρησιμοποιείτε αποχρώσεις των κύριων χρωμάτων κι' έτσι θα καταφεύγετε στο μοντέλο RGB που είναι πιο ευέλικτο. Τα περισσότερα προγράμματα επεξεργασίας HTML σελίδων, αλλά και όλα τα προγράμματα επεξεργασίας εικόνας και γραφικών, διαθέτουν μια παλέτα χρωμάτων με την οποία όταν επιλέγουμε το χρώμα που θέλουμε να χρησιμοποιήσουμε, εμφανίζει σε κάποιο σημείο την τιμή RGB την οποιά μπορούμε να χρησιμοποιήσουμε στην σελίδα μας.Στον παρακάτω πίνακα παρουσιάζονται μερικά χρώματα με το μοντέλο RGB
Υπάρχουν δύο τρόποι για να καθορίσουμε χρώματα:
1. Χρησιμοποιώντας ένα όνομα χρώματος από ένα σύνολο 16 προκαθορισμένων ονομάτων
2. Χρησιμοποιώντας το σύμβολο # ακολουθόμενο από έναν τριψήφιο δεκαεξαδικό αριθμό όπου κάθε ένα από τα τρία ψηφία είναι ένας διψήφιος δεκαεξαδικός αριθμός (π.χ. #CC99FF,). Ο κάθε ένας από τους τρεις διψήφιους δεκαεξαδικούς αριθμούς αντιπροσωπεύει την απόχρωση από τρία χρώματα: το Κόκκινο-Red, το Πράσινο-Green και το Μπλε-Blue και μπορεί να πάρει τιμές από 00 μέχρι FF. Το μοντέλο αυτό καθορισμού χρώματος λέγεται RGB (Red, Green, Blue).
Τον πρώτο τρόπο τον χρησιμοποιούμε κυρίως όταν θέλουμε ένα κύριο χρώμα και όχι μια απόχρωση. Υπάρχουν 16 κύρια χρώματα που μπορούμε να αναφερθούμε σε αυτά με τα όνομα τα τους:
| aqua | black | blue | fuchsia |
|---|---|---|---|
| green | gray | lime | maroon |
| navy | olive | purple | red |
| silver | teal | white | yellow |
Αν και τα ονόματα των χρωμάτων είναι εύκολα να τα θυμόμαστε, η χρήση τους δεν είναι τόσο ευέλικτη. Ακόμα και για έναν μέτρια απαιτητικό σχεδιαστή σελίδων τα 16 κύρια χρώματα είναι πολύ λίγα για να δώσει στο site του το στυλ που θέλει. Έτσι θα διαπιστώσετε και μόνοι σας ότι πολύ συχνά θα χρειάζεται να χρησιμοποιείτε αποχρώσεις των κύριων χρωμάτων κι' έτσι θα καταφεύγετε στο μοντέλο RGB που είναι πιο ευέλικτο. Τα περισσότερα προγράμματα επεξεργασίας HTML σελίδων, αλλά και όλα τα προγράμματα επεξεργασίας εικόνας και γραφικών, διαθέτουν μια παλέτα χρωμάτων με την οποία όταν επιλέγουμε το χρώμα που θέλουμε να χρησιμοποιήσουμε, εμφανίζει σε κάποιο σημείο την τιμή RGB την οποιά μπορούμε να χρησιμοποιήσουμε στην σελίδα μας.Στον παρακάτω πίνακα παρουσιάζονται μερικά χρώματα με το μοντέλο RGB
| #000000 | #000033 | #000066 | #000099 | #0000CC | #0000FF |
| #003300 | #003333 | #003366 | #003399 | #0033CC | #0033FF |
| #006600 | #006633 | #006666 | #006699 | #0066CC | #0066FF |
| #009900 | #009933 | #009966 | #009999 | #0099CC | #0099FF |
| #00CC00 | #00CC33 | #00CC66 | #00CC99 | #00CCCC | #00CCFF |
| #00FF00 | #00FF33 | #00FF66 | #00FF99 | #00FFCC | #00FFFF |
| #330000 | #330033 | #330066 | #330099 | #3300CC | #3300FF |
| #333300 | #333333 | #333366 | #333399 | #3333CC | #3333FF |
| #336600 | #336633 | #336666 | #336699 | #3366CC | #3366FF |
| #339900 | #339933 | #339966 | #339999 | #3399CC | #3399FF |
| #33CC00 | #33CC33 | #33CC66 | #33CC99 | #33CCCC | #33CCFF |
| #33FF00 | #33FF33 | #33FF66 | #33FF99 | #33FFCC | #33FFFF |
| #660000 | #660033 | #660066 | #660099 | #6600CC | #6600FF |
| #663300 | #663333 | #663366 | #663399 | #6633CC | #6633FF |
| #666600 | #666633 | #666666 | #666699 | #6666CC | #6666FF |
| #669900 | #669933 | #669966 | #669999 | #6699CC | #6699FF |
| #66CC00 | #66CC33 | #66CC66 | #66CC99 | #66CCCC | #66CCFF |
| #66FF00 | #66FF33 | #66FF66 | #66FF99 | #66FFCC | #66FFFF |
| #990000 | #990033 | #990066 | #990099 | #9900CC | #9900FF |
| #993300 | #993333 | #993366 | #993399 | #9933CC | #9933FF |
| #996600 | #996633 | #996666 | #996699 | #9966CC | #9966FF |
| #999900 | #999933 | #999966 | #999999 | #9999CC | #9999FF |
| #99CC00 | #99CC33 | #99CC66 | #99CC99 | #99CCCC | #99CCFF |
| #99FF00 | #99FF33 | #99FF66 | #99FF99 | #99FFCC | #99FFFF |
| #CC0000 | #CC0033 | #CC0066 | #CC0099 | #CC00CC | #CC00FF |
| #CC3300 | #CC3333 | #CC3366 | #CC3399 | #CC33CC | #CC33FF |
| #CC6600 | #CC6633 | #CC6666 | #CC6699 | #CC66CC | #CC66FF |
| #CC9900 | #CC9933 | #CC9966 | #CC9999 | #CC99CC | #CC99FF |
| #CCCC00 | #CCCC33 | #CCCC66 | #CCCC99 | #CCCCCC | #CCCCFF |
| #CCFF00 | #CCFF33 | #CCFF66 | #CCFF99 | #CCFFCC | #CCFFFF |
| #FF0000 | #FF0033 | #FF0066 | #FF0099 | #FF00CC | #FF00FF |
| #FF3300 | #FF3333 | #FF3366 | #FF3399 | #FF33CC | #FF33FF |
| #FF6600 | #FF6633 | #FF6666 | #FF6699 | #FF66CC | #FF66FF |
| #FF9900 | #FF9933 | #FF9966 | #FF9999 | #FF99CC | #FF99FF |
| #FFCC00 | #FFCC33 | #FFCC66 | #FFCC99 | #FFCCCC | #FFCCFF |
| #FFFF00 | #FFFF33 | #FFFF66 | #FFFF99 | #FFFFCC | #FFFFFF |
Στην HTML5 έχουν καταργθεί όλες οι ιδιότητες που ορίζουν χρώμα στα στοιχεία μιας σελίδας. Πλέον χρησιμοποιούμε CSS για να ορίσουμε χρώμα
Σχετικά Θέματα
Χρώμα σε όλο τον πίνακα, στην γραμμή, στο κελί Μπορούμε να βάλουμε χρώμα σε όλο τον πίνακα ή σε μια γραμμή του πίνακα ή σε ένα κελί του πίνακα, ανάλογα που θα τοποθετήσουμε την ιδιότητα bgcolor ( δηλαδή ή στην ετικέτα <table> ή στην <tr> ή στην <td> ). Δοκίμασε να αλλάξεις το χρώμα των συνδέσμων για όλη την σελίδα χρησιμοποιώντας και τους δύο τρόπους καθορισμού χρώματος. Μάθετε περισσότερα για τους Πίνακες
Αλλαγή του χρώματος φόντου της σελίδας Η ετικέτα <body> περιλαμβάνει την ιδιότητα bgcolor με την οποία ορίζουμε το χρώμα του φόντου όλης της σελίδας. Δοκίμασε να αλλάξεις το χρώμα του φόντου χρησιμοποιώντας και τους δύο τρόπους καθορισμού χρώματος.
Αλλαγή του χρώματος του κειμένου για όλη την σελίδα Η ετικέτα <body> περιλαμβάνει την ιδιότητα text με την οποία ορίζουμε το χρώμα του κειμένου για όλη την σελίδα. Δοκίμασε να αλλάξεις το χρώμα του κειμένου για όλη την σελίδα χρησιμοποιώντας και τους δύο τρόπους καθορισμού χρώματος.
Αλλαγή του χρώματος των συνδέσμων για όλη την σελίδα Η ετικέτα <body> περιλαμβάνει τις ιδιότητες link, vlink και alink. Η ιδιότητα link ορίζει το χρώμα των κανονικών συνδέσμων που ο χρήστης δεν έχει επισκεφτεί στο παρελθόν (οι σύνδεσμοι που εξ ορισμού εμφανίζονται μπλε). Η ιδιότητα vlink (visited link) ορίζει το χρώμα των συνδέσμων που ο χρήστης έχει επισκεφτεί στο παρελθόν (οι σύνδεσμοι που εξ ορισμού εμφανίζονται Μοβ ή Κόκκινοι). Η ιδιότητα alink (active link) ορίζει το χρώμα ενός συνδέσμου πάνω στον οποίον έχετε κάνει κλικ και δεν έχετε ακόμη ελευθερώσει του κουμπί του ποντικιού(αυτό λέγεται ενεργοποιημένος σύνδεσμος και εξ ορισμού συνήθως εμφανίζεται με κόκκινο χρώμα). Τα χρώματα που θα ορίσουμε στις παραπάνω ιδιότητες ισχύουν για κάθε σύνδεσμό που υπάρχει στην σελίδα. Δοκίμασε να αλλάξεις το χρώμα των συνδέσμων για όλη την σελίδα χρησιμοποιώντας και τους δύο τρόπους καθορισμού χρώματος.
Αλλαγή του χρώματος φόντου της σελίδας Η ετικέτα <body> περιλαμβάνει την ιδιότητα bgcolor με την οποία ορίζουμε το χρώμα του φόντου όλης της σελίδας. Δοκίμασε να αλλάξεις το χρώμα του φόντου χρησιμοποιώντας και τους δύο τρόπους καθορισμού χρώματος.
Αλλαγή του χρώματος του κειμένου για όλη την σελίδα Η ετικέτα <body> περιλαμβάνει την ιδιότητα text με την οποία ορίζουμε το χρώμα του κειμένου για όλη την σελίδα. Δοκίμασε να αλλάξεις το χρώμα του κειμένου για όλη την σελίδα χρησιμοποιώντας και τους δύο τρόπους καθορισμού χρώματος.
Αλλαγή του χρώματος των συνδέσμων για όλη την σελίδα Η ετικέτα <body> περιλαμβάνει τις ιδιότητες link, vlink και alink. Η ιδιότητα link ορίζει το χρώμα των κανονικών συνδέσμων που ο χρήστης δεν έχει επισκεφτεί στο παρελθόν (οι σύνδεσμοι που εξ ορισμού εμφανίζονται μπλε). Η ιδιότητα vlink (visited link) ορίζει το χρώμα των συνδέσμων που ο χρήστης έχει επισκεφτεί στο παρελθόν (οι σύνδεσμοι που εξ ορισμού εμφανίζονται Μοβ ή Κόκκινοι). Η ιδιότητα alink (active link) ορίζει το χρώμα ενός συνδέσμου πάνω στον οποίον έχετε κάνει κλικ και δεν έχετε ακόμη ελευθερώσει του κουμπί του ποντικιού(αυτό λέγεται ενεργοποιημένος σύνδεσμος και εξ ορισμού συνήθως εμφανίζεται με κόκκινο χρώμα). Τα χρώματα που θα ορίσουμε στις παραπάνω ιδιότητες ισχύουν για κάθε σύνδεσμό που υπάρχει στην σελίδα. Δοκίμασε να αλλάξεις το χρώμα των συνδέσμων για όλη την σελίδα χρησιμοποιώντας και τους δύο τρόπους καθορισμού χρώματος.
