Μορφές χρωμάτων: HEX, RGB, HSL, OKLCH και οι υπόλοιπες
Το ίδιο χρώμα γράφεται με δώδεκα διαφορετικούς τρόπους. Δείτε τι σημαίνει κάθε μορφή, πότε τη χρησιμοποιείτε και πώς φαίνεται το ίδιο χρώμα σε όλες.
2 λεπ. ανάγνωσης
Ένα χρώμα σε κάθε μορφή
Όλες οι παρακάτω τιμές περιγράφουν το ίδιο χρώμα και υπολογίζονται ζωντανά. Ανοίξτε τον μετατροπέα χρωμάτων για να δοκιμάσετε το δικό σας χρώμα.
| Μορφή | Τιμή |
|---|---|
| HEX | |
| RGB | |
| HSL | |
| HWB | |
| Lab | |
| LCH | |
| OKLab | |
| OKLCH | |
| Display P3 | |
| CMYK |
HEX και RGB
Το HEX γράφει το κόκκινο, το πράσινο και το μπλε με δύο δεκαεξαδικά ψηφία το καθένα, από 00 έως ff. Το τριψήφιο HEX είναι σύντομη γραφή όπου κάθε ψηφίο διπλασιάζεται, ενώ τα οκτώ ψηφία προσθέτουν διαφάνεια. Η rgb() γράφει τα ίδια κανάλια ως αριθμούς από 0 έως 255. Και τα δύο περιγράφουν το sRGB και είναι η πιο ασφαλής επιλογή για μέγιστη συμβατότητα.
HSL και HWB
Το HSL περιγράφει απόχρωση, κορεσμό και φωτεινότητα, ενώ το HWB απόχρωση, ποσότητα λευκού και ποσότητα μαύρου. Διαβάζονται εύκολα, αλλά η φωτεινότητά τους δεν αντιστοιχεί σε αυτό που βλέπει το μάτι, οπότε ίδιοι αριθμοί μπορεί να φαίνονται πολύ διαφορετικοί σε διαφορετικές αποχρώσεις.
LAB, LCH, OKLAB και OKLCH
Αυτές οι μορφές είναι σχεδιασμένες με βάση την ανθρώπινη όραση. Τα LAB και LCH προέρχονται από το CIELAB. Τα OKLAB και OKLCH είναι μια σύγχρονη βελτίωση με πιο σταθερές αποχρώσεις, ειδικά στα μπλε. Χρησιμοποιήστε το OKLCH για design systems, κλίμακες τόνων και οτιδήποτε απαιτεί συνεπή φωτεινότητα.
CMYK
Το CMYK περιγράφει μελάνι κυανό, ματζέντα, κίτρινο και μαύρο. Η μετατροπή που βλέπετε εδώ είναι ένας απλός τύπος, ανεξάρτητος από συσκευή. Το πραγματικό αποτέλεσμα στην εκτύπωση εξαρτάται από το χαρτί, το μελάνι και το προφίλ του εκτυπωτή, οπότε δείτε την ως αφετηρία και ζητήστε το προφίλ από το τυπογραφείο σας.
Swift, Flutter και Android
Οι πλατφόρμες για κινητά έχουν τη δική τους σύνταξη. Τα SwiftUI και UIKit δέχονται κόκκινο, πράσινο και μπλε ως αριθμούς από 0 έως 1. Τα Flutter και Android δέχονται έναν 32-bit αριθμό ARGB, όπου τα δύο πρώτα δεκαεξαδικά ψηφία είναι το κανάλι άλφα.
| Μορφή | Τιμή |
|---|---|
| SwiftUI | |
| UIKit | |
| Flutter / Compose | |
| Android XML |
Ερωτήσεις και απαντήσεις
Ποια μορφή χρώματος να χρησιμοποιώ στη CSS;
Χρησιμοποιήστε HEX ή rgb() όταν χρειάζεστε τη μεγαλύτερη δυνατή συμβατότητα και OKLCH για design tokens, κλίμακες τόνων και χρώματα ευρέος χρωματικού εύρους. Όλα τα σύγχρονα προγράμματα περιήγησης υποστηρίζουν το OKLCH.
Ποια είναι η διαφορά ανάμεσα σε HEX και RGB;
Στο νόημα καμία. Το HEX γράφει κάθε κανάλι στο δεκαεξαδικό σύστημα, η rgb() στο δεκαδικό. Τα #ff5733 και rgb(255 87 51) είναι το ίδιο χρώμα.
Γιατί η σειρά στον κωδικό χρώματος του Android είναι διαφορετική;
Το Android και το Flutter χρησιμοποιούν ARGB, οπότε το άλφα έρχεται πρώτο: το 0xFFFF5733 είναι το #ff5733 εντελώς αδιαφανές. Το οκταψήφιο HEX της CSS βάζει το άλφα στο τέλος.