Γεννήτρια και επιλογή κωδικών χρωμάτων

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

Μετατροπή χρώματος

HEX

#e24826

Cinnabar

HEX
#e24826
HSL
11, 76, 52
RGB
226, 72, 38
XYZ
34, 21, 4
CMYK
0, 68, 83, 11
LUV
53,137,37
LAB
53, 58, 52
HWB
11, 15, 11

Παραλλαγές

Ο σκοπός αυτού του τμήματος είναι η ακριβής παραγωγή αποχρώσεων (προστιθέμενο καθαρό λευκό) και αποχρώσεων (προστιθέμενο καθαρό μαύρο) του επιλεγμένου χρώματος σε βήματα 10%.

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

Αποχρώσεις

Σκουρότερες παραλλαγές που δημιουργούνται με την προσθήκη μαύρου στο βασικό σας χρώμα.

Αποχρώσεις

Φωτεινότερες παραλλαγές που δημιουργούνται με την προσθήκη λευκού στο βασικό σας χρώμα.

Κοινές περιπτώσεις χρήσης

  • Καταστάσεις στοιχείων UI (hover, ενεργό, απενεργοποιημένο)
  • Δημιουργία βάθους με σκιές και ανταύγειες
  • Οικοδόμηση συνεπών συστημάτων χρωμάτων

Συμβουλή συστήματος σχεδιασμού

Αυτές οι παραλλαγές αποτελούν το θεμέλιο μιας συνεκτικής παλέτας χρωμάτων. Εξαγάγετε τις για να διατηρήσετε τη συνοχή σε ολόκληρο το έργο σας.

Συνδυασμοί χρωμάτων

Κάθε αρμονία έχει τη δική της διάθεση. Χρησιμοποιήστε τις αρμονίες για να σκεφτείτε συνδυασμούς χρωμάτων που λειτουργούν καλά μαζί.

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

Κάντε κλικ σε οποιοδήποτε χρώμα για να αντιγράψετε τη δεκαεξαδική τιμή του. Αυτοί οι συνδυασμοί είναι μαθηματικά αποδεδειγμένο ότι δημιουργούν οπτική αρμονία.

Γιατί έχει σημασία

Οι χρωματικές αρμονίες δημιουργούν ισορροπία και προκαλούν συγκεκριμένα συναισθήματα στα σχέδιά σας.

Συμπλήρωμα

Ένα χρώμα και το αντίθετό του στον χρωματικό κύκλο, +180 βαθμοί απόχρωσης. Υψηλή αντίθεση.

#e24826
Το καλύτερο για: Σχέδια, CTAs, λογότυπα υψηλής απήχησης

Διαχωρισμένο-συμπληρωματικό

Ένα χρώμα και δύο δίπλα στο συμπλήρωμά του, +/-30 μοίρες απόχρωσης από την τιμή απέναντι από το κύριο χρώμα. Έντονο σαν ένα απλό συμπλήρωμα, αλλά πιο ευέλικτο.

Το καλύτερο για: Ζωντανές αλλά ισορροπημένες διατάξεις

Τριαδική

Τρία χρώματα ομοιόμορφα κατανεμημένα κατά μήκος του χρωματικού κύκλου, με απόσταση 120 μοιρών απόχρωσης το καθένα. Καλύτερα να επιτρέψετε σε ένα χρώμα να κυριαρχήσει και να χρησιμοποιήσετε τα άλλα ως τόνους.

Το καλύτερο για: Παιχνιδιάρικα, ενεργητικά σχέδια

Ανάλογος

Τρία χρώματα της ίδιας φωτεινότητας και κορεσμού με αποχρώσεις που βρίσκονται δίπλα στον χρωματικό κύκλο, σε απόσταση 30 μοιρών μεταξύ τους. Ομαλές μεταβάσεις.

Το καλύτερο για: Εμπνευσμένες από τη φύση, ηρεμιστικές διεπαφές

Μονόχρωμος

Τρία χρώματα της ίδιας απόχρωσης με τιμές φωτεινότητας +/-50%. Διακριτικά και εκλεπτυσμένα.

Το καλύτερο για: Μινιμαλιστικά, εκλεπτυσμένα σχέδια

Τετραδικό

Δύο σύνολα συμπληρωματικών χρωμάτων, χωρισμένα από 60 μοίρες απόχρωσης.

Το καλύτερο για: Πλούσιοι, ποικίλοι χρωματικοί συνδυασμοί

Αρχές θεωρίας χρωμάτων

Υπόλοιπο

Χρησιμοποιήστε ένα κυρίαρχο χρώμα, υποστηρίξτε το με δευτερεύον και δώστε έμφαση με φειδώ.

Αντίθεση

Εξασφαλίστε επαρκή αντίθεση για αναγνωσιμότητα και προσβασιμότητα.

Αρμονία

Τα χρώματα πρέπει να συνεργάζονται μεταξύ τους για να δημιουργούν μια ενιαία οπτική εμπειρία.

Έλεγχος αντίθεσης χρώματος

Δοκιμάστε συνδυασμούς χρωμάτων για να διασφαλίσετε ότι πληρούν τα πρότυπα προσβασιμότητας WCAG για την αναγνωσιμότητα του κειμένου.

Χρώμα κειμένου
Χρώμα φόντου
Αντίθεση
1.00
Fail
Πολύ κακή
Μικρό κείμενο
✖︎
Μεγάλο κείμενο
✖︎
Πρότυπα WCAG
AA:Ελάχιστη αναλογία αντίθεσης 4,5:1 για κανονικό κείμενο και 3:1 για μεγάλο κείμενο. Απαιτείται για τους περισσότερους ιστότοπους.
AAA:Βελτιωμένη αναλογία αντίθεσης 7:1 για κανονικό κείμενο και 4,5:1 για μεγάλο κείμενο. Συνιστάται για βέλτιστη προσβασιμότητα.
Ανεπαρκής αντίθεση για όλα τα μεγέθη κειμένου - δεν πληροί τα πρότυπα WCAG.

Προηγμένος Έλεγχος Αντίθεσης

Βελτιστοποιήστε με ρυθμιστικά, πολλαπλές προεπισκοπήσεις και πολλά άλλα

Όλοι είναι ιδιοφυΐες. Αλλά αν κρίνεις ένα ψάρι από την ικανότητά του να σκαρφαλώνει σε ένα δέντρο, θα ζήσει όλη του τη ζωή πιστεύοντας ότι είναι χαζό.

- Albert Einstein

Τεχνικές μορφές

Πρακτικές μορφές

Ανάλυση χρώματος

Προσομοιωτής τύφλωσης

Δημιουργικές πτυχές