Χρώματα και σχεδίαση

Επιλέξτε, μετατρέψτε και συνδυάστε χρώματα και δημιουργήστε CSS για τα σχέδιά σας.

• Έλεγχος αντίθεσης χρωμάτων WCAG Δωρεάν έλεγχος αντίθεσης WCAG. Εισαγάγετε χρώμα κειμένου και φόντου για λόγο αντίθεσης, αποτελέσματα AA/AAA και πρόταση χρώματος.
• Αριθμομηχανή αναλογίας διαστάσεων (Aspect Ratio) Αριθμομηχανή αναλογίας διαστάσεων: απλοποιήστε πλάτος και ύψος, αλλάξτε μέγεθος με ίδια αναλογία, δείτε 16:9, 4:3 και αντιγράψτε το CSS.
• Γεννήτρια Border Radius Διαμορφώστε οπτικά το border-radius του CSS με κουκκίδες που σύρονται. Ορίστε κάθε γωνία σε px ή %, φτιάξτε σχήματα blob και αντιγράψτε τον κώδικα.
• Γεννήτρια Box Shadow Σχεδιάστε πολυεπίπεδες σκιές box-shadow σε CSS με ζωντανή προεπισκόπηση. Ορίστε μετατόπιση, θάμπωμα, χρώμα, inset και αντιγράψτε τον κώδικα.
• Γεννήτρια Clip-Path Σχεδιάστε σχήματα clip-path CSS με σημεία που σύρονται. Πολύγωνα, κύκλοι, ελλείψεις, inset και προεπιλογές. Αντιγράψτε τον κώδικα.
• Γεννήτρια Flexbox και CSS Grid Φτιάξτε οπτικά διατάξεις flexbox και CSS grid. Ορίστε ιδιότητες, ονομάστε περιοχές πλέγματος και αντιγράψτε καθαρό CSS και HTML.
• Γεννήτρια ανοιχτών και σκούρων αποχρώσεων Δημιουργήστε ανοιχτότερες και σκουρότερες αποχρώσεις κάθε χρώματος με βήμα 5, 10, 20 ή 25% και εξαγάγετέ τες ως μεταβλητές CSS ή Tailwind.
• Γεννήτρια διαβάθμισης CSS (Gradient) Δημιουργήστε γραμμικές, ακτινωτές και κωνικές διαβαθμίσεις CSS με ζωντανή προεπισκόπηση. Σύρετε σημεία χρώματος και αντιγράψτε τον κώδικα.
• Γεννήτρια παλέτας χρωμάτων Δημιουργήστε παλέτες από ένα βασικό χρώμα με κανόνες αρμονίας: συμπληρωματική, αναλογική, τριαδική, τετραδική και μονοχρωματική.
• Επεξεργαστής Cubic-Bezier Σχεδιάστε καμπύλες easing CSS με επεξεργαστή cubic-bezier, συγκρίνετέ τες με το linear σε ζωντανή κίνηση και αντιγράψτε τον κώδικα.
• Επιλογέας χρωμάτων HEX, RGB, HSL Δωρεάν επιλογέας χρωμάτων. Διαλέξτε χρώμα και αντιγράψτε αμέσως τους κωδικούς HEX, RGB, HSL, HSV και CMYK με λόγους αντίθεσης.
• Επιλογέας χρώματος από εικόνα Ανοίξτε μια εικόνα και κάντε κλικ σε οποιοδήποτε εικονοστοιχείο για το χρώμα του ως HEX, RGB, HSL, HSV και CMYK. Μεγεθυντικός φακός και μέσος όρος.
• Εύρεση ονόματος χρώματος από κωδικό HEX Βρείτε το όνομα οποιουδήποτε χρώματος. Εισαγάγετε κωδικό HEX ή RGB και δείτε τα 5 πλησιέστερα ονόματα από πάνω από 30.000 χρώματα.
• Μετατροπέας PX σε REM και EM Μετατρέψτε px σε rem και em με οποιοδήποτε μέγεθος ρίζας, φτιάξτε πίνακα μαζικής μετατροπής και μετατρέψτε αποσπάσματα CSS με ένα κλικ.
• Μετατροπέας χρωμάτων HEX, RGB, HSL, CMYK Μετατρέψτε οποιοδήποτε χρώμα μεταξύ HEX, RGB, HSL, HSV, HWB, CMYK, LAB, LCH και OKLCH. Επικολλήστε έναν κωδικό, δείτε το χρώμα και αντιγράψτε κάθε μορφή.
• Παλέτα χρωμάτων από εικόνα Εξαγάγετε παλέτα χρωμάτων από οποιαδήποτε εικόνα. Λάβετε τα κυρίαρχα χρώματα ως κωδικούς HEX με το μερίδιό τους, έτοιμα για αντιγραφή.
• Προσομοιωτής δαλτονισμού και αχρωματοψίας Δωρεάν προσομοιωτής δαλτονισμού. Δείτε κάθε εικόνα με πρωτανοπία, δευτερανοπία, τριτανοπία ή αχρωματοψία, δίπλα-δίπλα ή με ολισθητή.
• Συνδυασμός γραμματοσειρών (Font Pairing) Δοκιμάστε συνδυασμούς γραμματοσειρών για τίτλους και κείμενο με 20 γραμματοσειρές ανοιχτής άδειας και αντιγράψτε τον κώδικα CSS.
• Υποσύνολο γραμματοσειράς (Font Subsetter) Δημιουργήστε υποσύνολο γραμματοσειράς με τους χαρακτήρες που χρειάζεστε, στο πρόγραμμα περιήγησής σας. Μικρότερο TTF/OTF, WOFF και @font-face.