HEX, RGB, HSL: Κατανοώντας τους Κωδικούς Χρωμάτων Web

Επεξεργάζεστε έναν ιστοτόπο και βλέπετε #FF5733 στο CSS. Ή εργάζεστε με σχεδιαστή που σας στέλνει rgb(255, 87, 51). Ή ένα εργαλείο σχεδίασης εμφανίζει ένα χρώμα ως hsl(11, 100%, 60%). Αυτά περιγράφουν ακριβώς το ίδιο χρώμα — ένα ζωηρό κόκκινο-πορτοκαλί — αλλά σε τρεις διαφορετικές μορφές.

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

Πώς Λειτουργούν τα Ψηφιακά Χρώματα

Κάθε χρώμα στην οθόνη σας δημιουργείται αναμειγνύοντας τρία πρωτεύοντα χρώματα φωτός: Κόκκινο, Πράσινο και Μπλε. Αυτό είναι το μοντέλο χρωμάτων RGB. Μεταβάλλοντας την ένταση κάθε καναλιού από μηδέν (απενεργοποιημένο) έως μέγιστο (πλήρης φωτεινότητα), μπορείτε να δημιουργήσετε οποιοδήποτε από τα περίπου 16,7 εκατομμύρια χρώματα που μπορεί να εμφανίσει μια τυπική οθόνη.

• Κόκκινο 255, Πράσινο 0, Μπλε 0 = καθαρό κόκκινο
• Κόκκινο 0, Πράσινο 255, Μπλε 0 = καθαρό πράσινο
• Κόκκινο 0, Πράσινο 0, Μπλε 255 = καθαρό μπλε
• Κόκκινο 255, Πράσινο 255, Μπλε 255 = λευκό (όλα τα κανάλια στο μέγιστο)
• Κόκκινο 0, Πράσινο 0, Μπλε 0 = μαύρο (όλα τα κανάλια απενεργοποιημένα)
• Κόκκινο 255, Πράσινο 255, Μπλε 0 = κίτρινο (κόκκινο + πράσινο)

Κάθε μορφή χρωμάτων που χρησιμοποιείται στον ιστό είναι απλώς ένας διαφορετικός τρόπος έκφρασης αυτών των τιμών καναλιών.

Χρώματα HEX

Πώς Φαίνονται

#FF5733
#3498DB
#2ECC71
#000000
#FFFFFF

Πώς Λειτουργούν

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

Το δεκαεξαδικό χρησιμοποιεί ψηφία 0-9 και γράμματα A-F, όπου A=10, B=11, C=12, D=13, E=14, F=15. Άρα FF σε δεκαεξαδικό ισούται με 255 στο δεκαδικό (15 × 16 + 15 = 255).

Ανάλυση του #FF5733:

• FF = Κόκκινο στο 255 (μέγιστο)
• 57 = Πράσινο στο 87
• 33 = Μπλε στο 51

Αυτό παράγει ένα ζωηρό κόκκινο-πορτοκαλί.

Συντομογραφία

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

• #FF0000 μπορεί να γραφεί ως #F00
• #3366FF μπορεί να γραφεί ως #36F
• #000000 μπορεί να γραφεί ως #000

Χρώματα RGB

Πώς Φαίνονται

rgb(255, 87, 51)
rgb(52, 152, 219)
rgb(46, 204, 113)
rgb(0, 0, 0)
rgb(255, 255, 255)

Πώς Λειτουργούν

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

rgb(255, 87, 51) σημαίνει:

• Κόκκινο: 255 (μέγιστο)
• Πράσινο: 87 (περίπου ένα τρίτο)
• Μπλε: 51 (περίπου ένα πέμπτο)

RGBA: Προσθήκη Διαφάνειας

Το RGBA προσθέτει τέταρτη τιμή για αδιαφάνεια (alpha), που κυμαίνεται από 0 (πλήρως διαφανές) έως 1 (πλήρως αδιαφανές):

rgba(255, 87, 51, 0.5)   /* 50% διαφανές */
rgba(0, 0, 0, 0.8)        /* 80% αδιαφανές μαύρο */

Αυτό είναι χρήσιμο για επικαλύψεις, σκιές και οποιοδήποτε στοιχείο σχεδίασης που πρέπει να δείχνει περιεχόμενο πίσω από αυτό.

Χρώματα HSL

Πώς Φαίνονται

hsl(11, 100%, 60%)
hsl(204, 70%, 53%)
hsl(145, 63%, 49%)
hsl(0, 0%, 0%)
hsl(0, 0%, 100%)

Πώς Λειτουργούν

Το HSL σημαίνει Απόχρωση (Hue), Κορεσμός (Saturation), Φωτεινότητα (Lightness). Αντί να σκέφτεστε από άποψη ανάμειξης καναλιών κόκκινου/πράσινου/μπλε, το HSL περιγράφει το χρώμα με τον τρόπο που οι άνθρωποι σκέφτονται φυσικά γι' αυτό.

Απόχρωση είναι το ίδιο το χρώμα, εκφρασμένο ως μοίρα στον τροχό χρωμάτων (0-360):

• 0° / 360° = Κόκκινο
• 60° = Κίτρινο
• 120° = Πράσινο
• 180° = Κυανό
• 240° = Μπλε
• 300° = Ματζέντα

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

Φωτεινότητα είναι πόσο ανοιχτό ή σκούρο είναι το χρώμα, από 0% (μαύρο) έως 100% (λευκό). Το 50% είναι η "κανονική" φωτεινότητα.

hsl(11, 100%, 60%) σημαίνει:

• Απόχρωση: 11° (ελαφρώς πορτοκαλόκοκκο)
• Κορεσμός: 100% (πλήρως ζωηρό)
• Φωτεινότητα: 60% (ελαφρώς πιο ανοιχτό από το κανονικό)

HSLA: Προσθήκη Διαφάνειας

Όπως το RGBA, το HSLA προσθέτει κανάλι alpha:

hsla(11, 100%, 60%, 0.5)   /* 50% διαφανές */

Πότε να Χρησιμοποιήσετε Ποια Μορφή

Για Ανάπτυξη Ιστού

Το HEX είναι το de facto πρότυπο. Τα περισσότερα CSS γράφονται με κωδικούς HEX επειδή είναι συμπαγείς και κάθε προγραμματιστής τους αναγνωρίζει.

Για Συστήματα Σχεδίασης

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

• Κύριο: hsl(210, 80%, 50%)
• Ανοιχτή παραλλαγή: hsl(210, 80%, 70%)
• Σκούρα παραλλαγή: hsl(210, 80%, 30%)

Η απόχρωση και ο κορεσμός παραμένουν ίδια, εγγυώμενος ότι οι παραλλαγές είναι το ίδιο "χρώμα" σε διαφορετικές φωτεινότητες.

Για Διαφάνεια

Χρησιμοποιήστε RGBA ή HSLA όταν χρειάζεστε ημιδιαφανή χρώματα για επικαλύψεις, σκιές ή εφέ γυαλιού.

Μετατροπή Μεταξύ Μορφών

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

Τα μαθηματικά είναι απλά αλλά κουραστικά να γίνονται χειροκίνητα. Ένα εργαλείο μετατροπής το χειρίζεται άμεσα.

Αρχίστε να εργάζεστε με χρώματα:

• Μετατροπή Κωδικών Χρωμάτων
• Εργαλείο Μετατροπής Χρωμάτων
• Γεννήτρια Παλέτας Χρωμάτων

Όλα τα εργαλεία είναι δωρεάν και λειτουργούν απευθείας στο πρόγραμμα περιήγησής σας.