Επιλογή Χρώματος Online

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

Τρεις τροχοί, όχι ένας

Ο επιλογέας Λειτουργία τροχού αλλάζει τη γεωμετρία του ίδιου του τροχού:

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

Αρμονίες που φτιάχνουν την παλέτα για εσάς

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

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

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

Επικολλήστε οτιδήποτε, διαβάστε τα όλα

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

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

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

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

Μορφή	Πλήρης ονομασία	Πότε να τη χρησιμοποιήσετε;
HEX	Δεκαεξαδικό	Το πρότυπο του ιστού. Συμπαγές, καθολικά υποστηριζόμενο, εύκολο στην αντιγραφή. 8 ψηφία προσθέτουν άλφα.
RGB	Κόκκινο, Πράσινο, Μπλε	Ο τρόπος που «σκέφτονται» οι οθόνες. Τρία κανάλια φωτός, 0–255. Η μορφή που περιμένουν οι περισσότερες API και ο κώδικας canvas.
HSL	Απόχρωση, Κορεσμός, Φωτεινότητα	Για ανθρώπους που επεξεργάζονται με το χέρι. «Λίγο πιο ανοιχτό» ή «λιγότερο κορεσμένο» είναι απλώς μια αλλαγή σε έναν αριθμό.
HSV	Απόχρωση, Κορεσμός, Τιμή	Λογισμικό γραφικών. Το μοντέλο πίσω από τους επιλογείς στο Photoshop και το GIMP.
LCH	Φωτεινότητα, Χρόμα, Απόχρωση	Αντιληπτικά ομοιόμορφο. Ίσα αριθμητικά βήματα φαίνονται σαν ίσα οπτικά βήματα — αυτό που το HSL προσποιείται ότι είναι.
OKLCH	OK Φωτεινότητα, Χρόμα, Απόχρωση	Η σύγχρονη επιλογή του CSS. Διορθώνει τις μετατοπίσεις απόχρωσης του LCH στα μπλε· υποστηρίζεται σε όλους τους σύγχρονους browsers και ιδανικό για συστήματα design tokens.
CMYK	Cyan, Magenta, Yellow, Key	Προσανατολισμός εκτύπωσης. Μια κατά προσέγγιση μετατροπή για επικοινωνία με σχεδιαστές εκτύπωσης — οι τελικές τιμές προέρχονται πάντα από το χρωματικό προφίλ του εκτυπωτή.

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

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

---

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

Είναι ασφαλές να χρησιμοποιήσω το oklch() σε παραγωγικό CSS;

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

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

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

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

Αντιμετωπίστε τες ως προσανατολισμό, όχι ως απόλυτη αλήθεια. Η πραγματική μετατροπή εκτύπωσης εξαρτάται από το προφίλ ICC του εκτυπωτή, το χαρτί και το μελάνι — το ίδιο χρώμα RGB αποδίδεται διαφορετικά σε επιστρωμένο και μη επιστρωμένο χαρτί. Οι τιμές εδώ χρησιμοποιούν έναν τυπικό τύπο που σας φέρνει κοντά, αλλά η τελική επαλήθευση ανήκει στο τυπογραφείο.

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

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

Είναι ιδιωτικό το ιστορικό χρωμάτων μου;

Ναι. Το ιστορικό βρίσκεται στο localStorage του browser σας, στη δική σας συσκευή. Τίποτα από όσα επιλέγετε, επικολλάτε ή αντιγράφετε δεν μεταδίδεται — ολόκληρο το εργαλείο είναι client-side JavaScript, κάτι που μπορείτε να επαληθεύσετε παρακολουθώντας την καρτέλα δικτύου στα εργαλεία προγραμματιστή.