Επιλογέας χρωμάτων HEX, RGB, HSL

Πώς να χρησιμοποιήσετε τον επιλογέα χρωμάτων

1. Κάντε κλικ στο δείγμα κάτω από το Επιλέξτε χρώμα για να ανοίξει ο επιλογέας χρωμάτων του προγράμματος περιήγησής σας και μετά διαλέξτε ένα χρώμα. Μπορείτε επίσης να πληκτρολογήσετε ή να επικολλήσετε μια τιμή στο πεδίο Κωδικός χρώματος: έναν κωδικό HEX όπως #1E90FF, rgb(30, 144, 255), hsl(210 100% 56%) ή ένα όνομα CSS όπως tomato.
2. Η μεγάλη προεπισκόπηση ενημερώνεται αμέσως, με τον κωδικό HEX γραμμένο σε μαύρο ή λευκό, όποιο διαβάζεται καλύτερα πάνω σε αυτό το φόντο.
3. Στους Κωδικοί χρώματος, αντιγράψτε τη μορφή που χρειάζεστε με το κουμπί Αντιγραφή δίπλα της: HEX, RGB, HSL, HSV ή CMYK.
4. Πατήστε Τυχαίο χρώμα όταν θέλετε έμπνευση ή Επιλογή από την οθόνη (σε προγράμματα περιήγησης που το υποστηρίζουν, όπως το Chrome και το Edge) για να πάρετε δείγμα από οποιοδήποτε εικονοστοιχείο της οθόνης σας, ακόμη και από άλλα παράθυρα.

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

Τι σημαίνει κάθε κωδικός χρώματος

• Το HEX είναι η εξαψήφια δεκαεξαδική σημειογραφία που χρησιμοποιείται στην HTML και στο CSS. Κάθε ζεύγος ψηφίων είναι ένα κανάλι (κόκκινο, πράσινο, μπλε) από 00 έως FF, άρα το #1E90FF σημαίνει κόκκινο 30, πράσινο 144, μπλε 255.
• Το RGB δίνει τα ίδια τρία κανάλια ως δεκαδικούς αριθμούς από 0 έως 255. Είναι αυτό που περιμένουν τα περισσότερα προγράμματα σχεδίασης και οι βιβλιοθήκες προγραμματισμού.
• Το HSL περιγράφει ένα χρώμα με απόχρωση (γωνία από 0° έως 360° στον χρωματικό τροχό), κορεσμό και φωτεινότητα. Είναι βολικό για να κάνετε ένα χρώμα πιο ανοιχτό ή πιο σκούρο αλλάζοντας έναν μόνο αριθμό.
• Το HSV (ονομάζεται και HSB) χρησιμοποιεί απόχρωση, κορεσμό και τιμή (φωτεινότητα). Είναι το μοντέλο πίσω από τα χρωματικά τετράγωνα του Photoshop, του Figma και πολλών άλλων προγραμμάτων επεξεργασίας.
• Το CMYK εκφράζει το χρώμα ως ποσοστά μελανιού κυανού, ματζέντα, κίτρινου και μαύρου.

Για τις τιμές CMYK

Οι κωδικοί CMYK προκύπτουν από απλή μετατροπή: K = 1 − max(R, G, B) και μετά C = (1 − R − K) / (1 − K), και το ίδιο για τα M και Y. Είναι ο τυπικός τύπος των εγχειριδίων, αλλά δεν χρησιμοποιεί προφίλ ICC. Η πραγματική εκτύπωση εξαρτάται από το πιεστήριο, το χαρτί και τα μελάνια, οπότε ένας εκτυπωτής θα μετατρέψει τα χρώματά σας με το δικό του προφίλ και το αποτέλεσμα μπορεί να διαφέρει. Χρησιμοποιήστε αυτούς τους αριθμούς ως αφετηρία και όχι ως απόδειξη για εκτύπωση.

Πώς διαβάζονται οι λόγοι αντίθεσης

Κάτω από τον κωδικό HEX, η προεπισκόπηση δείχνει την Αντίθεση σε λευκό και την Αντίθεση σε μαύρο, υπολογισμένες με τον τύπο σχετικής φωτεινότητας του WCAG 2. Λόγος 4,5:1 ή μεγαλύτερος απαιτείται για κανονικό κείμενο στο επίπεδο AA και 3:1 για μεγάλο κείμενο και στοιχεία διεπαφής. Αν το χρώμα σας φτάνει μόνο 3:1 σε λευκό, κρατήστε το για μεγάλους τίτλους ή εικονίδια και χρησιμοποιήστε πιο σκούρα απόχρωση για το κείμενο.

Συμβουλές

• Μπορείτε να επικολλήσετε κωδικούς HEX χωρίς το #: λειτουργεί και το 1e90ff, όπως και οι σύντομες μορφές, π.χ. f60.
• Δέχονται και τιμές με διαφάνεια, όπως rgb(0 0 0 / 50%)· ο επιλογέας εμφανίζει το αδιαφανές χρώμα.
• Το παράθυρο χρώματος του ίδιου του προγράμματος περιήγησης διαφέρει από σύστημα σε σύστημα. Αν χρειάζεστε ακριβή τιμή, η πληκτρολόγησή της στο πεδίο Κωδικός χρώματος είναι πάντα ακριβής.