Τι είναι το OKLCH: η μορφή χρώματος που επιτέλους συμφωνεί με το μάτι

Τι είναι το OKLCH

Το OKLCH είναι η πολική μορφή του Oklab, ενός αντιληπτικού χρωματικού χώρου που δημοσίευσε ο Björn Ottosson το 2020. Έχει τρεις αριθμούς. Το L είναι η αντιληπτή φωτεινότητα, από 0 (μαύρο) έως 1 ή 100% (λευκό). Το C είναι η χρωματική ένταση (chroma), δηλαδή η ποσότητα χρώματος, από 0 (γκρι) έως περίπου 0,37 για τα πιο έντονα χρώματα που μπορούν να δείξουν οι οθόνες. Το H είναι η γωνία της απόχρωσης, από 0 έως 360 μοίρες.

Έτσι φαίνεται το ίδιο χρώμα γραμμένο σε διαφορετικές μορφές. Κάθε τιμή παρακάτω υπολογίζεται ζωντανά από το PickShade, οπότε μπορείτε να την αντιγράψετε όπως είναι.

Γιατί το OKLCH είναι καλύτερο από το HSL

Η φωτεινότητα του HSL είναι ένας τύπος, όχι αυτό που αντιλαμβάνεται το μάτι. Το hsl(60 100% 50%) είναι ένα φωτεινό κίτρινο και το hsl(240 100% 50%) ένα σκούρο μπλε, κι όμως και τα δύο δηλώνουν φωτεινότητα 50%. Αν στήσετε μια παλέτα στο HSL, κάθε απόχρωση θέλει χειροκίνητη διόρθωση.

Στο OKLCH τα χρώματα με το ίδιο L φαίνονται εξίσου φωτεινά. Μπορείτε να κρατήσετε σταθερά τα L και C και να περιστρέψετε το H για ένα σύνολο αποχρώσεων που δείχνουν ισορροπημένες ή να κρατήσετε τα H και C και να αλλάζετε το L σε βήματα για μια καθαρή κλίμακα τόνων. Γι’ αυτό το Tailwind CSS v4 ορίζει ολόκληρη την προεπιλεγμένη παλέτα του σε OKLCH.

Η φωτεινότητα προβλέπει και την αντίθεση. Κείμενο που διαφέρει στο L κατά 0,4 περίπου ή περισσότερο από το φόντο του συνήθως διαβάζεται άνετα, κι αυτό κάνει πολύ πιο εύκολο να σκεφτείτε προσβάσιμους συνδυασμούς χρωμάτων.

Σύνταξη στη CSS

Η φωτεινότητα γράφεται ως ποσοστό ή ως αριθμός από 0 έως 1. Η χρωματική ένταση είναι αριθμός. Η απόχρωση είναι γωνία σε μοίρες. Η διαφάνεια μπαίνει μετά από κάθετο.

color: oklch(62.8% 0.258 29.23);
background: oklch(0.7 0.15 250 / 50%);
border-color: oklch(from var(--brand) calc(l - 0.1) c h);

Υποστήριξη στα προγράμματα περιήγησης

Η oklch() δουλεύει σε κάθε σύγχρονο πρόγραμμα περιήγησης: Safari από την 15.4, Chrome και Edge από την 111, Firefox από την 113. Αυτό καλύπτει πολύ πάνω από το 90% των χρηστών. Για πολύ παλιά προγράμματα περιήγησης, βάλτε μια εφεδρική τιμή HEX στη γραμμή πριν από την τιμή OKLCH.

color: #ff5733;
color: oklch(68% 0.21 33.7);

Όρια χρωματικής έντασης και χρωματικό εύρος

Το OKLCH μπορεί να περιγράψει χρώματα που καμία οθόνη δεν μπορεί να δείξει. Η μέγιστη χρωματική ένταση εξαρτάται από τη φωτεινότητα και την απόχρωση: ένα έντονο κίτρινο υπάρχει μόνο σε υψηλή φωτεινότητα, ένα έντονο μπλε μόνο σε χαμηλή. Όταν μια τιμή βγαίνει έξω από το χρωματικό εύρος (gamut) του sRGB ή του Display P3, το πρόγραμμα περιήγησης τη φέρνει πίσω μέσα, κάτι που μπορεί να μετατοπίσει το χρώμα.

Το PickShade επισημαίνει τα χρώματα εκτός sRGB και σας δίνει το πλησιέστερο χρώμα που χωράει. Το βρίσκει μειώνοντας τη χρωματική ένταση και κρατώντας φωτεινότητα και απόχρωση, με τη μέθοδο που προτείνει το CSS Color 4.

Πώς μετατρέπετε HEX σε OKLCH

Η μετατροπή γίνεται σε βήματα: HEX σε sRGB, sRGB σε γραμμικό φως, γραμμικό sRGB στον χώρο των κωνίων LMS, κυβική ρίζα, πίνακας προς Oklab και τέλος Oklab σε πολικές συντεταγμένες. Με το χέρι τα λάθη είναι εύκολα, οπότε επικολλήστε οποιοδήποτε χρώμα στον μετατροπέα και αντιγράψτε το αποτέλεσμα.

Ερωτήσεις και απαντήσεις