Τι περιλαμβάνει μια παλέτα χρωμάτων επωνυμίας;

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

Η αντίθεση είναι εξίσου σημαντική με την αισθητική. Οι Οδηγίες Προσβασιμότητας Περιεχομένου Ιστού (WCAG) απαιτούν λόγο αντίθεσης τουλάχιστον 4.5:1 ανάμεσα στο κανονικό κείμενο και το φόντο του, ή 7:1 για το αυστηρότερο επίπεδο AAA.

Περιγραφή εργαλείου

Περιγράψτε την επωνυμία σας στο πεδίο «Σχετικά με την επωνυμία σας»: τι κάνει, σε ποιους απευθύνεται και πώς θέλετε να αποπνέει. Επιλέξτε μια προσωπικότητα επωνυμίας (Επαγγελματική, Παιχνιδιάρικη, Πολυτελής, Μινιμαλιστική, Τολμηρή ή Φυσική) ή αφήστε την επιλογή «Αντιστοίχιση με την περιγραφή» και η AI θα την συμπεράνει από το κείμενό σας.

Θα λάβετε πέντε χρώματα με ονομασίες: Βασικό, Δευτερεύον, Έμφασης, Φόντου και Κειμένου. Η μορφή εξόδου αλλάζει τις τιμές τους μεταξύ HEX, RGB, HSL, CMYK και άλλων μορφών, ενώ κάθε χρώμα διαθέτει κουμπί αντιγραφής. Ο οδηγός χρήσης εξηγεί πώς να χρησιμοποιήσετε κάθε χρώμα, ενώ οι μεταβλητές CSS παρέχουν ένα μπλοκ κώδικα για επικόλληση σε ένα αρχείο CSS. Η AI καλείται να διατηρεί λόγο αντίθεσης τουλάχιστον 7:1 για το κείμενο σε σχέση με το φόντο και τουλάχιστον 3:1 για τα βασικά χρώματα και τα χρώματα έμφασης.

Παράδειγμα

Για την περιγραφή «Ένα συνοικιακό καφεκοπτείο στο Πόρτλαντ. Ζεστό, φιλόξενο και βιώσιμο», μπορεί να λάβετε ένα καφέ χρώμα ψημένου καφέ ως βασικό, ένα κρεμ φόντο και μια τερακότα απόχρωση έμφασης, με μεταβλητές CSS όπως αυτές:

:root {
  --brand-primary: #5b3a29;
  --brand-secondary: #a47551;
  --brand-accent: #d9643a;
  --brand-background: #faf6f0;
  --brand-text: #2b211c;
}

Χαρακτηριστικά

  • Πέντε χρώματα με σαφείς ρόλους, όνομα και σημείωση χρήσης για το καθένα
  • Έξι προσωπικότητες ή μία που επιλέγεται με βάση την περιγραφή σας
  • Αντιγράψτε τα χρώματα στη μορφή που χρειάζεστε ή ολόκληρο το σύνολο ως μεταβλητές CSS

Περιορισμοί

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