Επιλογέας χρωμάτων (HEX, RGB, HSL, OKLCH)
Επιλέξτε χρώμα στο τετράγωνο κορεσμού–φωτεινότητας ή πληκτρολογήστε HEX, RGB, HSL ή OKLCH. Όλες οι μορφές μένουν συγχρονισμένες, με κλίμακα tint/shade, σταγονόμετρο (Chromium) και εξαγωγή παλετών σε CSS και JSON.
Πώς να επιλέξετε και να εξαγάγετε χρώματα
1. Σύρετε στο τετράγωνο και στο ρυθμιστικό απόχρωσης ή επικολλήστε HEX/RGB/HSL/OKLCH.
2. Διαβάστε συγχρονισμένα HEX, RGB, HSL και OKLCH στη γραμμή.
3. Κάντε κλικ σε απόχρωση ή δείγμα αρμονίας για σχετικά χρώματα.
4. Αντιγράψτε τιμή, σύνδεσμο ?hex= ή εξαγάγετε μεταβλητές CSS / JSON.
Παραδείγματα επιλογέα χρωμάτων
Terracotta επωνυμίας #8F665E
Ο επιλογέας HSV κρατά την απόχρωση καθώς σκουραίνετε για hover. Εξαγάγετε --color και --shade-* ως μεταβλητές CSS.
Ανάλογη παλέτα για dashboard
Επιλέξτε Ανάλογα για αποχρώσεις ±30° και ±60°. Αντιγράψτε τη λωρίδα ως custom properties για κάρτες και γραφήματα.
OKLCH για ομοιόμορφα βήματα
Η ράμπα αλλάζει τη φωτεινότητα OKLCH, πιο ομοιόμορφα από ανάμειξη HEX με λευκό. Χρησιμοποιήστε oklch() σε σύγχρονο CSS.
Πότε να χρησιμοποιήσετε αυτό το εργαλείο
• Όταν επιλέγετε χρώματα UI και χρειάζεστε HEX, RGB, HSL και OKLCH μαζί.
• Όταν παράγετε hover/muted αποχρώσεις από μία απόχρωση επωνυμίας.
• Όταν εξάγετε μικρή παλέτα (αρμονία + ράμπα) σε μεταβλητές CSS.
Αρμονίες για παλέτες UI
Τα συμπληρωματικά απέχουν 180° — ισχυρή αντίθεση, με μέτρο στα CTA. Τα ανάλογα (±30–60°) ενώνουν ένα dashboard. Τριάδες και τετράδες δίνουν ποικιλία· μειώστε τον κορεσμό των επιπλέον ώστε το primary να οδηγεί. Ελέγξτε το κείμενο με τον ελεγκτή αντίθεσης WCAG.
Συχνές ερωτήσεις
HEX vs RGB vs HSL vs OKLCH;
HEX και RGB είναι το ίδιο χρώμα sRGB. Το HSL βολεύει για απόχρωση/φωτεινότητα. Το OKLCH είναι αντιληπτικό: παρόμοια βήματα L φαίνονται πιο ομοιόμορφα και το oklch() είναι έγκυρο σύγχρονο CSS.
Το σταγονόμετρο δουλεύει σε κάθε πρόγραμμα περιήγησης;
Το API EyeDropper υπάρχει στο Chromium (Chrome, Edge). Αλλού πληκτρολογήστε τιμή ή χρησιμοποιήστε τον οπτικό επιλογέα.
Μπορώ να μοιραστώ ένα χρώμα;
Ναι. Το URL ενημερώνεται με ?hex=RRGGBB. Αντιγράψτε τον σύνδεσμο για το ίδιο χρώμα.
Τα χρώματα πηγαίνουν σε διακομιστή;
Όχι. Μετατροπή, αρμονίες και εξαγωγή τρέχουν τοπικά στο πρόγραμμα περιήγησης.