Η colorιδιότητα στο CSS ορίζει το χρώμα των κειμένων και των διακοσμήσεων κειμένου.
p ( color: blue; )Αξίες
Η colorιδιοκτησία μπορεί να αποδεχτεί οποιαδήποτε τιμή χρώματος CSS.
- Ονομαστικά χρώματα: για παράδειγμα, "aqua".
- Εξαγωνικά χρώματα: για παράδειγμα, # 00FFFF ή # 0FF.
- Χρώματα RGB και RGBa: για παράδειγμα, rgb (0, 255, 255) και rgba (0, 255, 255, .5).
- Χρώματα HSL και HSLa: για παράδειγμα, hsl (180, 100%, 50%) και hsla (180, 100%, 50%, .5).
Ονομασμένα χρώματα
p ( color: aqua; )Τα ονόματα χρωμάτων είναι επίσης γνωστά ως χρώματα λέξεων-κλειδιών, χρώματα X11 ή χρώματα SVG. Όλα τα ονόματα χρωμάτων είναι αδιαφανή από προεπιλογή, εκτός από το transparentοποίο είναι πλήρως διαφανές ή "διαυγές". Δείτε το απόσπασμα Named Colors and Hex Equivalents για μια λίστα με τα ονόματα των χρωμάτων.
Hex χρώματα
Τα δεκαεξαδικά χρώματα, ή τα δεκαεξαδικά χρώματα, καθορίζονται με αλφαριθμητικές τιμές. Το πρώτο ζεύγος χαρακτήρων αντιπροσωπεύει την κόκκινη τιμή, το δεύτερο ζεύγος αντιπροσωπεύει την πράσινη τιμή και το τρίτο ζεύγος αντιπροσωπεύει την μπλε τιμή, όλα σε εύρος από 00 έως FF.
p ( color: #00FFFF; )Εάν τα ζεύγη κόκκινων, μπλε και πράσινων τιμών είναι όλα διπλά, μπορείτε να συντομεύσετε την τιμή δεκαεξαδικού σε στενό 3 χαρακτήρων - για παράδειγμα, το # 00FFFF μπορεί να συντομευτεί σε # 0FF.
.full-hex ( color: #00FFFF; /* aqua */ ) .abbreviated-hex ( color: #0FF; /* also aqua */ )Χρώματα RGB και RGBa
Τα χρώματα RGB καθορίζονται με μια λίστα τριών αριθμητικών τιμών διαχωρισμένων με κόμμα (που κυμαίνονται από 0 έως 255) ή ποσοστιαίες τιμές (που κυμαίνονται από 0% έως 100%). Η πρώτη τιμή αντιπροσωπεύει την κόκκινη τιμή, η δεύτερη αντιπροσωπεύει την πράσινη τιμή και η τρίτη αντιπροσωπεύει την μπλε τιμή. Τα χρώματα RGB είναι αδιαφανή από προεπιλογή.
p ( color: rgb(0, 255, 255); )Το RGBa προσθέτει μια τέταρτη τιμή για το κανάλι άλφα, το οποίο καθορίζει την αδιαφάνεια του χρώματος. Η τιμή άλφα είναι ένας αριθμός που κυμαίνεται από 0,0 (πλήρως διαφανής) έως 1 (πλήρως αδιαφανής).
p ( color: rgba(0, 255, 255, .5); )Χρώματα HSL και HSLa
Τα χρώματα HSL καθορίζονται με μια λίστα τριών τιμών διαχωρισμένων με κόμμα: ο βαθμός Hue (ένας αριθμός κυμαίνεται από 0 έως 360), ένα ποσοστό κορεσμού (που κυμαίνεται από 0% έως 100%) και ένα ποσοστό φωτεινότητας (που κυμαίνεται από 0% έως 100%). Τα χρώματα HSL είναι αδιαφανή από προεπιλογή.
p ( color: hsl(180, 100%, 50%); )Το HSLa προσθέτει μια τέταρτη τιμή για το κανάλι άλφα για τον έλεγχο της αδιαφάνειας του χρώματος. Η τιμή άλφα είναι ένας αριθμός που κυμαίνεται από 0,0 (πλήρως διαφανής) έως 1 (πλήρως αδιαφανής).
p ( color: hsla(180, 100%, 50%, .5); )Διαδήλωση
Δείτε τις τιμές χρώματος πένας κατά CSS-Tricks (@ css-tricks) στο CodePen.
Σημειώσεις χρήσης
Το colorακίνητο καταρράκτες. Εάν το τοποθετήσετε στο σώμα, όλα τα στοιχεία απογόνων θα κληρονομήσουν αυτό το χρώμα, εκτός εάν έχουν το δικό τους χρώμα στο φύλλο στυλ του παράγοντα χρήστη.
Τα περιγράμματα κληρονομούνται colorεκτός εάν έχει καθοριστεί μια τιμή χρώματος στη borderδήλωση.
Η colorιδιοκτησία ισχύει για text-decorationγραμμές. Στα προγράμματα περιήγησης που υποστηρίζουν την text-decoration-colorιδιότητα, μπορείτε να καθορίσετε διαφορετικά χρώματα για το κείμενο και τις γραμμές διακόσμησης.
colorισχύει επίσης για δείκτες στοιχείων λίστας (όπως κουκκίδες και αριθμοί). Δεν μπορείτε να ορίσετε ξεχωριστό χρώμα για ένα δείκτη στοιχείου λίστας, αλλά μπορείτε να το αντικαταστήσετε με μια εικόνα με την list-styleιδιότητα.
Παρόλο που τα ονόματα χρωμάτων και τα δεκαεξαδικά χρώματα δεν διαθέτουν κανάλια άλφα, μπορείτε να ρυθμίσετε την αδιαφάνεια τους με την opacityιδιότητα σε όλα τα τρέχοντα προγράμματα περιήγησης και το IE9 +.
Σχετιζομαι με
fonttext-decoration-coloropacity
Περισσότερες πληροφορίες
colorστις προδιαγραφές W3Ccolorστο MDN- Άρθρο CSS-Tricks Yay για HSLa
Υποστήριξη προγράμματος περιήγησης
| Χρώμιο | Σαφάρι | Firefox | ΛΥΡΙΚΗ ΣΚΗΝΗ | ΙΕ | Android | iOS |
|---|---|---|---|---|---|---|
| Οποιος | Οποιος | Οποιος | Οποιος | Οποιος * | Οποιος | Οποιος |
* Τα HSL, HSLa και RGBa υποστηρίζονται στο IE9 +.