Χρωματικοί συνδυασμοί: συμπληρωματικά, ανάλογα, τριαδικά χρώματα και άλλα

Τι είναι ένας χρωματικός συνδυασμός

Ένας χρωματικός συνδυασμός (αρμονία) είναι ένας κανόνας για να διαλέγετε χρώματα που ταιριάζουν μεταξύ τους. Παίρνετε ένα βασικό χρώμα, κρατάτε πόσο φωτεινό και πόσο έντονο είναι και γυρίζετε μόνο την απόχρωση κατά συγκεκριμένες γωνίες πάνω στον χρωματικό κύκλο.

Οι γωνίες είναι το εύκολο κομμάτι. Εξίσου σημαντικό είναι ποιον κύκλο γυρίζετε, γιατί ο κλασικός κύκλος HSL και ένας αντιληπτικός κύκλος όπως το OKLCH δίνουν εμφανώς διαφορετικά αποτελέσματα για την ίδια γωνία. Όλα τα παραδείγματα παρακάτω ξεκινούν από το #2a7fbf, ένα μεσαίο μπλε.

Συμπληρωματικά, διαιρεμένα συμπληρωματικά, ανάλογα, τριαδικά, τετραδικά, τετράγωνο

Κάθε γραμμή κρατά τη φωτεινότητα OKLCH του βασικού χρώματος, 0,577, και τη χρωματική του ένταση (chroma), 0,127. Γυρίζει μόνο η απόχρωση, κατά τις γωνίες του πίνακα. Όταν ένα χρώμα πέφτει εκτός sRGB, η χρωματική ένταση μειώνεται λίγο για να χωρέσει, γι’ αυτό δύο τρία χρώματα είναι λίγο λιγότερο ζωηρά. Εξαίρεση αποτελούν τα μονοχρωματικά: κρατούν την απόχρωση και αλλάζουν τη φωτεινότητα σε βήματα του 0,12.

• Συμπληρωματικά: ο πιο δυναμικός συνδυασμός. Χρησιμοποιήστε το δεύτερο χρώμα μόνο για μικρές πινελιές, όπως ένα κουμπί call to action.
• Διαιρεμένα συμπληρωματικά: η ίδια ενέργεια με τα συμπληρωματικά, αλλά ισορροπούν πιο εύκολα, γιατί η έμφαση μοιράζεται σε δύο γείτονες της αντίθετης απόχρωσης.
• Ανάλογα: ήρεμα και δεμένα. Καλά για εικονογραφήσεις και φόντα, αδύναμα όταν θέλετε ένα στοιχείο να ξεχωρίζει.
• Τριαδικά, τετραδικά και τετράγωνο: ζωντανά και δύσκολα στον έλεγχο. Αφήστε ένα χρώμα να κυριαρχεί και κρατήστε τα υπόλοιπα σε μικρές επιφάνειες.
• Μονοχρωματικά: μία απόχρωση σε διάφορα βήματα φωτεινότητας. Η πιο ασφαλής επιλογή για διεπαφές, αφού η αντίθεση έτσι κι αλλιώς προέρχεται από τη φωτεινότητα.

Γιατί ο χρωματικός κύκλος HSL δίνει άνισους συνδυασμούς

Οι περισσότεροι χρωματικοί κύκλοι στα εργαλεία σχεδίασης είναι HSL: γυρίζουν την απόχρωση και κρατούν τις τιμές κορεσμού και φωτεινότητας HSL. Όμως η φωτεινότητα HSL είναι ένας τύπος, όχι αυτό που βλέπει το μάτι. Γυρίστε ένα χρυσοκίτρινο κατά 180° σε HSL και θα πάρετε ένα βαθύ μπλε που φαίνεται πολύ πιο σκούρο από το κίτρινο.

Η περιστροφή σε OKLCH κρατά ίδια τη φωτεινότητα που αντιλαμβανόμαστε. Ακολουθεί το #f4b400 περιστραμμένο και με τους δύο τρόπους, με τη φωτεινότητα OKLCH κάθε αποτελέσματος.

Το σετ HSL απλώνεται σε φωτεινότητα από 0,489 έως 0,857, οπότε το μπλε και το μωβ βουλιάζουν, ενώ το πράσινο της μέντας λάμπει. Το σετ OKLCH μένει μεταξύ 0,802 και 0,817. Το ίδιο συμβαίνει και με τα καθαρά βασικά χρώματα RGB: τα #ff0000, #00ff00 και #0000ff είναι τέλεια τριάδα στο HSL, όμως η φωτεινότητά τους στο OKLCH είναι 0,628, 0,866 και 0,452.

Υπάρχει ένα αντάλλαγμα. Ένα μπλε τόσο φωτεινό όσο αυτό το κίτρινο δεν μπορεί να είναι πολύ ζωηρό σε οθόνη sRGB, γι’ αυτό το συμπληρωματικό σε OKLCH, το #97c0ff, έχει χρωματική ένταση 0,10 αντί για 0,166. Διαλέγετε ανάμεσα σε ίση φωτεινότητα και ίση ζωηράδα: με κίτρινο και μπλε δεν μπορείτε να έχετε και τα δύο.

Ο κύκλος RYB των ζωγράφων και ο κύκλος RGB της οθόνης

Ο κύκλος από το μάθημα των καλλιτεχνικών είναι RYB: κόκκινο, κίτρινο και μπλε ως βασικά χρώματα, όπως στην ανάμειξη μπογιών. Σε αυτόν, το συμπληρωματικό του κόκκινου είναι το πράσινο και του μπλε το πορτοκαλί. Οι οθόνες αναμειγνύουν φως, γι’ αυτό τα ψηφιακά εργαλεία χρησιμοποιούν κύκλο RGB, όπου το συμπληρωματικό του κόκκινου είναι το κυανό και του μπλε το κίτρινο.

Κανένας δεν είναι λάθος, απλώς απαντούν σε διαφορετικά ερωτήματα. Το RYB ακολουθεί την παράδοση της ζωγραφικής, ενώ το RGB και το OKLCH ακολουθούν τον τρόπο που λειτουργούν οι οθόνες και τα μάτια. Αν ένα εργαλείο σχεδίασης σάς δίνει κυανό εκεί που περιμένατε πράσινο, χρησιμοποιεί τον κύκλο RGB.

Η στήλη OKLCH δείχνει τι κάνει η ίση φωτεινότητα στα ακραία χρώματα. Το συμπληρωματικό του καθαρού μπλε γίνεται μια σκούρα ώχρα με την ίδια φωτεινότητα, 0,45, και το συμπληρωματικό του καθαρού κίτρινου γίνεται ένα σχεδόν λευκό χρώμα λεβάντας στο 0,96.

Ο κανόνας 60-30-10 σε έναν χρωματικό συνδυασμό

Ο συνδυασμός σάς λέει ποια χρώματα να χρησιμοποιήσετε, όχι πόσο από το καθένα. Αυτό το κενό το καλύπτει ο κανόνας 60-30-10: περίπου το 60% της επιφάνειας πηγαίνει σε ένα κυρίαρχο χρώμα, το 30% σε ένα δευτερεύον και το 10% σε ένα χρώμα έμφασης. Με ίσα μερίδια ακόμη και ένας καλός συνδυασμός φαίνεται φλύαρος.

Σε μια διεπαφή το 60% είναι συνήθως ένα σχεδόν ουδέτερο χρώμα με μια υποψία της βασικής απόχρωσης, το 30% είναι το βασικό χρώμα και το 10% το συμπληρωματικό χρώμα έμφασης. Ακολουθεί ένα έτοιμο σετ από το #2a7fbf.

:root {
    --surface: #eff6fd;
    --primary: #2a7fbf;
    --accent: #ab6708;
    --text: #15232f;
}

Πώς να ελέγξετε την αντίθεση ενός χρωματικού συνδυασμού

Το κείμενο δεν γίνεται ευανάγνωστο από τη διαφορά απόχρωσης αλλά από τη διαφορά φωτεινότητας. Το συμπληρωματικό ζεύγος παραπάνω απέχει όσο περισσότερο γίνεται σε απόχρωση, κι όμως το #2a7fbf σε #ab6708 έχει λόγο WCAG 1,05:1 και APCA Lc 0: ως κείμενο είναι πρακτικά αόρατο.

Η ίση φωτεινότητα έχει και ένα πλεονέκτημα. Το λευκό κείμενο σε κάθε χρώμα των συνδυασμών OKLCH παραπάνω πέφτει μεταξύ 4,04:1 και 4,62:1. Στην εκδοχή HSL των ίδιων συνδυασμών κυμαίνεται από 2,15:1 έως 8,90:1. Έτσι μία διόρθωση αρκεί για όλο το σετ OKLCH: χαμηλώστε τη φωτεινότητα στο 0,52 και το λευκό κείμενο περνά το 4,5:1 σε κάθε απόχρωση με χρωματική ένταση 0,127, από 5,00:1 έως 5,91:1.

Για να χρησιμοποιήσετε δύο χρώματα του συνδυασμού μαζί ως κείμενο και φόντο, απομακρύνετέ τα σε φωτεινότητα: κρατήστε τις αποχρώσεις και σπρώξτε το ένα προς το 0,35 και το άλλο προς το 0,93. Μετά ελέγξτε το πραγματικό ζεύγος σε έναν έλεγχο αντίθεσης χρωμάτων και περάστε την παλέτα από έναν προσομοιωτή αχρωματοψίας, αν το χρώμα έμφασης μεταφέρει νόημα.

Ερωτήσεις και απαντήσεις