Οι παλέτες που σχεδιάζονται σε HSL συχνά καταλήγουν στο χαρτί. Αυτός ο μετατροπέας παίρνει το hue, saturation και lightness που διάλεξες και επιστρέφει τα τέσσερα ποσοστά μελανιών που χρησιμοποιεί το τυπογραφείο.
Πώς λειτουργεί η μετατροπή από HSL σε CMYK
- Μετέτρεψε το τρίπτυχο HSL σε RGB κανάλια μεταξύ 0 και 255.
- Κανονικοποίησε αυτά τα κανάλια διαιρώντας με 255.
- Υπολόγισε το key component K = 1 − max(R, G, B).
- Πήγαλε τα C, M και Y από τα υπόλοιπα κανάλια και μετέτρεψε και τα τέσσερα σε ποσοστά.
Παράδειγμα εφαρμογής
Γίνονται δύο μετατροπές στη σειρά, οπότε το στρογγύλεμα εφαρμόζεται δύο φορές — και το CMYK παραμένει προσέγγιση χωρίς προφίλ χρώματος. Πρόσδοκε ότι το τυπωμένο αποτέλεσμα θα είναι ελαφρώς λιγότερο ζωντανό από την προεπισκόπηση HSL.
HSL και CMYK εξηγούνται
Τι είναι το HSL;
Το HSL χωρίζει ένα χρώμα σε hue (0–360° στον χρωματικό τροχό), saturation (πόσο χρωματικό, 0–100%) και lightness (πόσο φωτεινό, 0–100%). Επειδή κάθε μέρος αντιστοιχεί στον τρόπο που οι άνθρωποι περιγράφουν το χρώμα, το HSL είναι η πιο εύκολη μορφή για να φτιάχνεις τόνους, σκιές και συνεπείς παλέτες — χειροκίνητα ή σε κώδικα.
- Σύνταξη:
- hsl(H, S%, L%)
- Πεδίο:
- 0–360°, 0–100%, 0–100%
- Καλύτερο για:
- παλέτες, τόνους και σκιές, θεματισμός
Τι είναι το CMYK;
Το CMYK είναι το μοντέλο τεσσάρων μελανιών που χρησιμοποιείται στην εκτύπωση: cyan, magenta, yellow και key (μαύρο), το καθένα ως ποσοστό από 0 έως 100. Το μελάνι αφαιρεί φως αντί να το εκπέμπει, γι' αυτό το CMYK καλύπτει λιγότερα χρώματα από μια οθόνη — και για αυτό τα φωτεινά χρώματα στην οθόνη συχνά φαίνονται πιο θαμπά όταν τυπώνονται.
- Σύνταξη:
- cmyk(C%, M%, Y%, K%)
- Πεδίο:
- 0–100% ανά μελάνι
- Καλύτερο για:
- εκτύπωση, συσκευασία, αρχεία έτοιμα για τύπωμα
Πίνακας αναφοράς HSL σε CMYK
Οι πιο κοινές CSS αποχρώσεις, μετατρεπόμενες από HSL σε CMYK.
| Χρώμα | HSL | CMYK |
|---|---|---|
| black | hsl(0, 0%, 0%) | cmyk(0%, 0%, 0%, 100%) |
| white | hsl(0, 0%, 100%) | cmyk(0%, 0%, 0%, 0%) |
| red | hsl(0, 100%, 50%) | cmyk(0%, 100%, 100%, 0%) |
| lime | hsl(120, 100%, 50%) | cmyk(100%, 0%, 100%, 0%) |
| blue | hsl(240, 100%, 50%) | cmyk(100%, 100%, 0%, 0%) |
| yellow | hsl(60, 100%, 50%) | cmyk(0%, 0%, 100%, 0%) |
| orange | hsl(39, 100%, 50%) | cmyk(0%, 35%, 100%, 0%) |
| teal | hsl(180, 100%, 25%) | cmyk(100%, 1%, 0%, 50%) |
| purple | hsl(300, 100%, 25%) | cmyk(0%, 100%, 1%, 50%) |
| gray | hsl(0, 0%, 50%) | cmyk(0%, 0%, 0%, 50%) |