Χρωματικό εύρος (gamut): sRGB, Display P3 και χρώματα εκτός εύρους
Το χρωματικό εύρος (gamut) είναι το σύνολο των χρωμάτων που μπορεί να δείξει μια οθόνη ή ένας χρωματικός χώρος. Το web χτίστηκε πάνω στο sRGB, όμως τα περισσότερα κινητά και πολλά laptop δείχνουν πλέον Display P3, με αισθητά πιο έντονα κόκκινα, πράσινα και πορτοκαλί.
2 λεπ. ανάγνωσης
Τι είναι το χρωματικό εύρος
Κάθε οθόνη αναμειγνύει κόκκινο, πράσινο και μπλε φως. Το πιο καθαρό κόκκινο, πράσινο και μπλε που μπορεί να παράγει ορίζουν τις κορυφές ενός τριγώνου και κάθε χρώμα μέσα σε αυτό το τρίγωνο ανήκει στο χρωματικό της εύρος. Τα χρώματα έξω από αυτό απλώς δεν μπορούν να εμφανιστούν σε αυτή την οθόνη.
sRGB, Display P3 και Rec. 2020
Το sRGB είναι η προεπιλογή του web και των περισσότερων οθονών που πουλήθηκαν πριν από το 2016. Τα HEX, rgb() και hsl() περιγράφουν όλα χρώματα sRGB.
Το Display P3 καλύπτει περίπου ένα τέταρτο περισσότερα χρώματα από το sRGB, κυρίως έντονα πράσινα, κόκκινα και πορτοκαλί. Το χρησιμοποιούν τα iPhone, τα iPad, τα Mac και πολλά κινητά Android και ακριβά laptop. Στη CSS γράφεται ως color(display-p3 r g b) ή ως τιμή OKLCH με υψηλή χρωματική ένταση.
Το Rec. 2020 είναι ακόμη μεγαλύτερο και χρησιμοποιείται για βίντεο HDR. Ελάχιστες οθόνες το καλύπτουν πλήρως.
| Μορφή | Τιμή |
|---|---|
| HEX | |
| Display P3 | |
| OKLCH | |
| Rec. 2020 |
Τι συμβαίνει στα χρώματα εκτός εύρους
Αν ένα χρώμα CSS βρίσκεται έξω από το χρωματικό εύρος της οθόνης, το πρόγραμμα περιήγησης πρέπει να δείξει κάτι άλλο. Το απλό ψαλίδισμα (clipping) κόβει κάθε κανάλι στο όριο και μπορεί να αλλάξει την απόχρωση. Το CSS Color 4 προτείνει αντί γι’ αυτό αντιστοίχιση εύρους (gamut mapping) σε OKLCH: κρατάτε φωτεινότητα και απόχρωση και μειώνετε τη χρωματική ένταση μέχρι το χρώμα να χωρέσει.
Το PickShade επισημαίνει κάθε χρώμα που πέφτει έξω από το sRGB και δείχνει την εφεδρική τιμή μετά την αντιστοίχιση, οπότε ξέρετε ακριβώς τι θα δουν όσοι έχουν παλαιότερες οθόνες.
Χρώματα P3 στη CSS με ασφάλεια
Γράψτε πρώτα μια εφεδρική τιμή sRGB και δεύτερη την τιμή ευρέος χρωματικού εύρους ή βάλτε την έντονη τιμή μέσα σε media query color-gamut.
CSS
.button {
background: #ff5733;
background: oklch(68% 0.24 33.7);
}
@media (color-gamut: p3) {
.hero {
color: color(display-p3 1 0.3 0.15);
}
}Ερωτήσεις και απαντήσεις
Πώς ξέρω αν ένα χρώμα είναι μέσα στο sRGB;
Επικολλήστε το στο PickShade. Κάθε χρώμα εκτός sRGB παίρνει προειδοποίηση εύρους μαζί με το πλησιέστερο χρώμα που χωράει.
Δουλεύουν τα χρώματα P3 στα Windows;
Ναι, αν η οθόνη καλύπτει το P3 και το πρόγραμμα περιήγησης γνωρίζει το προφίλ της. Σε οθόνη sRGB το πρόγραμμα περιήγησης φέρνει το χρώμα μέσα στο sRGB, οπότε τίποτα δεν χαλάει.
Περιορίζεται το HEX στο sRGB;
Ναι. Τα HEX, rgb(), hsl() και hwb() περιγράφουν πάντα χρώματα sRGB. Για χρώματα ευρέος χρωματικού εύρους χρησιμοποιήστε oklch() ή color(display-p3 ...).