Μετατροπή χρώματος μεταξύ RGB, HSL και δεκαεξαδικού

Η εργασία με το χρώμα στον Ιστό περιλαμβάνει συνεχή ταχυδακτυλουργία μεταξύ πολλών σημειώσεων. Ένας μετατροπέας χρώματος αποφεύγει τα χειροκίνητα σφάλματα και σας επιτρέπει να μεταβείτε άμεσα από τη μια μορφή στην άλλη, ανάλογα με το περιβάλλον χρήσης. Κάθε μορφή έχει τα δυνατά της σημεία και το να γνωρίζει κανείς ποια να χρησιμοποιήσει είναι ένα από τα αντανακλαστικά του προγραμματιστή front-end.

Ακολουθούν οι τυπικές χρήσεις που παρακινούν μια μετατροπή χρώματος:

Το
• RGB είναι εγγενές σε CSS και JavaScript, αναγνώσιμο από τον άνθρωπο για να κατανοήσει ένα κυρίαρχο (κόκκινο, πράσινο, μπλε κανάλια στο 0-255).
Το
• HSL κάνει την αλλαγή απόχρωσης ασήμαντη: απλώς προσαρμόστε τον κορεσμό ή τη φωτεινότητα χωρίς να υπολογίσετε εκ νέου κάθε κανάλι.
Το
• HEX είναι η κανονική μορφή αντιγραφής και επικόλλησης: έξι χαρακτήρες, συμβατοί παντού, ιδανικός για μοντέλα Figma, Sketch ή οδηγούς στυλ.
• Οι μετατροπές HEX σε RGB, RGB σε HEX, HEX σε HSL και οι αντίστροφές τους είναι οι πιο συνηθισμένες λειτουργίες σε CSS και JavaScript.

RGB και RGBA (Κόκκινο, Πράσινο, Μπλε, Άλφα)

Κάθε κανάλι κωδικοποιείται ως ακέραιος αριθμός μεταξύ 0 και 255, που αντιστοιχεί σε ένα byte ανά στοιχείο και δίνει 16.777.216 πιθανά χρώματα. Το κανάλι άλφα του RGBA κυμαίνεται από 0 (διαφανές) έως 1 (αδιαφανές) και ελέγχει τη διαφάνεια.

.κουμπί {
    χρώμα φόντου: rgb(20, 0, 182);
    χρώμα περιγράμματος: rgba(20, 0, 182, 0,5);
}

HEX και HEX8 (δεκαεξαδικός συμβολισμός)

Πολύ δημοφιλής συμπαγής μορφή: #RRGGBB σε έξι χαρακτήρες, όπου κάθε ζεύγος αντιπροσωπεύει ένα κανάλι RGB στη βάση 16. Η παραλλαγή #RRGGBBAA σε οκτώ χαρακτήρες προσθέτει το κανάλι άλφα σε δεκαεξαδικό (00 διαφανές, FF αδιαφανές). Ο σύντομος συμβολισμός #RGB υπάρχει επίσης: #F53 είναι το ισοδύναμο του #FF5533.

.title { color: #1400B6; }
.shadow { color: #1400B680; } /* άλφα 50% */
.accent { color: #F53; } /* σύντομη φόρμα */

HSL και HSLA (απόχρωση, κορεσμός, ελαφρότητα, άλφα)

Το HSL περιγράφει το χρώμα αντιληπτικά. Η απόχρωση είναι μια γωνία στον τροχό χρώματος (0 έως 360°), ο Κορεσμός και η Ελαφρότητα είναι ποσοστά. Αυτή είναι η προτιμώμενη μορφή για τη δημιουργία παραλλαγών: φωτισμός ενός κουμπιού που τοποθετείται πάνω, αποκορεσμός μιας απενεργοποιημένης κατάστασης, δημιουργία μιας συνεκτικής παλέτας μεταβάλλοντας μόνο την απόχρωση.

$primary: hsl(247, 100%, 36%);
$primary-hover: hsl(247, 100%, 46%);   /* καθαρότερο */
$primary-muted: hsl(247, 30%, 36%);    /* λιγότερο κορεσμένο */

Άλλες υπάρχουσες μορφές

Το CMYK (Κυανό, Ματζέντα, Κίτρινο, Κλειδί) χρησιμοποιείται στην εκτύπωση: περιγράφει ένα χρώμα με αφαίρεση μελανιών και δεν είναι σχετικό με την οθόνη. Το OKLCH και το LAB είναι αντιληπτικά ομοιόμορφοι χώροι που εμφανίστηκαν στο επίπεδο χρώματος CSS 4. επιτρέπουν καλύτερο έλεγχο της αισθητής φωτεινότητας. Αυτό το εργαλείο εστιάζει σε μετατροπές RGB, HEX και HSL, οι οποίες καλύπτουν τη συντριπτική πλειοψηφία των αναγκών ιστού.

Το HEX σε RGB ισοδυναμεί με ανάλυση της συμβολοσειράς σε ζεύγη χαρακτήρων και ερμηνεία κάθε ζεύγους ως ακέραιου αριθμού βάσης 16:

const hex = '#1400B6';
const r = parseInt(hex.slice(1, 3), 16); // 20
const g = parseInt(hex.slice(3, 5), 16); // 0
const b = parseInt(hex.slice(5, 7), 16); // 182

Το RGB σε HEX είναι η αντίστροφη λειτουργία: κάθε κανάλι μετατρέπεται στη βάση 16, συμπληρώνεται σε δύο χαρακτήρες και στη συνέχεια συνδέεται.

const toHex = (n) => n.toString(16).padStart(2, '0');
const hex = '#' + toHex(20) + toHex(0) + toHex(182); // '#1400b6'

Το RGB σε HSL είναι πιο αλγοριθμικό. Κανονικοποιούμε τα κανάλια μεταξύ 0 και 1, υπολογίζουμε το min και το max για να συμπεράνουμε τη φωτεινότητα, μετά τον κορεσμό και μετά την απόχρωση σύμφωνα με το κυρίαρχο κανάλι. Ο πλήρης τύπος τεκμηριώνεται στην προδιαγραφή CSS Color Module Level 3.

Το εργαλείο λειτουργεί και προς τις δύο κατευθύνσεις μεταξύ RGB, HEX και HSL. Για να πραγματοποιήσετε μια μετατροπή:

1. Επιλέξτε τη μορφή εισόδου: RGB, HEX ή HSL.
2. Εισαγάγετε την τιμή (για παράδειγμα #1400B6, rgb(20, 0, 182) ή hsl(247, 100%, 36%)).
3. Ξεκινήστε τη μετατροπή: τα ισοδύναμα στις δύο άλλες μορφές εμφανίζονται αμέσως.
4. Αντιγράψτε το επιθυμητό αποτέλεσμα χρησιμοποιώντας το ειδικό κουμπί και επικολλήστε το στο φύλλο στυλ ή στη διάταξή σας.

Ο υπολογισμός γίνεται από την πλευρά του προγράμματος περιήγησης, δεν αποστέλλονται δεδομένα σε διακομιστή.

• Σχεδίαση ιστού και CSS: ανακτήστε ένα HEX από μια μακέτα και αποκτήστε το αντίστοιχο HSL για να δημιουργήσετε μια κατάσταση αιώρησης ή ενεργή κατάσταση χωρίς απόκλιση από την απόχρωση.
• Οπτική ταυτότητα και παλέτα: απορρίψτε ένα βασικό χρώμα σε διάφορες παραλλαγές (ανοιχτό, σκούρο, σίγαση) παίζοντας στη φωτεινότητα ή τον κορεσμό HSL.
• Εικονογράφηση και γραφικά: μεταφέρετε ένα χρώμα οθόνης (RGB) σε δεκαεξαδικό κώδικα για μετάδοση στο λογισμικό ή σε έναν πελάτη.
• Προσβασιμότητα: μετατρέψτε σε μορφή RGB για να υπολογίσετε στη συνέχεια μια αναλογία αντίθεσης (το WCAG AA απαιτεί 4,5:1 για κανονικό κείμενο) με το χρώμα φόντου.
• Μεταβλητές και προεπεξεργαστές CSS: Τροφοδοτήστε διακριτικά σχεδίασης σε αρχείο SASS ή θέμα Tailwind από ένα μόνο χρώμα αναφοράς.

Μερικές πλήρεις μετατροπές για την απεικόνιση της αντιστοιχίας μεταξύ των τριών μορφών:

#1400B6 -> rgb(20, 0, 182) -> hsl(247, 100%, 36%)
#FF5733 -> rgb(255, 87, 51) -> hsl(11, 100%, 60%)
#2ECC71 -> rgb(46, 204, 113) -> hsl(145, 63%, 49%)
#F1C40F -> rgb(241, 196, 15) -> hsl(48, 89%, 50%)
#FFFFFF -> rgb(255, 255, 255) -> hsl(0, 0%, 100%)
#000000 -> rgb(0, 0, 0) -> hsl(0, 0%, 0%)

Με κανάλι άλφα:

#1400B680 -> rgba(20, 0, 182, 0,50) -> hsla(247, 100%, 36%, 0,50)
#FF5733CC -> rgba(255, 87, 51, 0,80) -> hsla(11, 100%, 60%, 0,80)

Ποια είναι η διαφορά μεταξύ HEX και HEX8;

Το κλασικό HEX κωδικοποιεί τρία κανάλια RGB πάνω από έξι χαρακτήρες (#RRGGBB). Το HEX8 προσθέτει δύο χαρακτήρες για το κανάλι άλφα (#RRGGBBAA), το οποίο βοηθά στη διαχείριση της διαφάνειας σε μία μόνο συμβολοσειρά. Τα #1400B6FF και #1400B6 δίνουν οπτικά το ίδιο χρώμα, αδιαφανές.

Θα πρέπει να προτιμήσουμε HSL ή RGB σε CSS;

Τα δύο είναι ισοδύναμα στην απόδοση. Το HSL είναι πιο εκφραστικό για τη δημιουργία μιας συνεκτικής παλέτας ή παραλλαγών κατάστασης (hover, focus), επειδή τροποποιούμε μια ενιαία αντιληπτική παράμετρο. Το RGB παραμένει πρακτικό όταν εργάζεστε με δεδομένα από καμβά ή αισθητήρα.

Γιατί το HEX μου δίνει διαφορετική απόχρωση από την αναμενόμενη;

Τρεις κοινές αιτίες: σύγχυση μεταξύ σύντομου #RGB και μεγάλου #RRGGBB (οι χαρακτήρες είναι διπλότυποι, δεν συνδέονται), σφάλμα αντιγραφής σε έναν χαρακτήρα ή εμφάνιση σε μη βαθμονομημένη οθόνη. Ελέγξτε επίσης ότι το CSS σας δεν επικαλύπτει μια γονική αδιαφάνεια που τροποποιεί την τελική απόδοση.

Σε τι χρησιμοποιείται το κανάλι άλφα των RGBA και HSLA;

Το κανάλι άλφα ελέγχει την αδιαφάνεια του χρώματος, από 0 (πλήρως διαφανές) έως 1 (πλήρως αδιαφανές). Είναι χρήσιμο για επικαλύψεις, σκιές, απενεργοποιημένες καταστάσεις ή επικαλύψεις εικόνων. Σε αντίθεση με την ιδιότητα opacity CSS, τα RGBA και HSLA επηρεάζουν μόνο το στοχευμένο χρώμα και όχι τα παιδιά του.

Μπορούμε να μετατρέψουμε ένα χρώμα χωρίς απώλεια ακρίβειας;

Μεταξύ RGB και HEX η μετατροπή είναι ακριβής, και οι δύο μορφές κωδικοποιούν τις ίδιες πληροφορίες σε 24 bit. Η μετατροπή σε HSL περιλαμβάνει στρογγυλοποίηση στην απόχρωση, τον κορεσμό και τη φωτεινότητα. ένα ταξίδι μετ' επιστροφής RGB > HSL > RGB μπορεί επομένως να επιστρέψει μια τιμή μετατοπισμένη κατά μία μονάδα σε ορισμένα κανάλια.

Γιατί να χρησιμοποιήσετε έναν διαδικτυακό μετατροπέα αντί για μια εσωτερική λειτουργία;

Για μια μεμονωμένη δοκιμή, δημιουργήστε πρωτότυπο μια παλέτα ή ελέγξτε γρήγορα το ισοδύναμο HEX ενός χρώματος HSL που εξάγεται από ένα μοντέλο, ένας διαδικτυακός μετατροπέας είναι άμεσος. Για μια επαναλαμβανόμενη ανάγκη προγραμματισμού, μια βιβλιοθήκη όπως color, chroma-js ή tinycolor2 παραμένει πιο κατάλληλη.