Διαλέξτε χρώμα, πάρτε τον κώδικα και συνεχίστε τη δουλειά

Επιλογέας χρώματος, δημιουργός διαβαθμίσεων και σταγονόμετρο εικόνας σε μία σελίδα. Χωρίς λογαριασμό, χωρίς εγκατάσταση και χωρίς αναμονή: διαλέξτε απόχρωση και αντιγράψτε την ως HEX, RGB, HSL ή HSV.

%
Άνοιγμα σελίδας χρώματος

Κωδικοί χρώματος

HEX#0F37FF
RGBrgb(15, 55, 255)
HSLhsl(230°, 100%, 52.94%)
HSVhsv(230°, 94.12%, 100%)
CMYKcmyk(94.12%, 78.43%, 0%, 0%)
XYZxyz(19.61, 10.05, 95.5)
LABlab(37.93, 62.96, -98.45)
LCHlch(37.93, 116.86, 302.6°)

Χρώματα σε τάση

Δείτε όλα τα χρώματα σε τάση
#A5E3FE
#8E1025
#65E76F
#046B8B
#C37B3C
#C02148
#B5A9D0
#F29C8C
#2C3F44
#F04777
#3B89B0
#7CD0B2

Τι περιλαμβάνει

Σταγονόμετρο

Πάρτε χρώματα από μια εικόνα που ανεβάσατε ή από οτιδήποτε στην οθόνη όπου το επιτρέπει το πρόγραμμα περιήγησης. Αφήστε ένα αρχείο στη σελίδα και κάντε κλικ σε ένα εικονοστοιχείο.

Μετατροπή μορφών

Εναλλαγή αμέσως μεταξύ HEX, RGB, HSL, HSV, CMYK, XYZ, LAB και LCH, με αντιγραφή κάθε τιμής κατευθείαν σε CSS ή στο σχεδιαστικό σας εργαλείο.

Δημιουργός διαβαθμίσεων

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

Ιστορικό χρωμάτων

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

Αρμονίες και παραλλαγές

Κάθε σελίδα χρώματος δείχνει ανοιχτές και σκούρες αποχρώσεις και έξι σχήματα αρμονίας, και μετατρέπει οποιοδήποτε από αυτά σε διαβάθμιση με ένα κλικ.

Δωρεάν και ιδιωτικό

Χωρίς συνδρομή και χωρίς παρακολούθηση των επιλογών σας. Οι εικόνες που ανεβάζετε διαβάζονται στο πρόγραμμα περιήγησης και δεν πηγαίνουν πουθενά.

Σε ποιους απευθύνεται

Σχεδιαστές και ομάδες προϊόντος
Όταν σκιαγραφείτε μια διεπαφή ή μια παλέτα μάρκας, δοκιμάζετε συνδυασμούς και αντιγράφετε το ακριβές CSS μιας διαβάθμισης.
Εικονογράφηση και ζωγραφική
Για λήψη χρωμάτων από φωτογραφίες και πίνακες με το σταγονόμετρο και σχεδιασμό απαλών μεταβάσεων.
Ανάπτυξη frontend
Για συνεπείς τιμές χρώματος σε όλο το έργο και ανάγνωσή τους από ένα υπάρχον σχέδιο.
Όποιον ελέγχει προσβασιμότητα
Για σύγκριση ενός χρώματος σε διαφορετικά μοντέλα και ρύθμισή του ώσπου ο λόγος αντίθεσης να ξεπεράσει το απαιτούμενο όριο.

Πώς χρησιμοποιείται

  1. 1

    Διαλέξτε χρώμα

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

  2. 2

    Πάρτε χρώμα από εικόνα

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

  3. 3

    Φτιάξτε διαβάθμιση

    Κάντε κλικ στη μπάρα για να προσθέσετε στάση και σύρετέ τη στη θέση της. Εναλλάξτε γραμμική ή ακτινική και ορίστε τη γωνία.

  4. 4

    Αντιγράψτε και χρησιμοποιήστε

    Αντιγράψτε την τιμή ή ολόκληρη τη δήλωση CSS. Ό,τι διαλέγετε αποθηκεύεται αυτόματα στο ιστορικό.

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

Ένα μικρό εργαλείο που δεν εμποδίζει

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

Επεκτάσεις προγράμματος περιήγησης

Προτιμάτε να παίρνετε χρώματα απευθείας από τις σελίδες που επισκέπτεστε; Οι επεκτάσεις για Chrome και Edge προσθέτουν ένα σταγονόμετρο στη γραμμή εργαλείων, κρατούν δικό τους ιστορικό και ανοίγουν αυτό το εργαλείο με ένα κλικ.

Άνοιγμα Chrome Web StoreΆνοιγμα προσθέτων Microsoft Edge