Διαδικτυακά χρώματα
Το σύστημα HTML, το οποίο αποτελεί την γλώσσα γραφής των ιστοσελίδων, χρησιμοποιεί για την απεικόνιση των χρωμάτων το μοντέλο RGB, στην δεκαεξαδική του μορφή. Υπάρχει επίσης η δυνατότητα να χρησιμοποιηθεί ένα χρώμα με το όνομά του στα αγγλικά σε μερικές περιπτώσεις.
Οι πρώτες εκδόσεις του Mosaic και του Netscape Navigator χρησιμοποιούσαν τα ονόματα χρωμάτων του συστήματος X11 ως βάση για τις χρωματικές τους λίστες, αφού και τα δύο ξεκίνησαν σαν προγράμματα για το X Window System. Η προέλευση της χρωματικής λίστας του X11 δεν είναι γνωστή. [1]
Χρωματικό μοντέλο RGB
ΕπεξεργασίαΤο χρωματικό μοντέλο RGB χρησμοποιεί μια ομάδα τριών αριθμών, την δεκαεξαδική τριπλέτα, για την απεικόνιση κάθε εικονοστοιχείου. Η δεκαεξαδική τριπλέτα είναι ένα εξαψήφιος δεκαεξαδικός αριθμός, τριών byte. Τα bytes αντιπροσωπεύουν την ένταση για το κόκκινο, το πράσινο και το μπλε μέρος του χρώματος. Το τελικό χρώμα προκύπτει από τον συνδυασμό των τριών. Ένα byte δείχνει ένα αριθμό μεταξύ 00 και FF (σε δεκαεξαδική γραφή), ή από 0 ως 255 σε δεκαδική γραφή. Η μορφή της δεκαεξαδικής τριπλέτας αποτελείται από τρία bytes στη σειρά, σε δεκαεξαδική γραφή, ως ακολούθως:
- 1ο Byte: ένταση κόκκινου
- 2ο Byte: ένταση πράσινου
- 3ο Byte: ένταση μπλε
Για παράδειγμα θεωρήστε το χρώμα red=36, green=104, blue=160 (ένας τόνος γκριζαρισμένου μπλε). Οι αριθμοί 36, 104 και 160 στο δεκαεξαδικό γράφονται 24, 68 και A0 αντίστοιχα. Για να φτιάξουμε τη δεκαεξαδική τριπλέτα, απλά γράφουμε τα τρία δεκαεξαδικά bytes μαζί χωρίς κενά, δηλαδή: 2468A0. Αν κάποιο byte είναι μικρότερό από το 10 (δεκαδικό) ή το 16 (δεκαεξαδικό) πρέπει να γράφεται με ένα 0 στην αρχή ώστε το byte να αποτελείται από 2 ψηφία, και η τριπλέτα να είναι εξαψήφια. Για παράδειγμα η δεκαδική τριπλέτα 0,1,2 γράφεται σαν δεκαεξαδική τριπλέτα ως 000102.
Καθιερωμένα ονόματα χρωμάτων
ΕπεξεργασίαΣύμφωνα με το πρότυπο HTML 4.01 ορίζονται δεκαέξι χρώματα με το όνομά τους, ως εξής:
Χρώμα | Δεκαεξαδικό | Χρώμα | Δεκαεξαδικό | Χρώμα | Δεκαεξαδικό | Χρώμα | Δεκαεξαδικό |
---|---|---|---|---|---|---|---|
black[1] | #000000 | silver | #c0c0c0 | maroon | #800000 | red | #ff0000 |
navy | #000080 | blue | #0000ff | purple | #800080 | fuchsia | #ff00ff |
green | #008000 | lime | #00ff00 | olive | #808000 | yellow | #ffff00 |
teal | #008080 | aqua | #00ffff | gray | #808080 | white | #ffffff |
Αποκλειστικά ονόματα χρωμάτων
ΕπεξεργασίαΕπιπρόσθετα, ένας αριθμός χρωμάτων καθορίζεται από τους φυλλομετρητές (browsers) όπως για παράδειγμα από τον Netscape ή από τον Internet Explorer. Ένας φυλλομετρητής ενδεχομένως να μην αναγνωρίζει όλα από αυτά τα χρώματα. Πολλά από αυτά προέρχονται από τη λίστα ονομάτων των χρωμάτων από το X11 το οποίο διανέμεται με το X Window System. Μερικά από αυτά μαζί με το δεκαεξαδικό τους αντίστοιχο φαίνονται παρακάτω.
Χρώμα | Δεκαεξαδικό | Χρώμα | Δεκαεξαδικό |
---|---|---|---|
indianred | #cd5c5c | darksalmon | #e9967a |
lightcoral | #f08080 | salmon | #fa8072 |
orangered | #ff4500 | red | #ff0000 |
crimson | #dc143c | firebrick | #b22222 |
darkred | #8b0000 | mediumvioletred | #c71585 |
pink | #ffc0cb | lightpink | #ffb6c1 |
hotpink | #ff69b4 | deeppink | #ff1493 |
palevioletred | #db7093 | darkkhaki | #bdb76b |
khaki | #f0e68c | palegoldenrod | #eee8aa |
lightgoldenrodyellow | #fafad2 | lightyellow | #ffffe0 |
lemonchiffon | #fffacd | yellow | #ffff00 |
gold | #ffd700 | papayawhip | #ffefd5 |
moccasin | #ffe4b5 | peachpuff | #ffdab9 |
cyan | #00ffff | aqua | #00ffff |
aquamarine | #7fffd4 | turquoise | #40e0d0 |
mediumturquoise | #48d1cc | darkturquoise | #00ced1 |
cadetblue | #5f9ea0 | slategray | #708090 |
lightcyan | #e0ffff | paleturquoise | #afeeee |
powderblue | #b0e0e6 | lightsteelblue | #b0c4de |
steelblue | #4682b4 | lightblue | #add8e6 |
skyblue | #87ceeb | lightskyblue | #87cefa |
deepskyblue | #00bfff | cornflowerblue | #6495ed |
royalblue | #4169e1 | mediumslateblue | #7b68ee |
dodgerblue | #1e90ff | blue | #0000ff |
mediumblue | #0000cd | darkblue | #00008b |
navy | #000080 | midnightblue | #191970 |
lightsalmon | #ffa07a | orange | #ffa500 |
darkorange | #ff8c00 | coral | #ff7f50 |
tomato | #ff6347 | orangered | #ff4500 |
aquamarine | #7fffd4 | mediumspringgreen | #00fa9a |
springgreen | #00ff7f | palegreen | #98fb98 |
greenyellow | #adff2f | chartreuse | #7fff00 |
lawngreen | #7cfc00 | lime | #00ff00 |
lightgreen | #90ee90 | yellowgreen | #9acd32 |
limegreen | #32cd32 | mediumseagreen | #3cb371 |
darkseagreen | #8fbc8f | forestgreen | #228b22 |
seagreen | #2e8b57 | green | #008000 |
olivedrab | #6b8e23 | olive | #808000 |
darkolivegreen | #556b2f | darkgreen | #006400 |
mediumaquamarine | #66cdaa | turquoise | #40e0d0 |
lightseagreen | #20b2aa | darkcyan | #008b8b |
teal | #008080 | lavender | #e6e6fa |
thistle | #d8bfd8 | plum | #dda0dd |
violet | #ee82ee | fuchsia | #ff00ff |
magenta | #ff00ff | orchid | #da70d6 |
mediumorchid | #ba55d3 | darkorchid | #9932cc |
blueviolet | #8a2be2 | darkviolet | #9400d3 |
mediumpurple | #9370db | slateblue | #6a5acd |
purple | #800080 | darkmagenta | #8b008b |
darkslateblue | #483d8b | indigo | #4b0082 |
honeydew | #f0fff0 | mintcream | #f5fffa |
azure | #f0ffff | aliceblue | #f0f8ff |
ghostwhite | #f8f8ff | whitesmoke | #f5f5f5 |
lavenderblush | #fff0f5 | mistyrose | #ffe4e1 |
antiquewhite | #faebd7 | seashell | #fff5ee |
snow | #fffafa | white | #ffffff |
beige | #f5f5dc | linen | #faf0e6 |
oldlace | #fdf5e6 | floralwhite | #fffaf0 |
ivory | #fffff0 | gainsboro | #dcdcdc |
lightgrey | #d3d3d3 | silver | #c0c0c0 |
darkgray | #a9a9a9 | gray | #808080 |
dimgray | #696969 | darkslategray | #2f4f4f |
lightslategray | #778899 | slategray | #708090 |
cornsilk | #fff8dc | blanchedalmond | #ffebcd |
bisque | #ffe4c4 | navajowhite | #ffdead |
wheat | #f5deb3 | sandybrown | #f4a460 |
goldenrod | #daa520 | darkgoldenrod | #b8860b |
peru | #cd853f | chocolate | #d2691e |
maroon | #800000 | saddlebrown | #8b4513 |
brown | #a52a2a | sienna | #a0522d |
darkred | #8b0000 | burlywood | #deb887 |
tan | #d2b48c | rosybrown | #bc8f8f |
black | #000000 |
Ασφαλή χρώματα για το διαδίκτυο
ΕπεξεργασίαΆλλο ένα σύνολο 216 τιμών χρωμάτων μπορεί να θεωρηθεί ως μία ασφαλής παλέττα για χρήση στο διαδίκτυο. Αναπτύχθηκε μία εποχή οπότε πολλές οθόνες ηλεκτρονικών υπολογιστών μπορούσαν να απεικονίσουν μόνο 256 χρώματα. Ήταν ανάγκη τότε να υπάρξει ένα σύνολο χρωμάτων, που θα απεικονιζόταν σε οθόνες 256 χρωμάτων χωρίς τη μέθοδο του dithering (η οποία χοντρικά τοποθετεί χρωματικό "θόρυβο" σε ενδιάμεσες τιμές χρωμάτων για να εξομαλύνει την εικόνα στο ανθρώπινο μάτι). Ο αριθμός των 216 χρωμάτων επιλέχτηκε μερικώς γιατί τα λειτουργικά συστήματα των υπολογιστών διατηρούσαν δεκαέξι με είκοσι χρώματα για δική τους χρήση. Ένας άλλος λόγος της εκλογής αυτής ήταν το ότι επέτρεπε την επιλογή έξι αποχρώσεων του κόκκινου του πράσινου και του μπλε (6 × 6 × 6 = 216). Η παλέττα αυτή προσδιορίστηκε για πρώτη φορά από την Lynda Weinman.
Τα ασφαλή για το διαδίκτυο χρώματα δεν έχουν ονόματα, αλλά το καθένα μπορεί να καθοριστεί από μία τριάδα τιμών RGB. Στον παρακάτω πίνακα, ένας τριψήφιος αριθμός χρησιμοποιείται ως συντομογραφία για τους εξαψήφιους δεκαεξαδικούς αριθμούς που αναφέρθηκαν παραπάνω. Το ψηφίο "3" αντιστοιχίζεται στον δεκαεξαδικό αριθμό "33". Το "C" αντιστοιχίζεται στο "CC". Για παράδειγμα, το "F63" στον πίνακα παρακάτω αντιστοιχίζεται στο "#FF6633" στο σύστημα που αναφέρθηκε προηγουμένως. Ο πίνακας δείχνει όλα τα χρώματα που θεωρούνται ασφαλή για χρήση στο διαδίκτυο με υπογραμμισμένα τα "'Πραγματικά ασφαλή χρώματα για χρήση στο διαδίκτυο" (βλ. επόμενη παράγραφο):
000 | 300 | 600 | 900 | C00 | F00 | 003 | 303 | 603 | 903 | C03 | F03 |
006 | 306 | 606 | 906 | C06 | F06 | 009 | 309 | 609 | 909 | C09 | F09 |
00C | 30C | 60C | 90C | C0C | F0C | 00F | 30F | 60F | 90F | C0F | F0F |
030 | 330 | 630 | 930 | C30 | F30 | 033 | 333 | 633 | 933 | C33 | F33 |
036 | 336 | 636 | 936 | C36 | F36 | 039 | 339 | 639 | 939 | C39 | F39 |
03C | 33C | 63C | 93C | C3C | F3C | 03F | 33F | 63F | 93F | C3F | F3F |
060 | 360 | 660 | 960 | C60 | F60 | 063 | 363 | 663 | 963 | C63 | F63 |
066 | 366 | 666 | 966 | C66 | F66 | 069 | 369 | 669 | 969 | C69 | F69 |
06C | 36C | 66C | 96C | C6C | F6C | 06F | 36F | 66F | 96F | C6F | F6F |
090 | 390 | 690 | 990 | C90 | F90 | 093 | 393 | 693 | 993 | C93 | F93 |
096 | 396 | 696 | 996 | C96 | F96 | 099 | 399 | 699 | 999 | C99 | F99 |
09C | 39C | 69C | 99C | C9C | F9C | 09F | 39F | 69F | 99F | C9F | F9F |
0C0 | 3C0 | 6C0 | 9C0 | CC0 | FC0 | 0C3 | 3C3 | 6C3 | 9C3 | CC3 | FC3 |
0C6 | 3C6 | 6C6 | 9C6 | CC6 | FC6 | 0C9 | 3C9 | 6C9 | 9C9 | CC9 | FC9 |
0CC | 3CC | 6CC | 9CC | CCC | FCC | 0CF | 3CF | 6CF | 9CF | CCF | FCF |
0F0 | 3F0 | 6F0 | 9F0 | CF0 | FF0 | 0F3 | 3F3 | 6F3 | 9F3 | CF3 | FF3 |
0F6 | 3F6 | 6F6 | 9F6 | CF6 | FF6 | 0F9 | 3F9 | 6F9 | 9F9 | CF9 | FF9 |
0FC | 3FC | 6FC | 9FC | CFC | FFC | 0FF | 3FF | 6FF | 9FF | CFF | FFF |
Πραγματικά ασφαλή χρώματα για το διαδίκτυο
ΕπεξεργασίαΣυχνά οι σχεδιαστές ενθαρρύνονταν να χρησιμοποιούν τα 216 "ασφαλή για το δίκτυο" χρώματα στις σελίδες τους - ωστόσο, οι οθόνες με 8-bit ανάλυση χρωμάτων δεν είναι και τόσο συνηθισμένες πια, όπως τότε που αναπτύχθηκε η παλέτα των 216 χρωμάτων. Οι David Lehn και Hadley Stern παρατήρησαν ότι μόνο 22 από τα 216 "ασφαλή" χρώματα απεικονίζονται κανονικά, χωρίς να γίνεται ανακριβής αντικατάσταση σε οθόνες με 16-bit ανάλυση χρωμάτων. Ονόμασαν αυτά τα 22 χρώματα "πραγματικά ασφαλή" παλέτα - αποτελείται κυρίως από τόνους του πράσινου και του κίτρινου, όπως μπορούμε να δούμε στον παραπάνω πίνακα, όπου τα "πραγματικά ασφαλή" χρώματα για το διαδίκτυο είναι υπογραμμισμένα, ή στον παρακάτω πίνακα.
000 | 003 | 00F | 0F0 | 0F6 | 0FC | 0FF | 3F3 | 3F6 | 3FC | 3FF |
6F0 | 6F3 | 6FF | CF6 | F00 | F03 | F0F | FF0 | FF3 | FF6 | FFF |
CSS και χρώματα
ΕπεξεργασίαΤα Cascading Style Sheets ορίζουν το ίδιο πλήθος ονομάτων χρωμάτων όπως η HTML 4, τα 16 που αναφέρθηκαν παραπάνω. Επιπροσθέτως, η έκδοση 2.1 των CSS έχει στη λίστα το πορτοκαλί χρώμα:
Χρώμα | Δεκαεξαδικό |
---|---|
orange | #ffa500 |
Τα CSS 2 και CSS 2.1 επιτρέπουν τη χρήση των χρωμάτων συστήματος, που είναι ονόματα χρωμάτων που έχει σε λίστα του το λειτουργικό σύστημα. Αυτό επιτρέπει στους διαδικτυακούς δημιουργούς να φτιάχνουν περιεχόμενο σε αρμονία με το λειτουργικό σύστημα του αναγνώστη. Δείτε [2]. Πιθανότατα απ' τις αρχές του 2004, το πρότυπο CSS3 θα απορρίψει αυτές τις τιμές, σημειώνοντάς τες ως deprecated, αλλά αυτό μπορεί να αλλάξει ξανά: [3].