Τι σημαίνουν όλες αυτές οι μορφές χρωμάτων;
Ένα χρώμα σε μια οθόνη είναι ένα μείγμα κόκκινου, πράσινου και μπλε φωτός, και κάθε μορφή καταγράφει αυτό το μείγμα με τον δικό της τρόπο. Τα εργαλεία CSS και σχεδίασης χρησιμοποιούν κωδικούς HEX και τιμές RGB. Τα HSL, HSV και HWB περιγράφουν ένα χρώμα με βάση την απόχρωσή του, δηλαδή τη γωνία του στον χρωματικό κύκλο, καθώς και το πόσο έντονο και φωτεινό είναι, κάτι που διευκολύνει τη χειροκίνητη προσαρμογή του. Το CMYK δίνει τις ποσότητες κυανού, ματζέντα, κίτρινου και μαύρου μελανιού για εκτύπωση. Τα LAB, LCH, OKLab και OKLCH έχουν σχεδιαστεί έτσι ώστε ίσα βήματα στις τιμές τους να φαίνονται περίπου ίσα στο μάτι, κάτι που είναι χρήσιμο για παλέτες και διαβαθμίσεις, ενώ το σύγχρονο CSS υποστηρίζει και τα τέσσερα. Τα τερματικά χρησιμοποιούν κωδικούς χρωμάτων ANSI, ενώ το CSS διαθέτει και ονομασμένα χρώματα, όπως το tomato.
Ακολουθεί το ίδιο πορτοκαλί χρώμα σε κάθε μορφή:
| Μορφή |
Παράδειγμα |
Τι αντιπροσωπεύουν οι τιμές |
| HEX |
#ff6600 |
Κόκκινο, πράσινο και μπλε, με δύο δεκαεξαδικά ψηφία το καθένα |
| RGB |
rgb(255, 102, 0) |
Κόκκινο, πράσινο και μπλε από 0 έως 255 |
| HSL |
hsl(24, 100%, 50%) |
Απόχρωση, κορεσμός και φωτεινότητα |
| HSV |
hsv(24, 100%, 100%) |
Απόχρωση, κορεσμός και τιμή, γνωστό και ως HSB |
| HWB |
hwb(24 0% 0%) |
Απόχρωση, λευκότητα και μαυρότητα |
| CMYK |
cmyk(0%, 60%, 100%, 0%) |
Κυανό, ματζέντα, κίτρινο και μαύρο μελάνι |
| LAB |
lab(62.31, 55, 71.33) |
Φωτεινότητα CIE, πράσινο προς κόκκινο και μπλε προς κίτρινο |
| LCH |
lch(62.31, 90.07, 52.36) |
Φωτεινότητα CIE, χρωματικότητα και απόχρωση |
| OKLab |
oklab(69.58% 0.1482 0.1406) |
Φωτεινότητα και δύο χρωματικοί άξονες, όπως στο LAB |
| OKLCH |
oklch(69.58% 0.2043 43.49) |
Φωτεινότητα, χρωματικότητα και απόχρωση στο OKLab |
| XYZ |
xyz(46, 30.77, 3.52) |
Ο χρωματικός χώρος CIE XYZ, στον οποίο βασίζεται το LAB |
| HCG |
hcg(24, 100%, 0%) |
Απόχρωση, χρωματικότητα και βαθμός του γκρι |
| Όνομα χρώματος |
orangered |
Το πλησιέστερο ονομασμένο χρώμα CSS |
| ANSI 16 |
91 |
Κωδικός τερματικού για ένα από τα 16 βασικά χρώματα |
| ANSI 256 |
208 |
Κωδικός τερματικού για ένα από τα 256 χρώματα |
| AppleScript RGB |
{65535, 26214, 0} |
Κόκκινο, πράσινο και μπλε από 0 έως 65535, όπως τα καταγράφει το AppleScript |
| Κλίμακα του γκρι |
gray(46.7%) |
Φωτεινότητα από 0% έως 100% |
Περιγραφή εργαλείου
Αυτό το εργαλείο μετατρέπει ένα χρώμα μεταξύ αυτών των 17 μορφών και το εμφανίζει ως δείγμα κάτω από το αποτέλεσμα. Όλοι οι μετατροπείς χρωμάτων εδώ λειτουργούν με τον ίδιο τρόπο, από τον γενικό Μετατροπέα χρωμάτων έως εκείνους που αφορούν ένα μόνο ζεύγος, όπως HEX σε RGB, RGB σε CMYK ή HEX σε όνομα χρώματος: ξεκινούν με τις μορφές που αναφέρονται στο όνομά τους, ενώ τα μενού Πηγή και Προορισμός σάς επιτρέπουν να επιλέξετε οποιαδήποτε άλλη. Επικολλήστε ένα χρώμα και το αποτέλεσμα εμφανίζεται καθώς πληκτρολογείτε, έτοιμο για αντιγραφή. Όταν ως πηγή είναι επιλεγμένη η Αυτόματη ανίχνευση, που είναι η αρχική ρύθμιση στον Μετατροπέα χρωμάτων, το εργαλείο αναγνωρίζει τη μορφή από τον τρόπο γραφής του χρώματος. Το κουμπί εναλλαγής αντιστρέφει τη μετατροπή.
Παραδείγματα
| Είσοδος |
Προορισμός |
Αποτέλεσμα |
#ff6600 |
RGB |
rgb(255, 102, 0) |
rgb(37, 99, 235) |
HEX |
#2563eb |
#2563eb |
HSL |
hsl(221.2, 83.2%, 53.3%) |
rgb(37, 99, 235) |
CMYK |
cmyk(84.3%, 57.9%, 0%, 7.8%) |
#2563eb |
HSV |
hsv(221.2, 84.3%, 92.2%) |
#2563eb |
OKLCH |
oklch(54.61% 0.2152 262.88) |
rgb(37, 99, 235) |
LAB |
lab(46.06, 30.96, -73.83) |
#ff6347 |
Όνομα χρώματος |
tomato |
rebeccapurple |
HEX |
#663399 |
rgba(37, 99, 235, 0.5) |
HEX |
#2563eb80 |
Τι μπορείτε να επικολλήσετε
- Κωδικούς HEX με 3, 4, 6 ή 8 ψηφία, με ή χωρίς
#. Το τέταρτο ψηφίο ή το τελευταίο ζεύγος ορίζει την αδιαφάνεια.
- Συναρτήσεις όπως
rgb(), hsl() ή oklch(), με κόμματα ή κενά ανάμεσα στις τιμές και προαιρετική αδιαφάνεια ως τέταρτη τιμή ή μετά από κάθετο: rgba(37, 99, 235, 0.5) ή rgb(37 99 235 / 50%).
- Ποσοστά για το κόκκινο, το πράσινο και το μπλε, όπως στο
rgb(100%, 40%, 0%), καθώς και αποχρώσεις σε deg, rad, grad ή turn, όπως στο hsl(0.5turn, 100%, 50%).
- Απλούς αριθμούς χωρίς όνομα συνάρτησης, όπως
255, 102, 0. Η Αυτόματη ανίχνευση διαβάζει τρεις αριθμούς ως RGB ή ως HSL όταν οι δύο τελευταίοι είναι ποσοστά, και τέσσερις ως CMYK, εκτός αν μοιάζουν με RGB με αδιαφάνεια.
- Ονόματα χρωμάτων με κεφαλαία ή πεζά γράμματα, με ή χωρίς κενά: το
Rebecca Purple αναγνωρίζεται.
- Τιμές HSB γραμμένες ως
hsb() και χρώματα AppleScript μέσα σε άγκιστρα, όπως {65535, 26214, 0}.
Πώς λειτουργεί
Οι υπολογισμοί γίνονται από τη βιβλιοθήκη JavaScript color-convert, για μετατροπή χρωμάτων.
- Η αδιαφάνεια διατηρείται στις μορφές HEX, RGB, HSL, HWB, OKLab και OKLCH, οι οποίες μπορούν να την αποθηκεύσουν. Οι υπόλοιπες μορφές την παραλείπουν.
- Τα LAB, LCH και XYZ χρησιμοποιούν τις τιμές CIE με λευκό σημείο D65. Τα
lab() και lch() του CSS χρησιμοποιούν το λευκό σημείο D50, επομένως οι τιμές τους διαφέρουν ελαφρώς.
- Τα LAB, LCH, OKLab και OKLCH μπορούν να περιγράψουν χρώματα που δεν μπορούν να εμφανιστούν σε οθόνες. Κατά τη μετατροπή τους σε HEX, RGB ή άλλη μορφή οθόνης, τα κανάλια τους περιορίζονται στο εύρος από 0 έως 255, επομένως το
oklch(70% 0.3 145) γίνεται #00c800.
- Το αποτέλεσμα ονόματος χρώματος είναι το πλησιέστερο από τα ονομασμένα χρώματα CSS, επομένως είναι ακριβές μόνο για χρώματα που έχουν όνομα: το
#ff6600 δίνει orangered, που είναι #ff4500.
- Τα αποτελέσματα ANSI 16 και ANSI 256 είναι προσεγγιστικά, καθώς αυτές οι παλέτες έχουν μόνο 16 ή 256 χρώματα. Τα αποτελέσματα ANSI 16 είναι κωδικοί χρώματος προσκηνίου, από 30 έως 37 και από 90 έως 97, ενώ οι κωδικοί φόντου από 40 έως 47 και από 100 έως 107 αναγνωρίζονται ως τα ίδια χρώματα.
- Το CMYK υπολογίζεται με τον βασικό τύπο, χωρίς προφίλ χρώματος εκτυπωτή, επομένως οι τιμές CMYK ενός τυπογραφείου για το ίδιο χρώμα μπορεί να διαφέρουν.
- Η κλίμακα του γκρι είναι ο μέσος όρος των τιμών κόκκινου, πράσινου και μπλε.
Συμβουλές
- Τα αποτελέσματα HEX, RGB, HSL, HWB, OKLab, OKLCH και ονόματος χρώματος είναι έγκυρο CSS, επομένως μπορείτε να τα επικολλήσετε αυτούσια σε ένα φύλλο στυλ.
- Η Αυτόματη ανίχνευση διαβάζει έναν τριψήφιο αριθμό, όπως το 208, ως σύντομο κωδικό HEX, επομένως επιλέξτε ANSI 256 ή ANSI 16 ως πηγή για κωδικούς τερματικού.
- Τα HSV και HSB είναι δύο ονομασίες για το ίδιο μοντέλο.