Μετατροπή χρώματος
#b400ff
≈ Electric Violet
Παραλλαγές
Ο σκοπός αυτής της ενότητας είναι να παραχθούν με ακρίβεια αποχρώσεις (προσθήκη καθαρού λευκού) και σκιάσεις (προσθήκη καθαρού μαύρου) του επιλεγμένου χρώματός σου σε αυξήσεις του 10%.
Συμβουλή: Χρησιμοποίησε σκιάσεις για καταστάσεις hover και σκιές, αποχρώσεις για highlights και φόντα.
Σκιάσεις
Σκούρες παραλλαγές που δημιουργούνται με την προσθήκη μαύρου στο βασικό σου χρώμα.
Αποχρώσεις
Ανοιχτές παραλλαγές που δημιουργούνται με την προσθήκη λευκού στο βασικό σου χρώμα.
Συνηθισμένες Χρήσεις
- • Καταστάσεις UI στοιχείων (hover, ενεργό, απενεργοποιημένο)
- • Δημιουργία βάθους με σκιές και highlights
- • Δημιουργία συνεκτικών συστημάτων χρωμάτων
Συμβουλή Συστήματος Σχεδίασης
Αυτές οι παραλλαγές αποτελούν τη βάση μιας συνεκτικής παλέτας χρωμάτων. Εξάγεις τις για να διατηρήσεις τη συνέπεια σε όλο το έργο σου.
Συνδυασμοί Χρωμάτων
Κάθε αρμονία έχει τη δική της διάθεση. Χρησιμοποίησε αρμονίες για να σκεφτείς συνδυασμούς χρωμάτων που ταιριάζουν καλά μεταξύ τους.
Πώς να Χρησιμοποιήσεις
Κάνε κλικ σε οποιοδήποτε χρώμα για να αντιγράψεις την τιμή του hex. Αυτοί οι συνδυασμοί είναι μαθηματικά αποδεδειγμένοι για να δημιουργούν οπτική αρμονία.
Γιατί Έχει Σημασία
Οι αρμονίες χρωμάτων δημιουργούν ισορροπία και προκαλούν συγκεκριμένα συναισθήματα στα σχέδιά σου.
Συμπλήρωμα
Ένα χρώμα και το αντίθετό του στον χρωματικό κύκλο, +180 μοίρες απόχρωσης. Υψηλή αντίθεση.
Διαχωρισμένο συμπληρωματικό
Ένα χρώμα και δύο γειτονικά στο συμπλήρωμά του, +/-30 μοίρες απόχρωσης από την τιμή απέναντι από το κύριο χρώμα. Τολμηρό όπως ένα ευθύ συμπλήρωμα, αλλά πιο ευέλικτο.
Τριαδικό
Τρία χρώματα τοποθετημένα ομοιόμορφα στον χρωματικό κύκλο, το καθένα 120 μοίρες απόχρωσης μακριά. Καλύτερα να επιτρέψεις σε ένα χρώμα να κυριαρχεί και να χρησιμοποιήσεις τα άλλα ως τόνους.
Ανάλογο
Τρία χρώματα με την ίδια φωτεινότητα και κορεσμό με αποχρώσεις που είναι γειτονικές στον χρωματικό κύκλο, 30 μοίρες μακριά. Ομαλές μεταβάσεις.
Μονοχρωματικό
Τρία χρώματα της ίδιας απόχρωσης με τιμές φωτεινότητας +/-50%. Λεπτό και εκλεπτυσμένο.
Τετραδικό
Δύο σετ συμπληρωματικών χρωμάτων, χωρισμένα κατά 60 μοίρες απόχρωσης.
Αρχές θεωρίας χρωμάτων
Ισορροπία
Χρησιμοποίησε ένα κυρίαρχο χρώμα, υποστήριξε με δευτερεύοντα και τόνισε με φειδώ.
Αντίθεση
Εξασφάλισε επαρκή αντίθεση για αναγνωσιμότητα και προσβασιμότητα.
Αρμονία
Τα χρώματα πρέπει να συνεργάζονται για να δημιουργούν μια ενιαία οπτική εμπειρία.
Έλεγχος Αντίθεσης Χρωμάτων
Δοκίμασε συνδυασμούς χρωμάτων για να διασφαλίσεις ότι πληρούν τα πρότυπα προσβασιμότητας WCAG για την αναγνωσιμότητα του κειμένου.
Χρώμα Κειμένου
Χρώμα Φόντου
Αντίθεση
Πρότυπα WCAG
Προηγμένος έλεγχος αντίθεσης
Λεπτομερής ρύθμιση με ρυθμιστικά, πολλαπλές προεπισκοπήσεις & περισσότερα
Όλοι είναι ιδιοφυΐες. Αλλά αν κρίνεις ένα ψάρι από την ικανότητά του να σκαρφαλώνει δέντρα, θα περάσει όλη του τη ζωή πιστεύοντας ότι είναι χαζό.