Διαδικτυακό εργαλείο ανάλογου χρωματικού συνδυασμού

Τι κάνει αυτό το εργαλείο

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

Παράδειγμα με συγκεκριμένες τιμές

Αν επιλέξετε ως βάση το #3B82F6 (που αντιστοιχεί περίπου σε HSL(217°, 91%, 60%)) και ορίσετε γωνία 30°, θα λάβετε τα εξής τρία χρώματα:

• Αριστερό ανάλογο: #3CE0F6
• Βάση: #3B82F6
• Δεξί ανάλογο: #523CF6

Αν αυξήσετε τη γωνία σε 90°, τα αποτελέσματα γίνονται #3CF652, #3B82F6 και #F63CE0.

Πώς γίνεται ο υπολογισμός

Ο αλγόριθμος μετατρέπει το χρώμα βάσης σε HSL, στρογγυλοποιεί τις τιμές σε ακέραιους αριθμούς, προσθέτει ή αφαιρεί τη γωνία από την απόχρωση (με περιτύλιξη στις 360°), και μετατρέπει ξανά σε RGB/HEX. Το μεσαίο δείγμα παραμένει ακριβώς ίδιο με το επιλεγμένο χρώμα βάσης, χωρίς καμία αλλαγή.

Περιορισμοί και συμβουλές

Ο υπολογισμός γίνεται τοπικά στον browser σας. Η ανάλογη αρμονία δεν εγγυάται αντίθεση ή αναγνωσιμότητα· ελέγξτε πάντα τα ζεύγη κειμένου/φόντου με ξεχωριστό εργαλείο αντίθεσης. Η επεξεργασία ενός παραγόμενου χρώματος δεν επηρεάζει τα άλλα δύο.

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

Μπορώ να αλλάξω τη γωνία μετά τη δημιουργία;

Ναι, μετακινήστε το ρυθμιστικό και πατήστε ξανά το κουμπί δημιουργίας για να ενημερωθούν τα δύο ανάλογα χρώματα.

Γιατί το μεσαίο χρώμα δεν αλλάζει όταν επεξεργάζομαι τα άλλα;

Το μεσαίο δείγμα είναι πάντα το αρχικό χρώμα βάσης. Η επεξεργασία ενός από τα δύο ανάλογα χρώματα αλλάζει μόνο εκείνο το δείγμα, όχι τα υπόλοιπα.

Μπορώ να χρησιμοποιήσω τιμές RGB ή HSV αντί για HEX;

Ναι, κάθε δείγμα έχει αναπτυσσόμενο πάνελ με πεδία HEX, RGB, HSV και HSL. Μπορείτε να πληκτρολογήσετε τιμή σε οποιοδήποτε από αυτά και το χρώμα θα ενημερωθεί.

Λίστα ελέγχου πριν τη χρήση

• Επιβεβαιώστε ότι το χρώμα βάσης είναι σωστό.
• Ορίστε τη γωνία απόστασης σύμφωνα με την επιθυμητή αρμονία.
• Ελέγξτε τα τρία χρώματα στο πραγματικό περιβάλλον της διεπαφής σας.
• Επαληθεύστε την αντίθεση για κείμενο ή στοιχεία UI.