Color picker online

Επιλέξτε ένα χρώμα στον τροχό, ρυθμίστε το με ακρίβεια στον καμβά κορεσμού και φωτεινότητας, και διαβάστε το σε κάθε μορφή που χρειάζεται το έργο σας, από #RRGGBB έως oklch(). Το εργαλείο καλύπτει και όσα άλλα συνήθως παραλείπουν: τρεις γεωμετρίες τροχού, συμπεριλαμβανομένου του παραδοσιακού τροχού ζωγράφων RYB, αρμονίες που φτιάχνουν παλέτα μόνες τους, κανάλι διαφάνειας και εξαγωγή ολόκληρης της παλέτας με ένα κλικ ως CSS μεταβλητές, SCSS ή JSON. Όλα υπολογίζονται τοπικά στον browser σας.

RYB ή RGB; Τρεις χρωματικοί τροχοί αντί για έναν

Ο επιλογέας Λειτουργία τροχού αλλάζει τη διάταξη των αποχρώσεων στον τροχό:

• Τα HSV και HSL είναι ψηφιακοί τροχοί. Οι αποχρώσεις τοποθετούνται όπως τις αναμειγνύει το φως σε μια οθόνη. Διαφέρουν στο τετράγωνο: στο HSV η πιο φωτεινή γωνία είναι η καθαρή απόχρωση, ενώ το HSL βάζει τις καθαρές αποχρώσεις στη μέση φωτεινότητα με λευκό από πάνω.
• Ο RYB (ζωγράφων) τακτοποιεί τις αποχρώσεις όπως τις μαθαίνουν οι ζωγράφοι: κόκκινο, κίτρινο και μπλε ως πρωτεύοντα, με πορτοκαλί, πράσινο και μοβ ανάμεσα (δείτε το μοντέλο RYB, αγγλικά). Η διαφορά φαίνεται κυρίως στις αρμονίες. Στον τροχό RYB, το συμπληρωματικό του κόκκινου είναι το πράσινο και το συμπληρωματικό του μπλε είναι το πορτοκαλί, τα κλασικά ζεύγη της ζωγραφικής. Ο ψηφιακός τροχός συνδυάζει το κόκκινο με το κυανό. Αν μια «συμπληρωματική» παλέτα από έναν συνηθισμένο επιλογέα χρωμάτων σάς φάνηκε ποτέ λάθος, αυτός είναι ο λόγος.

Χρωματικές αρμονίες: παλέτα που φτιάχνεται μόνη της

Στο πεδίο Χρωματική αρμονία επιλέξτε έναν κανόνα. Ο τροχός σημειώνει τα συνοδευτικά χρώματα και από κάτω εμφανίζεται η έτοιμη παλέτα:

• Συμπληρωματικό: ένα αντίθετο χρώμα. Η ισχυρότερη αντίθεση, κατάλληλο για μία μόνο πινελιά τόνου δίπλα στο κύριο χρώμα της ταυτότητάς σας.
• Διαχωρισμένο συμπληρωματικό: οι δύο γείτονες του συμπληρωματικού. Σχεδόν η ίδια αντίθεση, αλλά πολύ πιο εύκολο να ισορροπηθεί.
• Τριαδικό: τρεις ισαπέχουσες αποχρώσεις. Ζωντανό αλλά σταθερό, όταν η μία κυριαρχεί και τις άλλες δύο τις χρησιμοποιείτε με μέτρο.
• Τετραδικό (τετράγωνο): τέσσερις αποχρώσεις. Πλούσιοι συνδυασμοί για εικονογράφηση και γραφήματα, δύσκολο να ισορροπηθεί σε διεπαφή εφαρμογής.
• Αναλογικό: οι πλησιέστεροι γείτονες. Ήρεμος συνδυασμός για φόντα και διαβαθμίσεις.
• Μονοχρωματικό: μία απόχρωση σε πολλά επίπεδα φωτεινότητας. Η ασφαλέστερη επιλογή για καταστάσεις κουμπιών (hover, active, disabled).

Αντιγράφετε ολόκληρη την παλέτα με ένα κλικ, στη μορφή που χρειάζεστε: απλό HEX, RGB, HSL, OKLCH, έτοιμες CSS μεταβλητές (--color-1: …) για επικόλληση, μεταβλητές SCSS ή JSON για κώδικα. Αν θέλετε να δείτε αν η παλέτα κρατά αρκετή αντίθεση και για ανθρώπους που δυσκολεύονται να ξεχωρίσουν αποχρώσεις, το ελέγχετε γρήγορα σε ένα screenshot μετά τη μετατροπή σε κλίμακα του γκρι.

Μετατροπή HEX, RGB, HSL, OKLCH και CMYK: επικολλήστε οτιδήποτε, πάρτε τα όλα

Τα πεδία εισαγωγής δέχονται σχεδόν κάθε σημειογραφία χρώματος: #f80, #ff8800, οκταψήφιο hex με διαφάνεια, rgb() και rgba(), hsl(), hwb(), lch(), oklch(), oklab(), cmyk(), 0xFF8800, καθώς και ονομαστικά χρώματα CSS όπως rebeccapurple. Ό,τι κι αν εισάγετε, παίρνετε επτά συγχρονισμένες τιμές: HEX, RGB, HSL, HSV, LCH, OKLCH και CMYK, καθεμία με το δικό της κουμπί αντιγραφής.

Ο ολισθητής Αδιαφάνεια (άλφα) κάτω από την προεπισκόπηση μεταβάλλει τις τιμές στις διάφανες μορφές τους #RRGGBBAA, rgba() και hsla(). Η προεπισκόπηση εμφανίζεται πάνω σε σκακιέρα, ώστε να βλέπετε τη διαφάνεια αμέσως.

Το πλησιέστερο Tailwind CSS token για κάθε χρώμα

Δύο ετικέτες κάτω από την προεπισκόπηση ονομάζουν το χρώμα: το πλησιέστερο ονομαστικό χρώμα CSS (χρήσιμο για γρήγορα πρωτότυπα) και το πλησιέστερο Tailwind token, για παράδειγμα orange-500. Έτσι μένετε μέσα στο δικό σας design system αντί να επινοείτε τυχαίες τιμές. Κάντε κλικ σε μια ετικέτα για να την αντιγράψετε.

Απαντά στο ερώτημα που προκύπτει σε κάθε παράδοση σχεδίου: ο σχεδιαστής μού έστειλε έναν κωδικό hex, ποια κλάση Tailwind ταιριάζει καλύτερα; Η αντιστοίχιση υπολογίζεται με βάση την προεπιλεγμένη παλέτα του Tailwind CSS 4 (δείτε την τεκμηρίωση του Tailwind, αγγλικά), οπότε μπορείτε να χρησιμοποιήσετε το token απευθείας στο όνομα της κλάσης.

Ποια μορφή χρώματος να χρησιμοποιήσετε;

Μορφή	Πλήρης ονομασία	Πότε να τη χρησιμοποιήσετε
HEX	Hexadecimal	Η προεπιλογή του web. Σύντομο, υποστηρίζεται παντού, εύκολο στην αντιγραφή. Οκτώ ψηφία προσθέτουν διαφάνεια.
RGB	Red, Green, Blue	Έτσι σκέφτονται οι οθόνες. Τρία κανάλια φωτός από 0 έως 255. Η μορφή που περιμένουν τα περισσότερα API και ο κώδικας canvas.
HSL	Hue, Saturation, Lightness	Για ρυθμίσεις με το μάτι. «Λίγο πιο ανοιχτό» ή «λιγότερο κορεσμένο» σημαίνει αλλαγή ενός μόνο αριθμού.
HSV	Hue, Saturation, Value	Προγράμματα γραφικών. Το μοντέλο πίσω από τον επιλογέα χρωμάτων στο Photoshop και στο GIMP.
LCH	Lightness, Chroma, Hue	Αντιληπτική ομοιομορφία. Ίσα αριθμητικά βήματα φαίνονται σαν ίσα οπτικά βήματα, κάτι που το HSL απλώς προσποιείται.
OKLCH	OK Lightness, Chroma, Hue	Η σύγχρονη επιλογή για CSS. Διορθώνει τις μετατοπίσεις απόχρωσης στα μπλε που ταλαιπωρούν το LCH. Υποστηρίζεται από όλους τους σύγχρονους browsers και ταιριάζει για design tokens.
CMYK	Cyan, Magenta, Yellow, Key	Προσανατολισμός για εκτύπωση. Κατά προσέγγιση μετατροπή για συνεννόηση με το τυπογραφείο, οι τελικές τιμές καθορίζονται από το χρωματικό του προφίλ.

Γιατί το OKLCH είναι αντιληπτικά πιο ομοιόμορφο από παλαιότερα μοντέλα εξηγεί ο δημιουργός του χώρου Oklab, Björn Ottosson, στο αρχικό άρθρο (αγγλικά). Τη σύνταξη και την υποστήριξη στους browsers συνοψίζει το MDN (αγγλικά). Πώς λειτουργεί το μοντέλο εκτύπωσης περιγράφει η Wikipedia στο λήμμα CMYK.

Μικρές λεπτομέρειες που εξοικονομούν χρόνο

• Το ιστορικό κρατιέται μόνο του. Τα τελευταία 24 χρώματα επιβιώνουν σε ανανέωση σελίδας. Μένουν μόνο στο local storage του browser σας και δεν στέλνονται πουθενά.
• Λήψη χρώματος από την οθόνη (Eyedropper). Σε browsers με το EyeDropper API (Chrome και Edge) επιλέγετε χρώμα από οπουδήποτε στην οθόνη σας, ακόμα και εκτός του παραθύρου του browser. Για χρώμα από φωτογραφία ή αρχείο λογότυπου, χρησιμοποιήστε το online σταγονόμετρο εικόνας.
• Έλεγχος με πληκτρολόγιο. Ο τροχός και ο καμβάς κορεσμού και φωτεινότητας ανταποκρίνονται στα βέλη, ώστε να ρυθμίζετε το χρώμα σε μικρά βήματα.
• Οι Προεπιλογές προσφέρουν συνηθισμένα βασικά χρώματα, όταν χρειάζεστε απλώς ένα γρήγορο σημείο εκκίνησης.

Συχνές ερωτήσεις

Πώς μετατρέπω το OKLCH σε HEX;

Επικολλήστε μια τιμή oklch() στο πεδίο OKLCH και όλες οι άλλες τιμές, συμπεριλαμβανομένου του HEX, ενημερώνονται αμέσως. Λειτουργεί και αντίστροφα: εισαγάγετε έναν κωδικό HEX και διαβάστε το αντίστοιχο oklch(). Μια επιφύλαξη: το OKLCH μπορεί να περιγράψει χρώματα εκτός του εύρους sRGB, και αυτά περικόπτονται σε ό,τι μπορεί να δείξει το sRGB. Ένα πολύ κορεσμένο oklch() δεν θα φαίνεται λοιπόν ίδιο με τη μορφή του σε HEX σε μια οθόνη ευρέος φάσματος.

Μπορώ να χρησιμοποιήσω το oklch() σε παραγωγικό CSS;

Ναι. Όλες οι τρέχουσες εκδόσεις των Chrome, Edge, Firefox και Safari υποστηρίζουν το oklch(), και έχει γίνει δημοφιλής σημειογραφία για design tokens (το Tailwind CSS 4 ορίζει ολόκληρη την παλέτα του με αυτό). Για πολύ παλιούς browsers, βάλτε μια εναλλακτική HEX στη γραμμή πριν από αυτό. Αυτό το εργαλείο σάς δίνει και τις δύο τιμές.

Γιατί αλλάζουν οι αρμονίες όταν περνάω στον τροχό RYB;

Επειδή αυτό που είναι «απέναντι» εξαρτάται από το πώς κατανέμονται οι αποχρώσεις γύρω από τον κύκλο. Ο τροχός RYB κατανέμει τα πρωτεύοντα χρώματα πιγμέντων ομοιόμορφα, οπότε τα συμπληρωματικά ζεύγη ταιριάζουν με αυτό που ξέρουν οι ζωγράφοι: κόκκινο και πράσινο, μπλε και πορτοκαλί, κίτρινο και μοβ. Οι τροχοί HSV και HSL κατανέμουν τις αποχρώσεις σύμφωνα με την ανάμειξη του φωτός, γι' αυτό συνδυάζουν το κόκκινο με το κυανό. Κανένας από τους δύο δεν είναι λάθος: το RYB ακολουθεί την παραδοσιακή καλλιτεχνική εκπαίδευση, τα HSV και HSL ακολουθούν αυτό που κάνουν οι οθόνες.

Μπορώ να εμπιστευτώ τις τιμές CMYK για εκτύπωση;

Θεωρήστε τις ενδεικτικές. Η πραγματική μετατροπή για εκτύπωση εξαρτάται από το προφίλ ICC (αγγλικά) του εκτυπωτή, το χαρτί και το μελάνι. Το ίδιο χρώμα RGB βγαίνει διαφορετικό σε επιστρωμένο και σε μη επιστρωμένο χαρτί. Οι τιμές εδώ υπολογίζονται με τον τυπικό τύπο, που σας φέρνει κοντά, αλλά η τελική δοκιμή ανήκει στο τυπογραφείο σας.

Πού είναι το κουμπί eyedropper στο Firefox ή στο Safari;

Είναι σκόπιμα κρυμμένο. Το EyeDropper API (MDN, αγγλικά), στο οποίο βασίζεται το κουμπί, υποστηρίζεται προς το παρόν μόνο από browsers βασισμένους σε Chromium (Chrome, Edge, Opera). Όλες οι υπόλοιπες λειτουργίες του εργαλείου δουλεύουν παντού, λείπει μόνο η επιλογή χρώματος από την οθόνη. Αν χρειάζεστε χρώμα από εικόνα, χρησιμοποιήστε το online σταγονόμετρο εικόνας, που λειτουργεί σε όλους τους browsers.

Μένει ιδιωτικό το ιστορικό χρωμάτων μου;

Ναι. Το ιστορικό είναι αποθηκευμένο στο localStorage του browser σας, στη δική σας συσκευή. Τίποτα από όσα επιλέγετε, επικολλάτε ή αντιγράφετε δεν στέλνεται πουθενά. Όλο το εργαλείο τρέχει ως JavaScript στον browser σας, κάτι που μπορείτε να επαληθεύσετε στην καρτέλα δικτύου των εργαλείων προγραμματιστή.