Χρωματικές παλέτες

Γεννήτρια αποχρώσεων χρώματος

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

Κλίμακα από 50 έως 950

Έντεκα αποχρώσεις της ίδιας χρωματικής οικογένειας, ταξινομημένες όπως στο Tailwind. Το χρώμα σου σημειώνεται στην απόχρωση που του αντιστοιχεί.

Πιο ανοιχτές αποχρώσεις (με λευκό)

Πάτησε μια απόχρωση για να αντιγράψεις το HEX της.

Πιο σκούρες αποχρώσεις (με μαύρο)

Απαλές αποχρώσεις (με γκρι)

Εξαγωγή κλίμακας

Τι είναι οι αποχρώσεις ενός χρώματος

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

Ανοιχτές, σκούρες και απαλές αποχρώσεις

Η ανοιχτή απόχρωση είναι το χρώμα με λευκό: πιο φωτεινή και πιο απαλή. Η σκούρα είναι το χρώμα με μαύρο: πιο σκοτεινή και πιο βαθιά. Η απαλή είναι το χρώμα με γκρι: πιο γήινη και κομψή.

Πώς να χρησιμοποιήσεις μια κλίμακα στο σχέδιο

Βάλε τις ανοιχτές αποχρώσεις (50 έως 200) στα φόντα, τις μεσαίες (400 έως 600) σε κουμπιά και συνδέσμους και τις σκούρες (700 έως 950) σε κείμενα και περιγράμματα. Με μία μόνο κλίμακα έχεις τακτοποιημένο και ενιαίο περιβάλλον.

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

Πώς υπολογίζεται η κλίμακα;

Χρησιμοποιούμε τον χρωματικό χώρο OKLCH, που μιμείται τον τρόπο που το μάτι αντιλαμβάνεται τη φωτεινότητα. Έτσι τα βήματα ανάμεσα στις αποχρώσεις φαίνονται ομοιόμορφα, χωρίς απότομα άλματα.

Τι σημαίνουν οι αριθμοί 50 έως 950;

Είναι η κλίμακα που χρησιμοποιούν το Tailwind CSS και πολλά συστήματα σχεδίασης: το 50 είναι η πιο ανοιχτή απόχρωση και το 950 η πιο σκούρα. Το χρώμα σου μπαίνει στον αριθμό που του ταιριάζει καλύτερα.

Μπορώ να χρησιμοποιήσω την κλίμακα στο Tailwind ή στο CSS;

Ναι. Γράψε ένα όνομα, διάλεξε μορφή και αντίγραψε τον κώδικα: μεταβλητές CSS έτοιμες για επικόλληση ή ένα μπλοκ χρωμάτων για τις ρυθμίσεις του Tailwind.

Ποια είναι η διαφορά ανάμεσα σε κλίμακα αποχρώσεων και χρωματική παλέτα;

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

Άλλοι οδηγοί και εργαλεία