Το RGB δεν αρκεί: συμβολισμοί χρωμάτων HSL, CMYK και OKLCH

Στο προηγούμενο άρθρο, Πώς φτιάχνει χρώματα ο υπολογιστής: RGB, HEX και δυαδικοί αριθμοί, είδαμε ότι ένα χρώμα είναι απλώς τρεις αριθμοί — κόκκινο, πράσινο, μπλε, ο καθένας από 0 έως 255. Οι οθόνες λειτουργούν μια χαρά με αυτούς τους αριθμούς. Αλλά μόλις ένας άνθρωπος αρχίσει να δουλεύει με χρώματα, το RGB γίνεται αμέσως δυσκίνητο.

RGB είναι βολικό, αλλά όχι διαισθητικό

«Λίγο πιο φωτεινό κόκκινο.» Πώς το φτιάχνετε σε RGB; Πρέπει να αυξήσετε και τα τρία κανάλια ταυτόχρονα. «Θέλω να μειώσω ελαφρά τον κορεσμό»: βλέποντας μόνο RGB δεν ξέρετε τι να αλλάξετε. «Τυπώστε αυτό το χρώμα σε χαρτί»: με RGB είναι εντελώς αδύνατο.

Άλλες μέθοδοι χρωματικής αναπαράστασης αναπτύχθηκαν για να λύσουν αυτά τα προβλήματα.

HSL — ο τρόπος σκέψης του ανθρώπου

Το HSL χωρίζει το χρώμα σε απόχρωση · κορεσμό · φωτεινότητα. Το hsl(14, 100%, 60%) είναι το ίδιο χρώμα με το #FF5733, αλλά τώρα είναι σαφές τι συμβάλλει στο αποτέλεσμα.

Αν το RGB είναι η γλώσσα του υπολογιστή — το HSL είναι η γλώσσα του designer. Μπορείτε να χειριστείτε το ίδιο χρώμα από την οπτική τι θέλετε να αλλάξετε.

Hue — η απόχρωση είναι ένας κύκλος 360°

Η απόχρωση κυκλώνει σαν ρολόι. Ξεκινά από 0° και φτάνει στους 360°. Το 0° και το 360° είναι και τα δύο κόκκινο.

Saturation — ο κορεσμός είναι η ένταση του χρώματος

Ακόμα και με την ίδια απόχρωση, μειώνοντας τον κορεσμό το χρώμα πλησιάζει προς το γκρι.

Lightness — η φωτεινότητα από μαύρο έως λευκό

L στο 0% σημαίνει πάντα μαύρο, στο 100% πάντα λευκό. Το 50% είναι η «φυσική» φωτεινότητα του χρώματος.

Η πραγματική αξία του HSL — δημιουργία παλέτας

Διατηρώντας σταθερή την απόχρωση (Hue) και αλλάζοντας μόνο το L, παίρνετε μια φυσικά εναρμονισμένη ομάδα χρωμάτων. Για να κάνετε το ίδιο με RGB θα χρειαστεί να υπολογίσετε χειροκίνητα 9 τιμές, ενώ στο HSL αρκεί να αλλάξετε το L σε βήματα από 12% έως 92%.

Και οι δύο παλέτες παραπάνω μπορούν να δημιουργηθούν με μία μόνο γραμμή.

:root {
  --terra-100: hsl(14 60% 92%);
  --terra-200: hsl(14 60% 82%);
  --terra-300: hsl(14 60% 72%);
  /* ... αλλάξτε μόνο L κατά 10 και τελειώσατε */
}

Εδώ το HSL αποδίδει στο έπακρο κατά τη δημιουργία design systems.

CMYK — η γλώσσα του μελανιού

Για να αποδοθεί χρώμα σε χαρτί αντί για οθόνη, χρειάζεται ένα εντελώς διαφορετικό σύστημα. Το CMYK είναι η αναλογία των τεσσάρων μελανιών που χρησιμοποιεί το τυπογραφείο.

Γιατί το μαύρο συμβολίζεται με “K” και όχι “B”; Επειδή το B δημιουργεί σύγχυση με το Blue. Προέρχεται επίσης από τον τυπογραφικό όρο «Key plate» — η πλάκα αναφοράς που ευθυγραμμίζει τα υπόλοιπα μελάνια.

Το φως φωτίζει όσο προστίθεται, το μελάνι σκοτεινιάζει

Η μεγαλύτερη διαφορά μεταξύ RGB και CMYK είναι ο τρόπος ανάμειξης.

Το κόκκινο μελάνι φαίνεται κόκκινο γιατί απορροφά όλα τα άλλα χρώματα φωτός και αντανακλά μόνο το κόκκινο. Το μελάνι αφαιρεί φως. Γι’ αυτό όσο περισσότερο μελάνι αναμειγνύεται, τόσο πιο σκούρο γίνεται το χρώμα. Θεωρητικά, αναμειγνύοντας CMY προκύπτει μαύρο, αλλά στην πράξη βγαίνει θολό καφέ. Γι’ αυτό υπάρχει ξεχωριστό μαύρο μελάνι (K).

Πού χρησιμοποιείται το CMYK

Αν σχεδιάζετε για οθόνες, σχεδόν ποτέ δεν θα χρειαστείτε CMYK. Εμφανίζεται μόνο για εκτύπωση σε χαρτί.

• Αποστολή αρχείου στο τυπογραφείο — επαγγελματικές κάρτες, αφίσες, βιβλία, συσκευασία. Αν στείλετε αρχείο RGB, το τυπογραφείο το μετατρέπει σε CMYK.
• Εργασία για εκτύπωση στο Photoshop / Illustrator — ξεκινάτε απευθείας με χρωματική λειτουργία CMYK.
• Brand guide — καταγράφετε και το HEX για οθόνες και το CMYK για εκτύπωση. Το ίδιο χρώμα μάρκας πρέπει να μοιάζει σε αμφότερα τα μέσα.

Γιατί τα χρώματα οθόνης και εκτύπωσης διαφέρουν — Gamut

Το εύρος χρωμάτων της οθόνης (RGB gamut) και το εύρος χρωμάτων του μελανιού (CMYK gamut) δεν ταυτίζονται. Ένα έντονο φθορίζον ροζ σε οθόνη δεν αποδίδεται σωστά στην εκτύπωση — απλά δεν μπορεί να δημιουργηθεί με μελάνι.

Γι’ αυτό οι designers εκτύπωσης επιλέγουν μόνο χρώματα εντός του CMYK gamut πριν ξεκινήσουν. Η εκτύπωση σχεδίων που φτιάχτηκαν σε RGB συχνά αποδίδει ξεθωριασμένα χρώματα.

Πώς γράφονται οι τιμές CMYK

Γράφετε πόσο ποσοστό από κάθε μελάνι θα εφαρμοστεί. 0% σημαίνει καθόλου, 100% σημαίνει πλήρες.

Το βαθύ μαύρο με μόνο K 100% αποδίδει θολό, γκριζωπό μαύρο. Γι’ αυτό τα τυπογραφεία προσθέτουν CMY για ένα πιο πλούσιο μαύρο.

OKLCH — οι συντεταγμένες του ανθρώπου

Ένα χρωματικό μοντέλο που έκανε δυναμική εμφάνιση στα 2020s. Λέξη-κλειδί: «φυσικό για το ανθρώπινο μάτι».

Οι τρεις συντεταγμένες μοιάζουν με αυτές του HSL:

• L — Lightness (φωτεινότητα, 0~1)
• C — Chroma (κορεσμός, 0~περίπου 0.4)
• H — Hue (απόχρωση, 0~360°)

Το HSL όμως έχει ένα κρυφό πρόβλημα. Ακόμα και με L = 50%, η αντιληπτή φωτεινότητα διαφέρει σημαντικά ανά χρώμα. Ας το συγκρίνουμε άμεσα.

Σε μια γραμμή — RGB και HSL είναι συντεταγμένες της μηχανής. OKLCH είναι συντεταγμένες του ανθρώπου.

L · C · H, ο ρόλος του καθενός

Ας δούμε τι αλλάζει όταν τροποποιείτε μόνο μία συντεταγμένη του ίδιου χρώματος.

Πού χρησιμοποιείται

• Παλέτα με ομοιόμορφη φωτεινότητα — όταν θέλετε 8 χρώματα κατηγοριών με ίση φωτεινότητα
• Αυτόματη μετατροπή dark/light mode — αντιστροφή μόνο της τιμής L για φυσικό dark theme
• Προσβασιμότητα — ακριβής πρόβλεψη της αντίθεσης φωτεινότητας κειμένου και φόντου
• Gradients — φυσική ροή χωρίς γκριζωπή ζώνη στο μέσον

Υιοθετήθηκε επίσημα από το CSS Color Level 4 και χρησιμοποιείται απευθείας στα σύγχρονα browsers.

.btn { background: oklch(67% 0.18 30); }       /* πορτοκαλί */
.btn:hover { background: oklch(60% 0.18 30); } /* μειώνουμε L κατά 7 → σκοτεινιάζει ακριβώς τόσο */

Τι χρησιμοποιούμε και πότε

Για τις περισσότερες ψηφιακές εργασίες, RGB/HEX επαρκούν. Το HSL αξίζει να θυμάστε όταν φτιάχνετε παλέτες, και το OKLCH βοηθά σημαντικά στο σχεδιασμό dark/light mode.

Πώς το fns χειρίζεται τα χρώματα

Μόλις καταλάβετε ότι τα χρώματα είναι αριθμοί, το επόμενο βήμα είναι να έχετε τα αγαπημένα σας χρώματα στα άκρα των δακτύλων σας. Το fns συγκεντρώνει όλη τη ροή — εξαγωγή, αποθήκευση και επαναχρησιμοποίηση χρωμάτων — πίσω από ένα πλήκτρο.

Eyedropper — εξαγωγή χρώματος από οπουδήποτε στην οθόνη — ⌘+Shift+K

Το Eyedropper είναι εργαλείο που αντλεί το ακριβές χρώμα από οποιοδήποτε pixel της οθόνης. Είναι σαν να παίρνετε τον color picker του Figma ή του Photoshop και να τον κάνετε διαθέσιμο σε ολόκληρο το σύστημα.

Πατώντας ⌘+Shift+K εμφανίζεται το Eyedropper του fns από οπουδήποτε στην οθόνη. Ένα pixel από σχεδιαστικό αρχείο, μια συγκεκριμένη περιοχή φωτογραφίας, το χρώμα φόντου άλλης εφαρμογής — τοποθετείτε τον κέρσορα και κάνετε κλικ για να αντλήσετε το ακριβές χρώμα.

• Αποθηκεύεται αυτόματα στο clipboard με κάθε κλικ. Δεν χρειάζεται ξεχωριστή ενέργεια «αντιγραφής».
• Στο widget του Eyedropper επιλέγετε σε ποια μορφή (RGB / HEX / HSL / CMYK / OKLCH) θα αποθηκευτεί στο clipboard.
• Εμφανίζεται οπτική προεπισκόπηση του χρώματος που αντλήθηκε καθώς και τα κοντινότερα χρώματα συστήματος.

Eyedropper → αυτόματη αποθήκευση στο clipboard → ανάκτηση από τον clipboard picker — η ροή δεν διακόπτεται. Δεν χρειάζεται να ανοίξετε ξεχωριστό παράθυρο όπως το Digital Color Meter του Mac, ούτε να πατάτε κάθε φορά συντόμευση αντιγραφής.

Το clipboard αναγνωρίζει αυτόματα χρώματα

Το ιστορικό clipboard του fns αναγνωρίζει αυτόματα αν το κείμενο που αντιγράψατε είναι κώδικας χρώματος. Λειτουργεί ανεξάρτητα από τη μορφή.

Όταν ανακτάτε ένα αποθηκευμένο χρώμα από το ιστορικό, είναι δύσκολο να θυμηθείτε ποιο χρώμα ήταν μόνο από το κείμενο. Το fns εμφανίζει ένα μικρό color chip δίπλα σε κάθε στοιχείο, ώστε να το αναγνωρίζετε με μια ματιά.

Φιλτράρισμα μόνο χρωμάτων

Με ένα πλήκτρο φιλτράρετε μόνο κωδικούς χρωμάτων από το ιστορικό clipboard. Όταν κατά τη διάρκεια σχεδιαστικής εργασίας θέλετε να δείτε μόνο τα τελευταία χρώματα που χρησιμοποιήσατε, δεν χρειάζεται να ψάχνετε ανάμεσα σε κείμενα, URLs και κώδικα.

• Στον ίδιο picker πληκτρολογείτε φράση-φίλτρο όπως color: → εμφανίζονται μόνο χρωματικά στοιχεία
• Αναζήτηση με όνομα χρώματος — αναζητώντας “blue” ή “red” εμφανίζονται μόνο χρώματα της αντίστοιχης οικογένειας
• Οπτική ομαδοποίηση παρόμοιων χρωμάτων

Μετατροπή χρώματος σε άλλη μορφή

Μπορείτε να μετατρέψετε ένα χρώμα σε άλλο σύστημα γραφής και να το ανακτήσετε. Αν αντιγράψατε #FF5733 από το Figma και θέλετε να το επικολλήσετε ως rgb(...) σε CSS, επιλέξτε το στοιχείο στον clipboard picker του fns και η μετατροπή γίνεται αυτόματα με μία συντόμευση.

Δεν χρειάζεται πια να ανοίγετε μετατροπέα κάθε φορά που μετακινείστε μεταξύ Figma (HSB) και CSS (HSL/HEX/OKLCH).

Text expansion και ομαδοποίηση

Τα χρώματα brand που χρησιμοποιείτε συχνά εγγράφονται ως συντομογραφίες κειμένου.

Οι ίδιες συντομογραφίες λειτουργούν παντού: σε πεδία χρώματος CSS, στο Figma, σε μηνύματα Slack, σε code editors. Εξαλείφεται ο χρόνος αναζήτησης και αντιγραφής χρωμάτων brand κάθε φορά.

Δοκιμάστε το fns για να μειώσετε τον χρόνο που ξοδεύετε ανοίγοντας μετατροπείς και αντιγράφοντας κωδικούς χρωμάτων σε διαφορετικές μορφές.

Θέλετε να μάθετε από πού προέρχονται αυτοί οι αριθμοί — τα βασικά των τριών καναλιών RGB, των δυαδικών αριθμών και της σημειογραφίας HEX; Ξεκινήστε με το Πώς φτιάχνει χρώματα ο υπολογιστής: RGB, HEX και δυαδικοί αριθμοί.