4 τρόποι για να ορίσετε τα χρώματα στο CSS

Βασικά Takeaways

• Χρήση ονομάτων χρωμάτων: Το CSS παρέχει 145 ονόματα χρωμάτων για εύκολη και φιλική προς τους αρχάριους επιλογή χρωμάτων, αλλά οι επιλογές είναι περιορισμένες και ενδέχεται να μην καλύπτουν τις ακριβείς σχεδιαστικές ανάγκες.
• Δεκαεξαδικοί κωδικοί χρωμάτων: Οι δεκαεξαδικοί κωδικοί προσφέρουν ένα ευρύ φάσμα επιλογών χρωμάτων και ακριβείς προσαρμογές, αν και μπορεί να είναι λιγότερο εύχρηστοι στη χρήση και στη μνήμη.
• Τιμές χρώματος RGB και RGBA: Το RGB επιτρέπει τον ακριβή έλεγχο χρωμάτων με αριθμητικές τιμές, ενώ το RGBA προσθέτει διαφάνεια. Η διασφάλιση προσβάσιμων χρωματικών συνδυασμών είναι σημαντική.

Τα χρώματα είναι από τα πιο συχνά χρησιμοποιούμενα χαρακτηριστικά CSS, παίζοντας ζωτικό ρόλο στη διαμόρφωση της οπτικής ταυτότητας, της διάθεσης και της εμπειρίας χρήστη ενός ιστότοπου. Το CSS προσφέρει μια σειρά από επιλογές για τη χρήση χρώματος, καθεμία προσαρμοσμένη στις συγκεκριμένες σχεδιαστικές ανάγκες και προτιμήσεις.

Αν και είναι εύκολο να αγνοήσετε τη σημασία του ορισμού χρώματος, οι επιλογές σας μπορούν να επηρεάσουν σημαντικά την εμφάνιση και την αίσθηση του ιστότοπού σας. Η διερεύνηση των διαφορών μεταξύ των διαφόρων μεθόδων και του τρόπου πρακτικής εφαρμογής και συνδυασμού τους θα ενισχύσει την ικανότητά σας να δημιουργείτε οπτικά ελκυστικούς ιστότοπους.

1. Χρήση ονομάτων χρωμάτων

Το CSS παρέχει έναν εύχρηστο τρόπο για να ορίσετε χρώματα χρησιμοποιώντας ονόματα και υπάρχουν 145 διαθέσιμες επιλογές. Αυτά τα ονόματα χρωμάτων κυμαίνονται από απλά "κόκκινο", "πράσινο" και "μπλε" έως πιο συγκεκριμένες αποχρώσεις όπως "κοραλί" ή "λεβάντα".

Η χρήση επώνυμων χρωμάτων είναι απλή: επιλέγετε ένα όνομα χρώματος όπως "κόκκινο" και το χρησιμοποιείτε σε μια ιδιότητα CSS που υποστηρίζει τιμές χρώματος. Τέτοιος ιδιότητες περιλαμβάνουν το προφανές χρώμα και χρώμα του φόντου, αλλά επίσης χρώμα πλαισίου, περίγραμμα-χρώμα, και κείμενο-σκιά, μεταξύ άλλων.

Τα ονόματα χρωμάτων είναι χρήσιμα όταν χρειάζεστε ένα προσωρινό χρώμα για πρωτότυπο ή θέλετε να διατηρήσετε τον κώδικά σας ευανάγνωστο. Εδώ είναι η σύνταξη:

color_property: color_name;

Σε αυτή την περίπτωση, απλώς αντικαταστήστε όνομα_χρώματος με το συγκεκριμένο χρώμα που θέλετε να χρησιμοποιήσετε. Για παράδειγμα, εάν θέλετε να ορίσετε το κείμενο χρώμα μιας παραγράφου προς το κόκκινο, γράψτε:

p {
color: red;
}

Αυτό θα δώσει στις παραγράφους σας ένα κόκκινο χρώμα κειμένου:

Πλεονεκτήματα: Είναι εύκολο να διαβαστούν και να κατανοηθούν στον κώδικα CSS σας. Είναι φιλικά για αρχάριους, λειτουργούν καλά σε όλα τα προγράμματα περιήγησης και είναι εύχρηστα για γρήγορες ιδέες σχεδίασης.

Μειονεκτήματα: Έχουν περιορισμένες επιλογές και μπορεί να μην προσφέρουν τις ακριβείς αποχρώσεις που χρειάζεστε, περιορίζοντας τη σχεδιαστική δημιουργικότητα. Επιπλέον, ενδέχεται να μην πληρούν πάντα αυστηρές απαιτήσεις προσβασιμότητας και η υποστήριξη σε παλαιότερα συστήματα μπορεί να διαφέρει.

2. Δεκαεξαδικοί κωδικοί χρωμάτων

Οι δεκαεξαδικοί χρωματικοί κώδικες, που συχνά αναφέρονται ως «δεκαεξαδικοί κωδικοί», είναι οι πιο συνηθισμένες μέθοδοι προσδιορισμού χρωμάτων στο σχεδιασμό ιστοσελίδων. Αυτοί οι κωδικοί αποτελούνται από συνδυασμούς αριθμών και γραμμάτων έξι χαρακτήρων (0-9, A-F), που αντιπροσωπεύουν τη μίξη κόκκινου, πράσινου και μπλε (RGB) στοιχείων σε ένα χρώμα.

Αν και είναι εύκολο στη χρήση, η κατανόηση του τρόπου λειτουργίας τους μπορεί να είναι δύσκολη. Μπορείς να πάρεις μια βαθιά βουτιά σε εξαγωνικούς κώδικες για να καταλάβω καλύτερα. Ακολουθεί ένα βασικό παράδειγμα για το πώς μπορείτε να χρησιμοποιήσετε δεκαεξαδικούς κώδικες στο CSS:

color: #RRGGBB;

Σε αυτήν τη μορφή, τα RR, GG και BB αντιπροσωπεύουν τα κόκκινα, πράσινα και μπλε στοιχεία, αντίστοιχα. Κάθε στοιχείο μπορεί να κυμαίνεται από 00 (χωρίς ένταση) έως FF (μέγιστη ένταση). Για παράδειγμα, εάν θέλετε να ορίσετε το χρώμα φόντου μιας κεφαλίδας ιστότοπου σε μια συγκεκριμένη απόχρωση του μπλε, μπορείτε να χρησιμοποιήσετε έναν δεκαεξαδικό κώδικα όπως αυτός:

header {
background-color: #336699;
}

Αυτό θα δώσει ένα βαθύ μπλε χρώμα:

​​​​​

Μπορείτε επίσης να χρησιμοποιήσετε μια συντομογραφία εάν καθένα από τα τρία στοιχεία επαναλαμβάνει τον ίδιο χαρακτήρα δύο φορές. Μπορείτε να γράψετε το παραπάνω παράδειγμα ως εξής:

header {
background-color: #369;
}

Πλεονεκτήματα: Οι δεκαεξαδικοί χρωματικοί κωδικοί παρέχουν ένα ευρύ φάσμα επιλογών χρωμάτων, επιτρέποντάς σας να δημιουργήσετε λεπτομερείς και προσαρμοσμένες αποχρώσεις. Προσφέρουν ομαλό έλεγχο των χρωματικών επιλογών, καθιστώντας τα ιδανικά για πολύπλοκες σχεδιαστικές απαιτήσεις.

Μειονεκτήματα: Αν και οι δεκαεξαδικοί κωδικοί είναι ισχυροί, μπορεί να είναι λιγότερο εύχρηστοι από τα επώνυμα χρώματα. Μπορεί επίσης να αντιμετωπίσετε την πρόκληση να θυμάστε συγκεκριμένες τιμές χρώματος. Ευτυχώς, εργαλεία για την εύρεση των εξαγωνικών κωδικών των χρωμάτων που συναντάτε είναι διαθέσιμα, καθιστώντας τη διαδικασία πιο διαχειρίσιμη.

3. Τιμές χρώματος RGB και RGBA

Όπως και οι δεκαεξαδικοί κώδικες, αυτή η μορφή σάς επιτρέπει να προσδιορίζετε χρώματα με βάση τα κόκκινα, πράσινα και μπλε στοιχεία τους. Αυτή τη φορά, ωστόσο, μπορείτε να χρησιμοποιήσετε πιο φιλικούς ακέραιους αριθμούς.

Τιμές χρώματος RGB

Οι τιμές χρώματος RGB είναι η δεύτερη πιο συχνά χρησιμοποιούμενη μέθοδος για τον ορισμό των χρωμάτων στο CSS. Το "RGB" αντιπροσωπεύει το κόκκινο, το πράσινο και το μπλε, εκφραζόμενα ως συνάρτηση CSS με παρενθέσεις μετά από αυτό. Μέσα στις παρενθέσεις, εκχωρείτε τιμές σε κάθε κανάλι χρώματος, που κυμαίνονται από 0 έως 255. Αυτό σας επιτρέπει να ελέγχετε την ένταση του κόκκινου, του πράσινου και του μπλε στο χρώμα που θέλετε να χρησιμοποιήσετε.

Εδώ είναι η σύνταξη:

rgb(red_value, green_value, blue_value);

Αντικαθιστώ red_value, green_value, και μπλε_τιμή με τις αντίστοιχες αριθμητικές τους τιμές. Για παράδειγμα, μπορείτε να επιτύχετε λευκά, μαύρα και κόκκινα χρώματα όπως αυτά που εμφανίζονται σε αυτήν την εικόνα:

Όταν ρυθμίζετε και τα τρία κανάλια χρώματος (κόκκινο, πράσινο και μπλε) στη μέγιστη τιμή τους 255, έχει ως αποτέλεσμα την υψηλότερη ένταση για κάθε κανάλι, δημιουργώντας το λευκό χρώμα:

.white-box {
 color: rgb(255, 255, 255);
}

Όταν ρυθμίζετε και τα τρία κανάλια χρώματος στην ελάχιστη τιμή 0, αντιπροσωπεύει την απουσία χρώματος σε κάθε κανάλι, με αποτέλεσμα μαύρο.

.black-box {
color: rgb(0, 0, 0);
}

Ρυθμίζοντας το κόκκινο κανάλι στη μέγιστη τιμή του 255, διατηρώντας τα άλλα κανάλια στην ελάχιστη τιμή τους 0, δημιουργείται το κόκκινο χρώμα:

.red-box {
color: rgb(255, 0, 0); 
}

Τιμές χρώματος RGBA

Το RGBA λειτουργεί με τον ίδιο τρόπο όπως το RGB, η μόνη διαφορά είναι η συμπερίληψη μιας τιμής άλφα. Το "A" στο RGBA σημαίνει άλφα, το οποίο καθορίζει το επίπεδο διαφάνειας ή αδιαφάνειας για το επιλεγμένο χρώμα. Η τιμή 0 αντιπροσωπεύει πλήρη διαφάνεια, καθιστώντας το χρώμα εντελώς αόρατο, ενώ η τιμή 1 αντιπροσωπεύει πλήρη αδιαφάνεια, καθιστώντας το χρώμα πλήρως ορατό.

Το RGBA είναι ιδιαίτερα χρήσιμο όταν θέλετε να δημιουργήσετε στοιχεία με διαφορετικά επίπεδα διαφάνειας, όπως ημιδιαφανές φόντο ή ξεθωριασμένο κείμενο. Η πλήρης σύνταξη είναι:

color: rgba(red_value, green_value, blue_value, alpha_value);

Εδώ, red_value, green_value, και μπλε_τιμή αντιπροσωπεύουν τα κανάλια χρώματος όπως στο RGB και άλφα_τιμή καθορίζει το επίπεδο διαφάνειας.

div {
background-color: rgba(0, 128, 0, 0.5);
}

Σε αυτό το παράδειγμα, η τιμή άλφα 0,5 εκχωρεί 50% διαφάνεια στο πράσινο χρώμα, επιτρέποντας στο περιεχόμενο κάτω από αυτό να εμφανίζεται μέσω:

Πλεονεκτήματα: Τα RGB και RGBA σάς επιτρέπουν να ελέγχετε τα χρώματα με ακρίβεια, διευκολύνοντας την επιλογή ακριβών αποχρώσεων και τη δημιουργία οπτικά ελκυστικών σχεδίων. Είναι συμβατά με διάφορα προγράμματα περιήγησης ιστού, διασφαλίζοντας ότι τα χρώματα που έχετε επιλέξει φαίνονται συνεπή.

Μειονεκτήματα: Η πρόκληση έγκειται στη διασφάλιση προσβάσιμων χρωματικών συνδυασμών. Είναι σημαντικό να δίνετε προσοχή στους λόγους αντίθεσης, κυρίως όταν εργάζεστε με διαφάνεια στο RGBA. Οι οδηγίες WCAG μπορούν να βοηθήσουν διασφαλίζετε ότι το σχέδιό σας είναι προσβάσιμο.

4. Τιμές χρώματος HSL και HSLA

Το HSL—συντομογραφία των λέξεων Hue, Saturation και Lightness—είναι μια άλλη συνάρτηση CSS που ορίζει τα χρώματα. Όπως το RGB, το HSL χρησιμοποιεί αριθμητικές τιμές για να αναπαραστήσει τα χρώματα, αλλά το κάνει διαφορετικά. Μπορεί να είστε εξοικειωμένοι με Τιμές HSL από στοιχεία διεπαφής χρήστη σε εφαρμογές σχεδίασης και αλλού.

Απόχρωση: Αυτό αντιπροσωπεύει το ίδιο το χρώμα χρησιμοποιώντας μοίρες σε έναν χρωματικό τροχό, που κυμαίνονται από 0 έως 360. Φανταστείτε ότι επιλέγετε ένα σημείο σε έναν κύκλο, όπου κάθε βαθμός αντιστοιχεί σε διαφορετικό χρώμα. Για παράδειγμα, 0 και 360 μοίρες για το κόκκινο, 120 μοίρες για το πράσινο και 240 μοίρες για το μπλε.

Κορεσμός: Ο κορεσμός καθορίζει τη ζωντάνια ή την ένταση του χρώματος. Καθορίζει τη σχέση του χρώματος με το γκρι, με το 0% να είναι εντελώς σε κλίμακα του γκρι (αποκορεσμένο) και το 100% να είναι πλήρως κορεσμένο (ζωντανό και καθαρό).

Ελαφρότητα: Η φωτεινότητα αντιπροσωπεύει πόσο φωτεινό ή σκούρο εμφανίζεται το χρώμα. Σχετίζεται με τη θέση του χρώματος στο φάσμα μεταξύ μαύρου (0%) και λευκού (100%). Μια τιμή 50% αντιπροσωπεύει το κανονικό χρώμα, ενώ τιμές κάτω από 50% σκουραίνουν το χρώμα και τιμές πάνω από 50% το φωτίζουν.

Εκτός από το HSL, υπάρχει το HSLA, όπου το "A" σημαίνει "άλφα". Αυτό είναι παρόμοιο με το "A" στο RGBA και σημαίνει διαφάνεια.

Εδώ είναι η σύνταξη:

color: hsl(hue_value, saturation_percentage, lightness_percentage);

Χρησιμοποιώντας αυτήν τη σύνταξη, αντικαταστήστε hue_value, κορεσμός_ποσοστό, και ελαφρότητα_ποσοστό με τις συγκεκριμένες τιμές που θέλετε για κάθε στοιχείο. Για παράδειγμα:

div {
background-color: hsl(120, 100%, 50%);
}

Σε αυτό το παράδειγμα, το χρώμα φόντου του a div Το στοιχείο ορίζεται σε ένα ζωντανό πράσινο χρησιμοποιώντας τιμές HSL. Το 120 αντιπροσωπεύει την απόχρωση (πράσινο), το 100% είναι για πλήρη κορεσμό και το 50% θέτει τη φωτεινότητα σε ένα ισορροπημένο επίπεδο.

Πλεονεκτήματα: Το HSL και το HSLA προσφέρουν ευέλικτους υπολογισμούς χρωμάτων χρησιμοποιώντας προσαρμοσμένες ιδιότητες CSS. Είναι εξαιρετικά συμβατά με τα σύγχρονα προγράμματα περιήγησης και επιτρέπουν εύκολες προσαρμογές στην φωτεινότητα του χρώματος.

Μειονεκτήματα: Η εκμάθηση HSL περιλαμβάνει κατανόηση της επιστήμης των χρωμάτων, όπως οι αποχρώσεις και οι κορεσμοί, τα οποία μπορεί να είναι πιο προκλητικά από τα γνωστά χρώματα RGB.

Αγκαλιάζοντας τη δύναμη των χρωμάτων CSS

Υπάρχουν περισσότερες μέθοδοι που μπορείτε να ελέγξετε και ενώ εξερευνάτε τις διαφορετικές μορφές για τον καθορισμό των χρωμάτων στο CSS, έχετε υπόψη σας ότι έχετε τη δύναμη να διαμορφώσετε την εμφάνιση, τη διάθεση και την εμπειρία χρήστη του ιστότοπού σας.

Η επιλογή της μορφής χρώματος - είτε πρόκειται για απλά ονόματα χρωμάτων, δεκαεξαδικούς κωδικούς, RGB ή HSL - μπορεί να επηρεάσει τον τρόπο με τον οποίο αντιλαμβάνεται το κοινό σας τον ιστότοπό σας. Έτσι, πειραματιστείτε, μάθετε και βρείτε τους ορισμούς χρωμάτων που ταιριάζουν καλύτερα στους σχεδιαστικούς σας στόχους.