Χρειάζεστε ένα χρώμα για ένα πρότυπο σχέδιο, ένα διάγραμμα ή έναν κενό καμβά, και προτιμάτε να μην το επιλέξετε από συνήθεια; Αυτή η δωρεάν γεννήτρια τυχαίων χρωμάτων αντλεί χρώματα από ολόκληρο το εύρος των 24 bit που μπορεί να εμφανίσει μια οθόνη και τοποθετεί το καθένα σε ένα δείγμα χρώματος δίπλα στον κωδικό του. Στο πεδίο «Πλήθος» επιλέξτε πόσα χρώματα θέλετε — οποιονδήποτε αριθμό από 1 έως 50 — επιλέξτε τις μορφές που χρειάζεστε και πατήστε το κουμπί «Δημιουργία». Η σελίδα ανοίγει με ένα χρώμα σε HEX, οπότε το πρώτο αποτέλεσμα απέχει μόλις ένα κλικ. Το πλαίσιο ελέγχου «Κωδικός HEX» είναι επιλεγμένο εξαρχής, δίπλα του βρίσκονται τα πλαίσια «Κωδικός RGB» και «Κωδικός HSL», και οποιοσδήποτε συνδυασμός των τριών μπορεί να ενεργοποιηθεί ταυτόχρονα. Το κουμπί με το γρανάζι δίπλα στο κουμπί «Δημιουργία» ανοίγει την ενότητα «Σύνθετες επιλογές», όπου μπορείτε να περιορίσετε τα χρώματα σε έναν τύπο ή εύρος, να αποκλείσετε τις επαναλήψεις και να αλλάξετε τον τρόπο γραφής του HEX.
Κάθε χρώμα δημιουργείται στο πρόγραμμα περιήγησής σας μέσω του Web Crypto API (crypto.getRandomValues), το οποίο παρέχει κρυπτογραφικά ισχυρά τυχαία byte από την ίδια την πηγή τυχαιότητας του συστήματός σας, αντί για μια ψευδοτυχαία συνάρτηση όπως η Math.random(). Ένα χρώμα στην οθόνη αποτελείται από τρία κανάλια — κόκκινο, πράσινο και μπλε — καθένα από τα οποία είναι ένας ακέραιος αριθμός από 0 έως 255, και ένα τυχαίο byte μπορεί να πάρει ακριβώς 256 τιμές. Δηλαδή κάθε κανάλι είναι απλώς ένα byte, χωρίς κανένα ενδιάμεσο βήμα: δεν λαμβάνεται κανένα υπόλοιπο, και κανένα βήμα μετατροπής δεν ευνοεί καμία απόχρωση. Αυτό κάνει όλα τα 16.777.216 χρώματα που μπορεί να παράγει η σελίδα απολύτως ισοπίθανα κάθε φορά που πατάτε «Δημιουργία». Ένα στενότερο εύρος στις «Σύνθετες επιλογές» διατηρεί αυτή την εγγύηση εντός του εύρους: τα χρώματα εξακολουθούν να αντλούνται από ολόκληρο τον χώρο, και όσα πέφτουν εκτός αποκλείονται, οπότε κάθε χρώμα που επιτρέπει το εύρος έχει την ίδια πιθανότητα. Τίποτα δεν αποστέλλεται σε διακομιστή, τίποτα δεν καταγράφεται, και αφού φορτωθεί η σελίδα συνεχίζει να λειτουργεί ακόμα και χωρίς σύνδεση στο διαδίκτυο.
Οι τρεις μορφές περιγράφουν το ίδιο χρώμα με τρεις τρόπους. Η μορφή «Κωδικός HEX» είναι η εξαψήφια γραφή που χρησιμοποιείται στο CSS και στα περισσότερα εργαλεία σχεδίασης, όπως #0778ff· γράφεται με πεζά γράμματα και με ένα # στην αρχή, και οι επιλογές «Κεφαλαία» και «Χωρίς #» στις «Σύνθετες επιλογές» το αλλάζουν αυτό για εργαλεία που περιμένουν διαφορετική γραφή. Η μορφή «Κωδικός RGB» γράφει και τα τρία κανάλια ξεχωριστά, όπως στο rgb(7, 120, 255), κάτι που ταιριάζει σε κώδικα που επεξεργάζεται κάθε κανάλι χωριστά. Η μορφή «Κωδικός HSL» περιγράφει το χρώμα μέσω απόχρωσης, κορεσμού και ανοιχτότητας, όπως στο hsl(213, 100%, 51%) — η ευκολότερη μορφή για μεταγενέστερη χειροκίνητη προσαρμογή. Και οι τρεις μορφές επικολλώνται απευθείας σε ένα φύλλο στυλ. Δεν είναι όμως εξίσου ακριβείς. Το HEX και το RGB είναι ακριβή· το HSL είναι στρογγυλοποιημένο. Η σελίδα γράφει την απόχρωση, τον κορεσμό και την ανοιχτότητα ως ακέραιους αριθμούς, και για περίπου το 89% των χρωμάτων αυτή η στρογγυλοποιημένη τιμή δεν μετατρέπεται πίσω στο ακριβώς ίδιο χρώμα: το #646503 εμφανίζεται ως hsl(61, 94%, 20%), το οποίο μετατρέπεται πίσω σε #616303. Η διαφορά σε ένα κανάλι δεν ξεπερνά ποτέ τα 5 βήματα και συνήθως είναι 1 ή 2 — αόρατη στην οθόνη, αλλά πραγματική αν αποθηκεύσετε την τιμή HSL και περιμένετε πίσω το αρχικό HEX. Γι’ αυτό αποθηκεύετε την τιμή σε HEX ή RGB.
Ένα χρώμα εμφανίζεται ως ένα μεμονωμένο τσιπ στη μέση του αποτελέσματος· περισσότερα χρώματα εμφανίζονται ως μια αριθμημένη λίστα, ένα χρώμα ανά γραμμή, με τις επιλεγμένες μορφές δίπλα δίπλα και ένα μικρό σήμα αντίθεσης στο τέλος. Μια λίστα με περισσότερα από τρία χρώματα κάνει κύλιση μέσα στο πλαίσιο, και το βέλος στη γωνία της την ανοίγει σε πλήρες ύψος· η σελίδα θυμάται σε ποια κατάσταση την αφήσατε. Κάντε κλικ σε οποιονδήποτε κωδικό για να αντιγράψετε μόνο αυτόν. Το κουμπί αντιγραφής στο τέλος μιας γραμμής αντιγράφει όλους τους κωδικούς αυτού του χρώματος σε μία γραμμή, χωρισμένους με κενά. Κάντε κλικ στο ίδιο το δείγμα και ανοίγει ο ενσωματωμένος επιλογέας χρώματος του προγράμματος περιήγησης: επιλέξτε εκεί ένα διαφορετικό χρώμα, και όλοι οι κωδικοί σε αυτή τη γραμμή ξαναγράφονται ώστε να ταιριάζουν, σε κάθε ενεργοποιημένη μορφή, μαζί με το σήμα του. Το κουμπί «Αντιγραφή όλων» αντιγράφει ολόκληρη τη δέσμη, ένα χρώμα ανά γραμμή, και το κουμπί «Αποθήκευση σε αρχείο» γράφει το ίδιο κείμενο σε ένα απλό αρχείο .txt· και τα δύο ακολουθούν οποιοδήποτε χρώμα αλλάξατε στον επιλογέα. Η ενότητα «Ιστορικό» διατηρεί τις τελευταίες σας 10 δέσμες σε αυτό το πρόγραμμα περιήγησης, ακριβώς όπως δημιουργήθηκαν, και το κουμπί «Καθαρισμός» αδειάζει το αποτέλεσμα. Οι ρυθμίσεις σας, συμπεριλαμβανομένων αυτών στις «Σύνθετες επιλογές», απομνημονεύονται για την επόμενη επίσκεψη.
Τα ισοπίθανα χρώματα δεν φαίνονται ομοιόμορφα κατανεμημένα, και το να γνωρίζετε τι να περιμένετε σας γλιτώνει από το να πατάτε «Δημιουργία» για λάθος λόγο. Μετρημένο σε ολόκληρο το εύρος, περίπου το 35% των χρωμάτων είναι έντονα και κορεσμένα, με κορεσμό HSL τουλάχιστον 70% και ανοιχτότητα μεταξύ 35% και 65%. Τα χρώματα κοντά στο γκρι, με κορεσμό κάτω από 20%, είναι μόλις περίπου 4%, και τα πολύ σκούρα (ανοιχτότητα κάτω από 20%) και τα πολύ ανοιχτόχρωμα (πάνω από 80%) είναι περίπου 3% το καθένα. Έτσι μια δέσμη δέκα χρωμάτων από την επιλογή «Όλα τα χρώματα» συνήθως περιέχει αρκετά έντονα χρώματα και σπάνια ένα παστέλ ή ένα ανθρακί χρώμα. Όταν χρειάζεστε συγκεκριμένο τύπο, επιλέξτε τον στο πεδίο «Τύπος χρώματος»: η επιλογή «Έντονο» διατηρεί ακριβώς αυτή την κορεσμένη ομάδα, και οι επιλογές «Παστέλ», «Σκούρο», «Θαμπό» και «Κλίμακα του γκρι» κάνουν το ίδιο για τις δικές τους ομάδες. Η επιλογή «Προσαρμοσμένο» σάς επιτρέπει να ορίσετε τα δικά σας εύρη για τα πεδία «Απόχρωση», «Κορεσμός» και «Ανοιχτότητα», και ένα εύρος απόχρωσης μπορεί να περάσει το 0, οπότε ένα εύρος από 330 έως 30 δίνει κόκκινα χρώματα. Το εύρος ελέγχεται σε σχέση με τον κωδικό HSL που εμφανίζει η σελίδα, οπότε κανένας κωδικός δεν πέφτει εκτός αυτού, και αν περιέχει πολύ λίγα χρώματα για την τιμή στο πεδίο «Πλήθος», η σελίδα σάς ζητά να διευρύνετε το εύρος αντί να επαναλαμβάνει χρώματα. Οι επαναλήψεις είναι κατά τα άλλα πιθανές αλλά σπάνιες: επιλέξτε «Χωρίς επαναλήψεις» για να τις αποκλείσετε, και χωρίς αυτό η πιθανότητα δύο από 50 χρώματα ολόκληρου του εύρους να βγουν ίδια είναι περίπου 1 στα 13.700.
Ένα τυχαίο χρώμα ζητείται συχνά ως φόντο, κάτι που εγείρει το ένα ερώτημα που ένα δείγμα δεν μπορεί να απαντήσει με γυμνό μάτι: θα είναι ευανάγνωστο το κείμενο πάνω του; Η κατευθυντήρια γραμμή προσβασιμότητας ιστού, WCAG, απαιτεί λόγο αντίθεσης τουλάχιστον 4,5:1 για κανονικό κείμενο. Μετρημένο σε όλα τα χρώματα που μπορεί να παράγει αυτή η σελίδα, το μαύρο κείμενο το πετυχαίνει σε περίπου το 65% από αυτά, και το λευκό κείμενο σε περίπου το 36%, και δεν υπάρχει χρώμα στο οποίο αποτυγχάνουν και τα δύο: το καλύτερο από τα δύο φτάνει πάντα τουλάχιστον στο 4,58:1. Έτσι σε οποιοδήποτε τυχαίο φόντο, το μαύρο ή το λευκό κείμενο θα είναι ευανάγνωστο, και η σελίδα σάς δείχνει ποιο. Δίπλα σε κάθε χρώμα εμφανίζεται ένα μικρό σήμα που γράφει Aa στο καλύτερο από τα δύο, ακολουθούμενο από τον λόγο αντίθεσής του. Ο λόγος στρογγυλοποιείται προς τα κάτω, οπότε δεν δείχνει ποτέ καλύτερη αντίθεση από την πραγματική, και ενημερώνεται όταν αλλάζετε το χρώμα στον επιλογέα χρώματος. Το σήμα συγκρίνει μόνο μαύρο και λευκό κείμενο· για ένα χρώμα εταιρικής ταυτότητας ή οποιοδήποτε άλλο χρώμα κειμένου, ελέγξτε το ζεύγος σε ένα εργαλείο ελέγχου αντίθεσης.
Το τυχαίο δεν είναι το ίδιο με το αρμονικό. Κάθε χρώμα σε μια δέσμη αντλείται μόνο του, χωρίς γνώση των υπολοίπων, οπότε η γεννήτρια δεν χτίζει ποτέ παλέτα με την έννοια που εννοεί ένας σχεδιαστής — ούτε συμπληρωματικά ζεύγη, ούτε ανάλογες σειρές, ούτε κοινή ανοιχτότητα. Ένα στενότερο εύρος αλλάζει τον χαρακτήρα μιας δέσμης, όχι αυτόν τον κανόνα: τα παστέλ χρώματα ή μια σειρά από μπλε φτάνουν και πάλι ένα ένα, χωρίς τίποτα να τα συνδέει. Αυτό είναι το νόημά του: σας δίνει ένα χρώμα που δεν θα είχατε διαλέξει μόνοι σας, και αυτό ακριβώς σπάει τη συνήθεια ή το δημιουργικό μπλοκάρισμα. Για να μετατρέψετε μια τυχαία ανακάλυψη σε κάτι χρήσιμο, κρατήστε το χρώμα που σας αρέσει και αντλήστε τα υπόλοιπα από αυτό, αντί να πατάτε «Δημιουργία» μέχρι να συμπέσει τυχαία μια ολόκληρη δέσμη. Κρατήστε την απόχρωσή του και αλλάξτε σταδιακά την ανοιχτότητα για πιο ανοιχτές και πιο σκούρες παραλλαγές, ή γυρίστε την απόχρωση κατά 180 μοίρες για το αντίθετο χρώμα. Η μορφή «Κωδικός HSL» μετατρέπει αυτές τις κινήσεις σε αριθμητική αντί για εικασίες.
Γιατί να επιλέξετε αυτή τη γεννήτρια τυχαίων χρωμάτων;
- Κάθε χρώμα δημιουργείται στο πρόγραμμα περιήγησής σας με το Web Crypto API, τίποτα δεν ανεβαίνει σε διακομιστή
- Όλα τα 16.777.216 χρώματα είναι απολύτως ισοπίθανα, ένα τυχαίο byte ανά κανάλι
- Κωδικοί HEX, RGB και HSL για το ίδιο χρώμα, σε οποιονδήποτε συνδυασμό
- Έως 50 χρώματα ταυτόχρονα, το καθένα σε δείγμα χρώματος με σήμα αντίθεσης κειμένου
- Έντονο, Παστέλ, Σκούρο, Θαμπό και Κλίμακα του γκρι, ή το δικό σας εύρος απόχρωσης, κορεσμού και ανοιχτότητας
- Χωρίς επαναλήψεις όταν τις χρειάζεστε, και HEX με κεφαλαία ή χωρίς #
- Κάντε κλικ σε έναν κωδικό για να τον αντιγράψετε, ή αλλάξτε οποιοδήποτε χρώμα στον επιλογέα χρωμάτων του προγράμματος περιήγησής σας
- Αντιγραφή όλων, Αποθήκευση σε αρχείο και Ιστορικό των τελευταίων 10 δεσμών σας, διατηρημένο στο πρόγραμμα περιήγησής σας
- Δωρεάν και απεριόριστο: χωρίς εγγραφή, χωρίς όριο χρήσης, τίποτα δεν αποθηκεύεται στους διακομιστές μας
Τα τυχαία χρώματα είναι χρήσιμα παντού όπου χρειάζεται ένα χρώμα προτού κάποιος αποφασίσει ποιο. Οι σχεδιαστές τα χρησιμοποιούν για να σπάσουν ένα δημιουργικό μπλοκάρισμα και να βρουν ένα σημείο εκκίνησης στο οποίο η συνηθισμένη τους παλέτα δεν θα έφτανε ποτέ. Οι προγραμματιστές γεμίζουν πρότυπα σχέδια, προσωρινά στοιχεία και άβαταρ, δίνουν σε κάθε σειρά ενός διαγράμματος το δικό της χρώμα ενώ το πραγματικό θέμα δεν έχει ακόμα αποφασιστεί, και ελέγχουν πώς αντεπεξέρχεται μια διεπαφή σε φόντα για τα οποία δεν σχεδιάστηκε — μια δέσμη 50 χρωμάτων από την επιλογή «Όλα τα χρώματα» σχεδόν πάντα περιλαμβάνει τουλάχιστον ένα πολύ σκούρο ή πολύ ανοιχτόχρωμο χρώμα, και οι επιλογές «Σκούρο» ή «Παστέλ» στρέφουν τον έλεγχο προς τη μία άκρη. Καλλιτέχνες αλγοριθμικής τέχνης και προγραμματιστές πρωτοτύπων παιχνιδιών εισάγουν τις τιμές απευθείας στον κώδικα, όπου η μορφή RGB ταιριάζει στις περισσότερες βιβλιοθήκες γραφικών. Οι εκπαιδευτικοί βάζουν τις τρεις μορφές δίπλα δίπλα για να δείξουν ότι ένα χρώμα μπορεί να γραφτεί ως κωδικός, ως τρία κανάλια ή ως θέση σε έναν τροχό χρωμάτων, και γιατί η έκδοση HSL είναι στρογγυλοποιημένη. Και όποιος επισημαίνει, βάζει ετικέτες ή κωδικοποιεί με χρώμα μια λίστα αποκτά διακριτά χρώματα χωρίς να αγωνιά ποιο να διαλέξει.
Αξίζει να γνωρίζετε μερικούς ειλικρινείς περιορισμούς. Πρόκειται για γεννήτρια, όχι για εργαλείο παλέτας: δεν χτίζει χρωματικές αρμονίες και δεν κρατά ένα χρώμα σταθερό ενώ τα υπόλοιπα αλλάζουν, και ένα στενότερο εύρος δίνει χρώματα ενός τύπου, όχι χρώματα επιλεγμένα ώστε να ταιριάζουν μεταξύ τους. Το σήμα αντίθεσης συγκρίνει μόνο μαύρο και λευκό κείμενο. Η σελίδα λειτουργεί με τα χρώματα sRGB που εμφανίζει μια οθόνη — HEX, RGB και HSL — χωρίς διαφάνεια και χωρίς CMYK, Pantone, OKLCH ή επώνυμα χρώματα CSS· για εκτύπωση, ταιριάξτε το χρώμα στην προετοιμασία της εκτύπωσης αντί να εμπιστεύεστε έναν κωδικό από την οθόνη. Ο ίδιος κωδικός μπορεί επίσης να φαίνεται ελαφρώς διαφορετικός από οθόνη σε οθόνη, επειδή οι οθόνες δεν είναι βαθμονομημένες το ίδιο. Οι τιμές HSL είναι στρογγυλοποιημένες, όπως περιγράφηκε παραπάνω, και εκτός αν έχει επιλεγεί το «Χωρίς επαναλήψεις», μια δέσμη δεν ελέγχεται για επαναλήψεις. Αυτό που πράγματι εγγυάται η σελίδα είναι στενότερο και ακριβές: κάθε ένα από τα 16.777.216 χρώματά της, ή κάθε χρώμα εντός του εύρους που ορίσατε, έχει την ίδια πιθανότητα σε κάθε πάτημα, αντλημένο από την κρυπτογραφική πηγή του προγράμματος περιήγησής σας και ποτέ δεν αποστέλλεται πουθενά.