Ένα δεκαεξαδικό χρώμα καθορίζεται με: #RRGGBB, όπου το RR (κόκκινο), GG (πράσινο) και BB (μπλε) δεκαεξαδικοί ακέραιοι προσδιορίζουν τα συστατικά του το χρώμα.
Στο CSS, ένα χρώμα μπορεί να καθοριστεί χρησιμοποιώντας μια δεκαεξαδική τιμή με τη μορφή:
#rrggbb
Όπου rr (κόκκινο), gg (πράσινο) και bb (μπλε) είναι δεκαεξαδικές τιμές μεταξύ 00 και ff (ίδιο με το δεκαδικό 0-255).
Για παράδειγμα, το #ff0000 εμφανίζεται ως κόκκινο, επειδή το κόκκινο έχει οριστεί στην υψηλότερη τιμή του (ff) και τα άλλα έχουν οριστεί σε η χαμηλότερη τιμή (00).
Για να εμφανίσετε μαύρο, ορίστε όλες τις τιμές στο 00, ως εξής: #000000.
Για να εμφανίσετε λευκό, ορίστε όλες τις τιμές σε ff, όπως αυτό: #ffffff.
Πειραματιστείτε αναμειγνύοντας τις παρακάτω τιμές HEX:
RED
GREEN
BLUE
Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<body>
<h1>Specify colors using HEX values</h1>
<h2 style="background-color:#ff0000;">#ff0000</h2>
<h2 style="background-color:#0000ff;">#0000ff</h2>
<h2 style="background-color:#3cb371;">#3cb371</h2>
<h2 style="background-color:#ee82ee;">#ee82ee</h2>
<h2 style="background-color:#ffa500;">#ffa500</h2>
<h2 style="background-color:#6a5acd;">#6a5acd</h2>
</body>
</html>
Οι αποχρώσεις του γκρι συχνά ορίζονται χρησιμοποιώντας ίσες τιμές και για τις 3 πηγές φωτός:
Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<body>
<h1>Shades of gray</h1>
<p>By using equal values for red, green, and blue, you will get different shades of gray:</p>
<h2 style="background-color:#3c3c3c;">#3c3c3c</h2>
<h2 style="background-color:#616161;">#616161</h2>
<h2 style="background-color:#787878;">#787878</h2>
<h2 style="background-color:#b4b4b4;">#b4b4b4</h2>
<h2 style="background-color:#f0f0f0;">#f0f0f0</h2>
<h2 style="background-color:#f9f9f9;">#f9f9f9</h2>
</body>
</html>
Μερικές φορές θα δείτε έναν 3ψήφιο δεκαεξαδικό κώδικα στην πηγή CSS.
Ο 3ψήφιος δεκαεξαδικός κωδικός είναι συντομογραφία για ορισμένους εξαψήφιους εξαψήφιους κωδικούς.
Ο τριψήφιος δεκαεξαδικός κωδικός έχει την ακόλουθη μορφή:
#rgb
Όπου τα r, g και b αντιπροσωπεύουν τα κόκκινα, πράσινα και μπλε στοιχεία με τιμές μεταξύ 0 και f.
Ο 3ψήφιος δεκαεξαδικός κωδικός μπορεί να χρησιμοποιηθεί μόνο όταν και οι δύο τιμές (RR, GG και BB) είναι ίδιες για κάθε συστατικό. Έτσι, αν έχουμε #ff00cc, μπορεί να γραφτεί ως εξής: #f0c.
Εδώ είναι ένα παράδειγμα:
body {
background-color: #fc9; /* same as #ffcc99 */
}
h1 {
color: #f0f; /* same as #ff00ff */
}
p {
color: #b58; /* same as #bb5588 */
} Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #fc9; /* same as #ffcc99 */
}
h1 {
color: #f0f; /* same as #ff00ff */
}
p {
color: #b58; /* same as #bb5588 */
}
</style>
</head>
<body>
<h1>CSS 3-digit Hex Code</h1>
<p>This is a paragraph.</p>
</body>
</html>