CodeKitHubΤι είναι αυτό το εργαλείο;
Τα χρώματα στον ιστό γράφονται σε αρκετές ισοδύναμες μορφές, όλες ορισμένες από το CSS Color spec στο MDN. Το HEX (#4f46e5) είναι η συμπαγής μορφή που χρησιμοποιείται παντού σε CSS και παραδόσεις σχεδίασης. Το RGB (rgb(79, 70, 229)) δηλώνει απευθείας τα συστατικά κόκκινο, πράσινο και μπλε, κάτι που συχνά χρειάζεται ο κώδικας. Το HSL (hsl(243, 75%, 59%)) περιγράφει απόχρωση, κορεσμό και φωτεινότητα — η πιο διαισθητική μορφή για την προσαρμογή ενός χρώματος, όπως το να το κάνετε πιο σκούρο ή λιγότερο κορεσμένο.
Όλες περιγράφουν το ίδιο χρώμα· αυτό το εργαλείο μετατρέπει μεταξύ τους με ακρίβεια και δείχνει μια προεπισκόπηση ώστε να επιβεβαιώσετε ότι είναι το χρώμα που εννοούσατε.
Γιατί να το χρησιμοποιήσετε;
- Δέχεται οποιαδήποτε μορφή εισόδου — HEX (3 ή 6 ψηφίων), RGB ή HSL — και δίνει όλες τις μορφές ως έξοδο.
- Δείγμα ζωντανής προεπισκόπησης ώστε να βλέπετε το χρώμα, όχι μόνο αριθμούς.
- Οπτικός επιλογέας χρώματος όταν προτιμάτε να επιλέξετε με το μάτι.
- Αντιγραφή με ένα κλικ ανά μορφή, έτοιμη για CSS ή κώδικα.
- Δωρεάν, άμεσο, χωρίς μεταφόρτωση.
Πώς χρησιμοποιείται
- Πληκτρολογήστε ή επικολλήστε ένα χρώμα: #4f46e5, rgb(79, 70, 229) ή hsl(243, 75%, 59%) λειτουργούν όλα.
- Ή κάντε κλικ στον επιλογέα χρώματος και επιλέξτε οπτικά.
- Διαβάστε και τις τρεις μορφές στα αποτελέσματα και ελέγξτε το δείγμα προεπισκόπησης.
- Κάντε κλικ στο "Copy" δίπλα στη μορφή που χρειάζεστε.
Παράδειγμα
Είσοδος
#4f46e5Έξοδος
HEX: #4f46e5
RGB: rgb(79, 70, 229)
HSL: hsl(243, 75%, 59%)Τρεις σημειογραφίες, ένα πανομοιότυπο χρώμα.
Ποια μορφή να χρησιμοποιήσετε;
Και οι τρεις περιγράφουν ακριβώς το ίδιο χρώμα — η επιλογή αφορά το ποια είναι ευκολότερη να δουλέψετε για τη συγκεκριμένη εργασία, όχι την ακρίβεια.
| Μορφή | Καλύτερη για | Γιατί |
|---|---|---|
| HEX (#4f46e5) | CSS, παραδόσεις σχεδίασης, γρήγορη αντιγραφή-επικόλληση | Η πιο σύντομη για πληκτρολόγηση και επικόλληση· η καθολική μορφή σε εργαλεία σχεδίασης όπως το Figma. |
| RGB (rgb(79,70,229)) | Κώδικας που χειρίζεται κανάλια απευθείας, εργασία με canvas/εικόνα | Ταιριάζει με τον τρόπο που οι γραφικές API και τα δεδομένα εικονοστοιχείων εικόνας πραγματικά αποθηκεύουν χρώμα. |
| HSL (hsl(243,75%,59%)) | Προσαρμογή ενός χρώματος — πιο ανοιχτό, πιο σκούρο, περισσότερο/λιγότερο κορεσμένο | Η φωτεινότητα και ο κορεσμός είναι ξεχωριστοί αριθμοί που μπορείτε να ρυθμίσετε απευθείας, σε αντίθεση με το HEX/RGB όπου κάθε κανάλι αλλάζει. |
Συνήθεις περιπτώσεις χρήσης
- Επιλογή ενός χρώματος οπτικά σε εργαλείο σχεδίασης, και στη συνέχεια μετατροπή του στην ακριβή τιμή HEX ή RGB που χρειάζεται σε CSS ή κώδικα.
- Δημιουργία ενός συνόλου σχετικών αποχρώσεων (πιο ανοιχτές/πιο σκούρες παραλλαγές) με μετατροπή σε HSL, προσαρμογή φωτεινότητας, και μετατροπή πίσω.
- Αντιστοίχιση ενός χρώματος επωνυμίας σε διαφορετικά εργαλεία που το καθένα περιμένει διαφορετική μορφή — ένα αρχείο λογότυπου σε RGB, έναν οδηγό στυλ σε HEX, μια μεταβλητή CSS που χρειάζεται HSL για θεματοποίηση.
- Επαλήθευση ότι ένα χρώμα από στιγμιότυπο οθόνης ή αρχείο σχεδίασης (συχνά δοσμένο ως RGB) ταιριάζει με την τιμή HEX σε ένα φύλλο στυλ.
Συχνές ερωτήσεις
Πότε πρέπει να χρησιμοποιώ HSL αντί για HEX ή RGB;
Όταν θέλετε να συλλογιστείτε για ένα χρώμα. Το να κάνετε ένα χρώμα 10% πιο σκούρο σε HSL σημαίνει να μειώσετε τη φωτεινότητα κατά 10 μονάδες· σε HEX ή RGB θα έπρεπε να επανυπολογίσετε όλα τα κανάλια. Τα συστήματα σχεδίασης συχνά ορίζουν παλέτες σε HSL ακριβώς για αυτόν τον λόγο.
Υποστηρίζει το εργαλείο 3-ψήφια HEX όπως #fff;
Ναι. Το #fff είναι συντόμευση του #ffffff — κάθε ψηφίο διπλασιάζεται. Και οι δύο μορφές γίνονται δεκτές και η έξοδος δείχνει την πλήρη μορφή 6 ψηφίων.
Τι γίνεται με το άλφα (διαφάνεια);
Αυτό το εργαλείο μετατρέπει αδιαφανή χρώματα (τις τιμές RGB/HSL). Αν χρειάζεστε διαφάνεια, προσθέστε το άλφα εσείς: rgba(79, 70, 229, 0.5) ή #4f46e580 — το τμήμα του χρώματος παραμένει το ίδιο.
Γιατί οι τιμές HSL μου διαφέρουν κατά 1 από άλλο εργαλείο;
Στρογγυλοποίηση. Η μετατροπή HSL↔RGB παράγει κλασματικές τιμές, και τα εργαλεία στρογγυλοποιούν διαφορετικά. Μια διαφορά ±1 σε απόχρωση ή ποσοστό είναι αόρατη και φυσιολογική.
Υποστηρίζονται τα ονόματα χρωμάτων όπως το 'red';
Όχι στη Φάση 1 — το εργαλείο εστιάζει στις τρεις αριθμητικές μορφές που μετατρέπουν συχνότερα οι προγραμματιστές. Εισαγάγετε την τιμή HEX/RGB/HSL του χρώματος, ή επιλέξτε το οπτικά με τον επιλογέα.
Πότε πρέπει να χρησιμοποιώ HEX, RGB ή HSL;
Αν χρειάζεστε διαφάνεια, χρησιμοποιήστε 8-ψήφιο HEX (#RRGGBBAA) ή rgba() — το 6-ψήφιο HEX δεν έχει κανάλι άλφα. Αν θέλετε πιο ανοιχτόχρωμες ή πιο σκούρες παραλλαγές του ίδιου χρώματος, το HSL είναι το ευκολότερο: κρατήστε σταθερά την απόχρωση και τον κορεσμό και αλλάξτε μόνο τον αριθμό φωτεινότητας. Για απλή αντιγραφή-επικόλληση σε CSS ή εργαλεία σχεδίασης, το 6-ψήφιο HEX παραμένει η πιο καθολικά αποδεκτή μορφή.