Το Color Format Converter μεταφράζει οποιοδήποτε χρώμα μεταξύ HEX, RGB, HSL, HSV, και OKLCH. Επιλέξτε ένα χρώμα με το εγγενές picker, πληκτρολογήστε μια τιμή hex, επικολλήστε οποιοδήποτε CSS color string, ή προσαρμόστε τους sliders RGB — κάθε μορφή ενημερώνεται ζωντανά και έχει το δικό της κουμπί Copy.
Το σύγχρονο CSS σάς δίνει μια ντουζίνα τρόπους για να γράψετε το ίδιο χρώμα: #7C3AED, rgb(124, 58, 237), hsl(262, 83%, 58%), oklch(55% 0.24 293), συν παραλλαγές alpha για καθεμία. Συχνά χρειάζεται να μετατρέπετε μεταξύ τους — ένα σχέδιο Figma σάς δίνει ένα OKLCH, ο κώδικάς σας χρησιμοποιεί HEX, και οι μεταβλητές θέματος προτιμούν HSL για προσαρμογές hover. Το Color Format Converter κάνει όλες τις μετατροπές σε ένα πάνελ. Επιλέξτε ένα χρώμα από το εγγενές color picker, επικολλήστε ένα υπάρχον χρώμα σε οποιαδήποτε σύνταξη, ή σύρετε τους sliders RGB για να ρυθμίσετε ένα. Κάθε κοινή μορφή αποδίδεται ταυτόχρονα: HEX (με alpha), rgb()/rgba(), hsl()/hsla(), hsv(), και oklch() — συν ένα απόσπασμα μεταβλητής CSS και την υπολογισμένη τιμή φωτεινότητας για γρήγορους υπολογισμούς αντίθεσης. Το κανάλι alpha υποστηρίζεται από άκρη σε άκρη. Κάθε μορφή έχει το δικό της κουμπί Copy για χρήση με ένα κλικ, και ο parser δέχεται εγγενή ονόματα χρωμάτων και οτιδήποτε υποστηρίζει το CSS.
Εμφανίζει HEX, RGB/RGBA, HSL/HSLA, HSV, και OKLCH ταυτόχρονα — επιλέξτε όποια μορφή περιμένει ο κώδικάς σας χωρίς επαναλαμβανόμενη μετατροπή.
Δέχεται HEX (#abc ή #aabbcc ή #aabbccff), rgb()/rgba(), hsl()/hsla(), oklch(), και εγγενή ονόματα χρωμάτων. Επικολλήστε οτιδήποτε υποστηρίζει το CSS.
Χειρίζεται τη νέα μορφή OKLCH που χρησιμοποιείται στο σύγχρονο CSS — έναν αντιληπτικά ομοιόμορφο χρωματικό χώρο που γίνεται η νέα προεπιλογή σε design systems.
Κάθε έξοδος έχει το δικό της κουμπί Copy. Κάντε κλικ για να πάρετε ακριβώς τη μορφή που χρειάζεστε για τον κώδικά σας, χωρίς χειροκίνητη επιλογή.
Προσαρμόστε τους sliders Red/Green/Blue/Alpha για λεπτομερή ρύθμιση. Κάθε μορφή ενημερώνεται σε πραγματικό χρόνο καθώς σύρετε.
Η διαφάνεια χειρίζεται σε κάθε μορφή: #RRGGBBAA, rgba(...), hsla(...). Ορίστε τη μία φορά, μετατρέπεται παντού.
Το Figma σάς δίνει ένα OKLCH ή HSL — επικολλήστε το, αντιγράψτε το ισοδύναμο HEX για τη ρύθμιση Tailwind ή τις μεταβλητές CSS σας χωρίς να φύγετε από το πρόγραμμα περιήγησης.
Σύρετε τους sliders για να εξερευνήσετε αποχρώσεις, σημειώνοντας τις τιμές OKLCH για μια συστηματική παλέτα design system.
Μετατρέψτε ένα χρώμα επωνυμίας στη μορφή HSL του ώστε να χρησιμοποιήσετε hsl(var(--brand-h) var(--brand-s) calc(var(--brand-l) + 10%)) για καταστάσεις hover.
Το πεδίο φωτεινότητας σάς δίνει την ακατέργαστη τιμή που χρησιμοποιείται στους υπολογισμούς αντίθεσης WCAG — χρήσιμο για υπολογισμούς προσβασιμότητας.
Επικολλήστε ένα oklch(...) από ένα αρχείο CSS που διαβάζετε και δείτε άμεσα ποιο χρώμα παράγει στην πραγματικότητα.
Κάντε κλικ στο εικονίδιο Color Formats στο dock του DevSuite Pro. Ανοίγει ένα πάνελ με color picker, πεδίο hex, και sliders RGB.
Χρησιμοποιήστε το color picker, πληκτρολογήστε ένα hex, ή επικολλήστε οποιοδήποτε CSS color string (rgb(...), oklch(...), κ.λπ.). Το χρώμα εμφανίζεται σε προεπισκόπηση άμεσα.
Κάθε μορφή αποδίδεται παρακάτω: HEX, RGB, HSL, HSV, OKLCH, μεταβλητή CSS, και φωτεινότητα. Όλες παραμένουν συγχρονισμένες καθώς προσαρμόζετε.
Σύρετε τους sliders R/G/B/A για λεπτομερείς προσαρμογές. Ιδανικό για να πετύχετε μια συγκεκριμένη απόχρωση που ταιριάζει με μια προδιαγραφή σχεδίασης.
Κάντε κλικ στο Copy στη γραμμή της μορφής που θέλετε — η τιμή προσγειώνεται στο πρόχειρό σας στη σωστή σύνταξη.
Εγκαταστήστε το DevSuite Pro δωρεάν και ξεκλειδώστε 64+ εργαλεία προγραμματιστή για το πρόγραμμα περιήγησής σας.
