Aller au contenu principal

    Χρησιμοποιούμε cookies

    Χρησιμοποιούμε cookies για να βελτιώσουμε την εμπειρία σας.

    Μάθετε περισσότερα στο/στη/στα Cookies και Απόρρητο

    Θέμα shadcn/ui

    Δημιουργήστε διαμορφώσεις θέματος για shadcn/ui. Χρησιμοποιήστε το Θέμα shadcn/ui δωρεάν online, χωρίς εγγραφή, με γρήγορα αποτελέσματα και ασφαλή επεξεργασία στον browser.

    Base

    Primary

    Secondary

    Muted & Accent

    Destructive

    Borders & Input

    Προεπισκόπηση

    Προεπισκόπηση στοιχείων

    Card content

    Muted text example

    @layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 4%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 4%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 4%;
    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96%;
    --muted-foreground: 0 0% 45%;
    --accent: 0 0% 96%;
    --accent-foreground: 0 0% 9%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 90%;
    --input: 0 0% 90%;
    --ring: 0 0% 9%;
    --radius: 0.5rem;
  }
}

    Το Θέμα shadcn/ui σας βοηθά να δουλεύετε με χρώματα απευθείας στον browser.

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

    Supported formats

    CSS
    Tailwind
    HSL
    shadcn/ui

    How it works

    1

    Step 1

    Ανοίξτε το Θέμα shadcn/ui

    2

    Step 2

    Εισαγάγετε ή εισάγετε τα χρώματά σας

    3

    Step 3

    Αντιγράψτε, εξάγετε ή επαναχρησιμοποιήστε το αποτέλεσμα

    Συνηθισμένα λάθη προς αποφυγή

    • Η παράλειψη ελέγχου αντίθεσης μπορεί να βλάψει την αναγνωσιμότητα.
    • Τα πολλά χρώματα κάνουν μια παλέτα δυσκολότερη στη χρήση.

    Συμβουλές από ειδικούς (Pro tips)

    • Κρατήστε τα βασικά χρώματα ως CSS variables.
    • Δοκιμάστε την παλέτα σε light και dark mode πριν τη δημοσίευση.

    Privacy guaranteed: everything is processed locally in your browser.

    Όποτε είναι δυνατό, η επεξεργασία γίνεται τοπικά στον browser. Δεν απαιτείται λογαριασμός.

    Θέμα shadcn/ui για τα χρωματικά σας έργα

    Δημιουργήστε διαμορφώσεις θέματος για shadcn/ui.

    Θέμα shadcn/ui χωρίς απώλεια ακρίβειας

    Οι μετατροπές βασίζονται σε ακριβείς τιμές (HEX, RGB, HSL, OKLCH). Χωρίς οπτική προσέγγιση — λαμβάνετε το χρώμα πιστό στην πρόθεση του design.

    Θέμα shadcn/ui δωρεάν online

    Χωρίς εγγραφή, χωρίς λήψη λογισμικού. Το Θέμα shadcn/ui είναι 100% δωρεάν και λειτουργεί σε κάθε browser. Το δωρεάν πλάνο περιλαμβάνει 10 χρήσεις την ημέρα.

    Θέμα shadcn/ui γρήγορα και με ασφάλεια

    Η επεξεργασία γίνεται απευθείας στον browser για μέγιστη ταχύτητα. Κανένα δεδομένο δεν στέλνεται στους servers — τα χρώματά σας παραμένουν ιδιωτικά.

    Θέμα shadcn/ui για κοινή χρήση και συνεργασία

    Εξάγετε αποτελέσματα ως HEX, RGB, HSL, CSS, JSON ή αντιγράψτε με ένα κλικ. Ιδανικό για κοινή χρήση οδηγού χρωμάτων με την ομάδα σας.

    Ανακαλύψτε όλα τα εργαλεία χρωμάτων

    Εξαγάγετε, μετατρέψτε, δημιουργήστε παλέτες, διαβαθμίσεις και αντιθέσεις WCAG με λίγα κλικ.

    Δείτε όλα τα εργαλεία

    Related tools

    Tailwind Παλέτα
    CSS Μεταβλητές
    Προεπισκόπηση UI
    Αντίθεση χρωμάτων

    Οδηγοί και σεμινάρια

    Μάθετε πώς να χρησιμοποιείτε τα εργαλεία μας με τους λεπτομερείς οδηγούς μας.

    shadcn-theme: πρακτικός οδηγός για developer

    Τοπικοποιημένος οδηγός για το shadcn-theme, καλές πρακτικές developer και συχνά λάθη.

    shadcn-theme: πρακτικός οδηγός για developer

    Τοπικοποιημένος οδηγός για το shadcn-theme, καλές πρακτικές developer και συχνά λάθη.

    shadcn-theme: πρακτικός οδηγός για developer

    Τοπικοποιημένος οδηγός για το shadcn-theme, καλές πρακτικές developer και συχνά λάθη.

    Frequently asked questions

    Ναι, το εργαλείο είναι διαθέσιμο δωρεάν online.

    Όποτε είναι δυνατό, η επεξεργασία γίνεται στον browser για την προστασία των δεδομένων σας.