HedgieTools

Γεννήτρια παλέτας χρωμάτων

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

Το κύριο χρώμα σας

Πληκτρολογήστε μια τιμή ή επιλέξτε ένα χρώμα: η υπόλοιπη παλέτα χρωμάτων χτίζεται γύρω του.

Δευτερεύον και τριτεύον
Μορφή τιμής

Πληκτρολογήστε μια τιμή HEX, π.χ. #2563EB, ή κάντε κλικ στο τετράγωνο για να επιλέξετε το χρώμα.

Η παλέτα χρωμάτων σας

Κάντε κλικ σε μια τιμή ή μια απόχρωση (50 έως 950) για να την αντιγράψετε. Το μολύβι αντικαθιστά ένα προτεινόμενο χρώμα με το δικό σας: μένει σταθερό όταν αλλάζετε το κύριο χρώμα.

  • —

    Κύριο

    το χρώμα σας
  • —

    Δευτερεύον

    συμπληρωματικό
  • —

    Τριτεύον

    σχεδόν συμπληρωματικό
  • —

    Πληροφορία

    μπλε
  • —

    Επιτυχία

    πράσινο
  • —

    Προειδοποίηση

    πορτοκαλί
  • —

    Κίνδυνος

    κόκκινο
  • —

    Ουδέτερος

    γκρι με απόχρωση

Token ανοιχτού και σκούρου θέματος

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

  • --backgroundΦόντο σελίδας
  • --surfaceΚάρτες και πάνελ
  • --surface-mutedΔευτερεύουσες περιοχές
  • --borderΠεριγράμματα και διαχωριστικά
  • --textΚύριο κείμενο
  • --text-mutedΔευτερεύον κείμενο
  • --primaryΚουμπιά και σύνδεσμοι
  • --primary-hoverΚατάσταση αιώρησης
  • --on-primaryΚείμενο πάνω στο κύριο
  • --focus-ringΠερίγραμμα εστίασης
  • --secondaryΔευτερεύον χρώμα έμφασης
  • --tertiaryΤριτεύον χρώμα έμφασης
  • --infoΠληροφορίες
  • --info-softΦόντο πληροφορίας
  • --successΕπιτυχία
  • --success-softΦόντο επιτυχίας
  • --warningΠροειδοποίηση
  • --warning-softΦόντο προειδοποίησης
  • --dangerΚίνδυνος, σφάλμα
  • --danger-softΦόντο σφάλματος

Χρώματα που ταιριάζουν

Οι κλασικές αρμονίες γύρω από το κύριο χρώμα σας, για εικονογραφήσεις, γραφήματα ή πινελιές χρώματος.

  • Συμπληρωματική

    το αντίθετο χρώμα

  • Διαιρεμένη συμπληρωματική

    πιο ήπια από το αντίθετο

  • Ανάλογη

    τα γειτονικά χρώματα

  • Τριάδα

    τρία ισορροπημένα χρώματα

  • Τετράδα

    τέσσερα χρώματα σε τετράγωνο

  • Μονοχρωματική

    ένας τόνος, πολλές εντάσεις

Προεπισκόπηση και αντίθεση

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

Θέμα προεπισκόπησης
Τίτλος σελίδαςΔευτερεύον κείμενο, λιγότερο σημαντικό, κάτω από τον τίτλο.
Μια κάρτα με έναν σύνδεσμο και κουμπιά.
ΚύριοΔευτερεύονΤριτεύον
Πληροφορία · Υπάρχει διαθέσιμη ενημέρωση.
Επιτυχία · Οι αλλαγές σας αποθηκεύτηκαν.
Προειδοποίηση · Η συνδρομή σας λήγει σύντομα.
Σφάλμα · Η πληρωμή απέτυχε.
  • Κείμενο σε φόντο
    Λόγος—Κανονικό κείμενο—Μεγάλο κείμενο—AAA—
  • Δευτερεύον κείμενο σε φόντο
    Λόγος—Κανονικό κείμενο—Μεγάλο κείμενο—AAA—
  • Σύνδεσμος σε φόντο
    Λόγος—Κανονικό κείμενο—Μεγάλο κείμενο—AAA—
  • Κύριο κουμπί
    Λόγος—Κανονικό κείμενο—Μεγάλο κείμενο—AAA—
  • Δευτερεύον κουμπί
    Λόγος—Κανονικό κείμενο—Μεγάλο κείμενο—AAA—
  • Τριτεύον κείμενο σε φόντο
    Λόγος—Κανονικό κείμενο—Μεγάλο κείμενο—AAA—
  • Μήνυμα πληροφορίας
    Λόγος—Κανονικό κείμενο—Μεγάλο κείμενο—AAA—
  • Μήνυμα επιτυχίας
    Λόγος—Κανονικό κείμενο—Μεγάλο κείμενο—AAA—
  • Μήνυμα προειδοποίησης
    Λόγος—Κανονικό κείμενο—Μεγάλο κείμενο—AAA—
  • Μήνυμα κινδύνου
    Λόγος—Κανονικό κείμενο—Μεγάλο κείμενο—AAA—

Εξαγωγή

Πάρτε την παλέτα χρωμάτων στη μορφή που επιλέξατε παραπάνω (HEX).

Εισαγάγετε ένα κύριο χρώμα για να δημιουργηθεί ο κώδικας.

Μεταβλητές CSS για την παλέτα χρωμάτων (--color-primary-500…). Τα token παραπέμπουν σε αυτές τις μεταβλητές. Ενεργοποιήστε το σκούρο θέμα με data-theme="dark" στο στοιχείο html.

Σχετικά με τη γεννήτρια παλέτας χρωμάτων

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

Πλήρης παλέτα χρωμάτων από ένα μόνο χρώμα

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

Αποχρώσεις έτοιμες για χρήση

Κάθε χρώμα έρχεται σε έντεκα αποχρώσεις, από την πιο ανοιχτή (50) ως την πιο σκούρα (950), για φόντα, περιγράμματα, καταστάσεις αιώρησης και κείμενο. Αν ένα προτεινόμενο χρώμα δεν σας ταιριάζει, αντικαταστήστε το με το δικό σας: οι αποχρώσεις του προσαρμόζονται.

Token ανοιχτού και σκούρου θέματος

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

Ελεγμένη αντίθεση

Κάθε συνδυασμός κειμένου και φόντου αξιολογείται με βάση τους κανόνες WCAG: 4,5:1 για κανονικό κείμενο, 3:1 για μεγάλο κείμενο και 7:1 για το επίπεδο AAA.

Εξαγωγή σε CSS, Tailwind, JSON

Αντιγράψτε κάθε τιμή σε HEX, RGB, HSL ή OKLCH, ή κάντε λήψη ενός αρχείου μεταβλητών CSS, ενός θέματος Tailwind v4, μιας διαμόρφωσης Tailwind v3, ενός JSON ή μιας απλής λίστας. Όλα γίνονται στο πρόγραμμα περιήγησής σας: τίποτα δεν αποστέλλεται ούτε αποθηκεύεται.

Σχετικά εργαλεία