Τι σημαίνουν όλες αυτές οι μορφές χρωμάτων;

Ένα χρώμα σε μια οθόνη είναι ένα μείγμα κόκκινου, πράσινου και μπλε φωτός, και κάθε μορφή καταγράφει αυτό το μείγμα με τον δικό της τρόπο. Τα εργαλεία 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 είναι δύο ονομασίες για το ίδιο μοντέλο.