Βρήκατε το τέλειο χρώμα σε μορφή HEX, αλλά το εργαλείο σχεδιασμού που χρησιμοποιείτε απαιτεί RGB. Ή ένας πελάτης σας έστειλε χρώμα σε RGB και χρειάζεστε την τιμή HSL για το CSS σας. Η μετατροπή μορφών χρωμάτων είναι καθημερινή εργασία για σχεδιαστές και προγραμματιστές. Ο Color Converter μας το κάνει αστραπιαία.
Τι χρειάζεστε
- Μια τιμή χρώματος σε οποιαδήποτε μορφή (HEX, RGB, HSL ή άλλες)
- Ένα πρόγραμμα περιήγησης (Chrome, Firefox, Safari ή Edge)
- Δεν απαιτείται λογαριασμός ή εγκατάσταση
Οδηγός βήμα προς βήμα
Εισάγετε την τιμή χρώματος
Ανοίξτε το εργαλείο Color Converter. Πληκτρολογήστε ή επικολλήστε την τιμή χρώματός σας σε οποιαδήποτε υποστηριζόμενη μορφή. Για παράδειγμα, εισάγετε #3B82F6 ως τιμή HEX, rgb(59, 130, 246) ως RGB, ή hsl(217, 91%, 60%) ως HSL. Το εργαλείο αναγνωρίζει αυτόματα τη μορφή.
Δείτε όλες τις μετατροπές μορφών
Το εργαλείο εμφανίζει αμέσως το χρώμα σας σε κάθε υποστηριζόμενη μορφή: HEX, RGB, HSL και άλλες. Μπορείτε να δείτε ζωντανή προεπισκόπηση του χρώματος μαζί με όλες τις ισοδύναμες τιμές. Αν θέλετε να ρυθμίσετε το χρώμα, χρησιμοποιήστε το color picker για οπτική βελτιστοποίηση.
Αντιγράψτε τη μορφή που χρειάζεστε
Κάντε κλικ στο κουμπί αντιγραφής δίπλα σε οποιαδήποτε μορφή για να αντιγράψετε την τιμή στο πρόχειρο. Επικολλήστε την απευθείας στο αρχείο CSS, το εργαλείο σχεδιασμού ή οπουδήποτε αλλού τη χρειάζεστε. Δεν χρειάζεται χειροκίνητη αναπληκτρολόγηση.
Καλό να ξέρετε Ο Color Converter εκτελείται εξ ολοκλήρου στο πρόγραμμα περιήγησής σας. Λειτουργεί εκτός σύνδεσης μετά τη φόρτωση και δεν απαιτεί λογαριασμό ή εγκατάσταση.
Κατανόηση μορφών χρωμάτων
Διαφορετικά εργαλεία και πλαίσια χρησιμοποιούν διαφορετικές μορφές χρωμάτων. Δείτε πότε να χρησιμοποιείτε καθεμία:
HEX
Η πιο συνηθισμένη μορφή στο διαδίκτυο. Ένα χρώμα HEX ξεκινά με # ακολουθούμενο από έξι χαρακτήρες (γράμματα και αριθμούς), όπως #FF5733.
- Χρησιμοποιείται σε: CSS, HTML, εργαλεία σχεδιασμού (Figma, Sketch, Photoshop)
- Μορφή:
#RRGGBBόπου κάθε ζεύγος είναι δεκαεξαδική τιμή από 00 έως FF - Παράδειγμα:
#3B82F6(μεσαίο μπλε)
RGB
Περιγράφει ένα χρώμα χρησιμοποιώντας τα συστατικά Κόκκινο, Πράσινο και Μπλε, κάθε ένα από 0 έως 255.
- Χρησιμοποιείται σε: CSS (συνάρτηση
rgb()), γλώσσες προγραμματισμού, φωτισμός LED - Μορφή:
rgb(red, green, blue) - Παράδειγμα:
rgb(59, 130, 246)
HSL
Περιγράφει ένα χρώμα χρησιμοποιώντας Απόχρωση (0-360 μοίρες στον τροχό χρωμάτων), Κορεσμό (0-100%) και Φωτεινότητα (0-100%).
- Χρησιμοποιείται σε: CSS (συνάρτηση
hsl()), θεωρία χρωμάτων, συστήματα σχεδιασμού - Μορφή:
hsl(hue, saturation%, lightness%) - Παράδειγμα:
hsl(217, 91%, 60%)
Συμβουλή Το HSL είναι η πιο διαισθητική μορφή για προσαρμογή χρωμάτων. Θέλετε πιο ανοιχτή απόχρωση; Αυξήστε την τιμή φωτεινότητας. Θέλετε πιο αμυδρό τόνο; Μειώστε τον κορεσμό. Αυτό κάνει το HSL ιδανικό για τη δημιουργία συστημάτων χρωμάτων και παραλλαγών ενός βασικού χρώματος.
Πότε να χρησιμοποιείτε ποια μορφή
| Κατάσταση | Συνιστώμενη μορφή |
|---|---|
| Χειρόγραφο CSS | HEX (σύντομο και γνωστό) ή HSL (εύκολο στη ρύθμιση) |
| Προδιαγραφές εργαλείων σχεδιασμού | HEX (βιομηχανικό πρότυπο) |
| Δυναμικός χειρισμός χρωμάτων σε κώδικα | HSL (πιο εύκολο να προσαρμοστεί προγραμματιστικά) |
| Επικοινωνία χρωμάτων σε πελάτες | HEX (πιο καθολικά αναγνωρίσιμο) |
| Σχεδιασμός εκτύπωσης | CMYK (ξεχωριστό από μορφές οθόνης) |
Πέρα από μεμονωμένα χρώματα
Αφού μετατρέψετε το χρώμα σας, μπορεί να θέλετε να εξερευνήσετε σχετικά εργαλεία:
- Gradient Generator: Δημιουργήστε ομαλές διαβαθμίσεις CSS με τα χρώματά σας. Εισάγετε δύο ή περισσότερα χρώματα και αποκτήστε τον κώδικα διαβάθμισης έτοιμο για επικόλληση στο stylesheet σας.
- Color Palette Generator: Δημιουργήστε αρμονικές παλέτες χρωμάτων βασισμένες στο αρχικό σας χρώμα. Αποκτήστε αυτόματα συμπληρωματικά, ανάλογα, τριαδικά και άλλα χρωματικά σχήματα.
Αυτά τα εργαλεία λειτουργούν αρμονικά με τον Color Converter για να σας βοηθήσουν να δημιουργήσετε ένα πλήρες χρωματικό σύστημα για το έργο σας.
Σημαντικό Τα χρώματα μπορεί να φαίνονται διαφορετικά σε διαφορετικές οθόνες λόγω βαθμονόμησης οθόνης, προφίλ χρωμάτων και ρυθμίσεων φωτεινότητας. Όταν η ακρίβεια χρωμάτων είναι κρίσιμη (branding, σχεδιασμός εκτύπωσης), να επαληθεύετε πάντα τα χρώματά σας στο μέσο προορισμού, όχι μόνο στην οθόνη σας.
Συχνές ερωτήσεις
Ποια είναι η διαφορά μεταξύ HEX και RGB;
Αντιπροσωπεύουν τις ίδιες πληροφορίες σε διαφορετικές σημειογραφίες. Το HEX χρησιμοποιεί δεκαεξαδικό σύστημα (βάση 16) και το RGB δεκαδικό (βάση 10). Το #FF0000 και το rgb(255, 0, 0) είναι και τα δύο καθαρό κόκκινο.
Μπορώ να μετατρέψω σε CMYK για εκτύπωση; Οι μορφές χρωμάτων οθόνης (HEX, RGB, HSL) και οι μορφές εκτύπωσης (CMYK) είναι θεμελιωδώς διαφορετικά μοντέλα χρωμάτων. Υπάρχει μαθηματική μετατροπή, αλλά για ακριβή χρώματα εκτύπωσης θα πρέπει να χρησιμοποιήσετε επαγγελματικό εργαλείο διαχείρισης χρωμάτων.
Τι γίνεται με τη διαφάνεια (alpha);
Το HEX υποστηρίζει alpha με δύο επιπλέον χαρακτήρες (#3B82F680). Το RGB και το HSL το υποστηρίζουν ως συναρτήσεις rgba() και hsla(). Ο Color Converter χειρίζεται και αυτές τις μορφές.
Επόμενα βήματα
Με τα χρώματά σας μετατραπέντα, δοκιμάστε τον Gradient Generator για να δημιουργήσετε όμορφες διαβαθμίσεις CSS, ή χρησιμοποιήστε τον Color Palette Generator για να δημιουργήσετε ένα πλήρες χρωματικό σχήμα γύρω από το επιλεγμένο χρώμα σας.