Πώς να το χρησιμοποιήσετε
- Πληκτρολογήστε ή επικολλήστε ένα χρώμα, για παράδειγμα #1e90ff, rgb(30 144 255) ή oklch(65% 0.18 250). Μπορείτε επίσης να κάνετε κλικ στον επιλογέα χρώματος.
- Ελέγξτε το δείγμα χρώματος για να βεβαιωθείτε ότι είναι το χρώμα που περιμένατε.
- Αντιγράψτε τη μορφή που χρειάζεστε από τη λίστα. Οι τιμές με διαφάνεια διατηρούν το alpha τους.
Πώς λειτουργεί
Αποδεκτές είσοδοι: HEX με 3, 4, 6 ή 8 ψηφία (το 4ο και το 8ο ψηφίο είναι το alpha), rgb() και rgba() με αριθμούς ή ποσοστά, hsl() και hsla(), hwb(), oklch() και cmyk() με ποσοστά ή αριθμούς από 0 έως 100. Λειτουργούν τόσο η κλασική σύνταξη με κόμμα όσο και η σύγχρονη σύνταξη με κενά και «/ alpha». Η απόχρωση δέχεται deg, turn, rad και grad. Τα ονόματα χρωμάτων όπως «tomato» δεν αναγνωρίζονται· χρησιμοποιήστε τον επιλογέα ή έναν κωδικό.
Όλες οι μετατροπές γίνονται μέσω sRGB. Τα HSL και HWB είναι απλοί μετασχηματισμοί των τιμών RGB, επομένως μετατρέπονται με ακρίβεια. Το OKLCH είναι αντιληπτικός χώρος: ίσα βήματα στη φωτεινότητά του φαίνονται περίπου εξίσου διαφορετικά, κάτι που το καθιστά χρήσιμο για τη δημιουργία παλετών. Υπολογίζεται με τους δημοσιευμένους πίνακες OKLab. Ορισμένα χρώματα OKLCH βρίσκονται εκτός του εύρους που μπορεί να εμφανίσει το sRGB· το εργαλείο το επισημαίνει και δείχνει το πλησιέστερο εμφανίσιμο χρώμα.
Το CMYK υπολογίζεται με τον συνηθισμένο απλοποιημένο τύπο (K = 1 − το μεγαλύτερο κανάλι RGB). Η πραγματική εκτυπωτική απόδοση εξαρτάται από το χαρτί, το μελάνι και το προφίλ ICC, επομένως αντιμετωπίστε αυτούς τους αριθμούς ως αφετηρία και όχι ως προδιαγραφή εκτύπωσης.
Παραδείγματα
Από κωδικό HEX επωνυμίας σε CSS
Ένας οδηγός στυλ δίνει το #0b5d1e. Επικολλήστε τον για να πάρετε rgb(11, 93, 30) για παλαιότερη CSS, hsl(133.9, 78.8%, 20.4%) για να ρυθμίσετε χειροκίνητα τη φωτεινότητα και μια τιμή oklch() για σύγχρονες συναρτήσεις χρώματος CSS.
Ανάγνωση χρώματος με διαφάνεια
Το rgba(0, 0, 0, 0.5) μετατρέπεται σε #00000080. Τα δύο τελευταία ψηφία HEX (80) είναι το alpha: 128 στα 255, περίπου 50 %.
Έλεγχος μιας τιμής OKLCH από αρχείο σχεδίασης
Το oklch(70% 0.4 150) είναι ένα πολύ κορεσμένο πράσινο που οι οθόνες sRGB δεν μπορούν να εμφανίσουν. Το εργαλείο το επισημαίνει και δίνει το πλησιέστερο χρώμα sRGB, ώστε να γνωρίζετε ότι το σχέδιο θα φαίνεται διαφορετικά στις περισσότερες οθόνες.
Συχνές ερωτήσεις
Γιατί η μετατροπή σε HSL και πίσω αλλάζει μερικές φορές το HEX κατά ένα;
Το HEX αποθηκεύει ακέραιους αριθμούς από 0 έως 255 ανά κανάλι. Οι τιμές σε άλλες μορφές στρογγυλοποιούνται για εμφάνιση (HSL σε ένα δεκαδικό ψηφίο) και η μετατροπή μιας στρογγυλοποιημένης τιμής πίσω μπορεί να καταλήξει ένα βήμα μακριά. Αντιγράψτε το HEX αν χρειάζεστε το ακριβές αρχικό.
Είναι σωστή η τιμή CMYK για εκτύπωση;
Όχι από μόνη της. Χρησιμοποιεί τον απλό τύπο χωρίς προφίλ χρώματος. Οι εκτυπωτές χρησιμοποιούν προφίλ όπως FOGRA ή GRACoL που δίνουν διαφορετικούς αριθμούς, γι' αυτό ρωτήστε τον εκτυπωτή σας ή κάντε τη μετατροπή σε εφαρμογή με διαχείριση χρώματος.
Τι είναι το OKLCH και μπορώ να το χρησιμοποιήσω στη CSS;
Το OKLCH περιγράφει ένα χρώμα με βάση την αντιληπτή φωτεινότητα, τη χρωματικότητα (ένταση χρώματος) και την απόχρωση. Οι τρέχουσες εκδόσεις των κύριων προγραμμάτων περιήγησης υποστηρίζουν το oklch() στη CSS. Διατηρήστε μια εφεδρική τιμή HEX ή rgb() αν υποστηρίζετε παλαιότερα προγράμματα περιήγησης.
Τι σημαίνει ένας κωδικός HEX με 8 ψηφία;
#RRGGBBAA: τα δύο τελευταία ψηφία είναι η αδιαφάνεια, από 00 (πλήρως διαφανές) έως ff (πλήρως αδιαφανές). Η τετραψήφια μορφή #RGBA λειτουργεί με τον ίδιο τρόπο με ένα ψηφίο ανά κανάλι.
Απόρρητο
Τα χρώματα μετατρέπονται στο πρόγραμμα περιήγησής σας. Τίποτα από όσα εισάγετε δεν αποστέλλεται πουθενά ούτε αποθηκεύεται.