Μετατροπέας χρωμάτων (HEX, RGB, HSL)
Μετατρέψτε τα χρώματα μεταξύ HEX (#RRGGBB), RGB (0–255) και HSL (απόχρωση, κορεσμός, ελαφρότητα) σε πραγματικό χρόνο. Προσαρμόστε τις τιμές επιλογής ή τύπου για να δείτε όλες τις μορφές να ενημερώνονται μαζί — ιδανικό για CSS, Figma handoff και οδηγίες επωνυμίας.
Πώς να μετατρέψετε χρώματα
1. Επιλέξτε ένα χρώμα οπτικά ή εισαγάγετε τιμές HEX, RGB ή HSL.
2. Δείτε αμέσως ισοδύναμες τιμές σε όλες τις υποστηριζόμενες μορφές.
3. Προσαρμόστε την ελαφρότητα HSL για καταστάσεις αιώρησης, διατηρώντας παράλληλα την απόχρωση της επωνυμίας.
4. Αντιγράψτε τη μορφή που χρειάζεται η στοίβα σας (#hex για CSS, rgb() για σύγχρονα προγράμματα περιήγησης).
Παραδείγματα μετατροπής χρώματος
Μπλε επωνυμία #2563E
RGB rgb(37, 99, 235); HSL hsl(217, 84%, 53%). Σκουραίνει το δείκτη του ποντικιού: hsl(217, 84%, 45%) χωρίς εικασία εξάγωνο.
CSS rgb σε HEX για SVG
rgb(255, 87, 51) → #FF5733 για γέμισμα SVG και χρωματικούς πόρους Android XML.
Ουδέτερο γκρι για τα σύνορα
hsl(220, 10%, 90%) → πολύ ανοιχτό δροσερό γκρι. αυξήστε ελαφρά τον κορεσμό για χρωματισμένα φόντο διεπαφής χρήστη.
Πότε να χρησιμοποιήσετε αυτό το εργαλείο
• Όταν μεταφράζετε διακριτικά σχεδίασης μεταξύ HEX στο Figma και HSL σε μεταβλητές CSS.
• Όταν δημιουργείτε συνεπή φωτεινά/σκοτεινά θέματα μετατοπίζοντας τη φωτεινότητα HSL.
• Όταν τεκμηριώνετε πακέτες επωνυμίας προγραμματιστών και μάρκετινγκ.
Θεωρία χρωμάτων για εργασία διεπαφής
Τα συμπληρωματικά χρώματα είναι αντίθετα με τον τροχό αντίθεσης (8) CTA. Ανάλογες αποχρώσεις (±30°) είναι αρμονικές για τα ταμπλό. Το ουδέτερο UI chrome χρησιμοποιεί συχνά μπλε ή γκρι χαμηλού κορεσμού (hsl 220, 10%, 96%) αντί για καθαρό #EEE, το οποίο μπορεί να φαίνεται ζεστό/κρύο κάτω από διαφορετικές οθόνες. Περιορίστε την παλέτα επωνυμίας σε μία κύρια απόχρωση, 2–3 ουδέτερα και σημασιολογικά πράσινα/κόκκινα για την κατάσταση.
Συχνές ερωτήσεις
Σε τι είναι καλό το HSL;
Ρύθμιση ελαφρότητας και κορεσμού διατηρώντας την απόχρωση σταθερή — π.χ. πρωτεύον, πρωτεύον-hover, κύρια-σίγαση από μία τιμή απόχρωσης.
Η συντομογραφία HEX #RGB?
#F53 επεκτείνεται σε #FF5533. Δεχόμαστε 3- ή 6-ψήφιο εξάγωνο (προαιρετικό #).
sRGB έναντι οθόνης-P3;
Αυτό το εργαλείο χρησιμοποιεί sRGB, τυπικό για web CSS. Οι οθόνες ευρείας γκάμας ενδέχεται να αποδίδονται ελαφρώς διαφορετικά.
Άλφα / διαφάνεια;
Τα 8ψήφια HEX (#RRGGBBAA) και rgba() ενδέχεται να υποστηρίζονται όπου το εργαλείο εκθέτει τα πεδία alpha — ελέγξτε τη διεπαφή χρήστη.
Γιατί τα ποσά RGB μου φαίνονται λανθασμένα στο hex;
Κάθε κανάλι είναι 0–255 → δύο δεκαεξαδικά ψηφία. 255 = FF, όχι "255" συνενωμένο.