Μετατροπέας χρωμάτων HEX σε RGB

Τι Είναι Ένας Χρωματικός Κώδικας HEX;

Ο κωδικός χρώματος HEX είναι μια αλφαριθμητική σειρά έξι χαρακτήρων που χρησιμοποιείται στο σχεδιασμό ιστοσελίδων και στα ψηφιακά γραφικά για να αντιπροσωπεύει ένα συγκεκριμένο χρώμα.#RRGGBB, όπου κάθε ζευγάρι δύο χαρακτήρων κωδικοποιεί την ένταση ενός από τα τρία προσθετικά πρωταρχικά χρώματα - κόκκινο (RR), πράσινο (GG) και μπλε (BB) - χρησιμοποιώντας εξάδεκατο συμβολισμό (βάση 16).00(μηδενική ένταση) έωςFF(μέγιστη ένταση, ισοδύναμη με 255 σε δεκαδική μονάδα).

Οι κωδικοί HEX προέρχονται από την ανάγκη να ορίζονται τα χρώματα σε HTML και CSS χωρίς να βασίζονται σε ονομασμένες λέξεις-κλειδιά χρώματος.rgb(), hsl(), καιoklch()Σχεδόν κάθε επιλογέας χρωμάτων σε εργαλεία όπως το Figma, το Sketch, το Adobe Photoshop και το Canva εμφανίζει μια τιμή HEX από προεπιλογή.

Ο συνολικός αριθμός των μοναδικών χρωμάτων που μπορούν να αντιπροσωπευτούν με εξαψήφιους κωδικούς HEX είναι 16.777.216 (256 x 256 x 256).

Οι κωδικοί HEX δεν είναι ευαίσθητοι σε μεγάλες και μικρές λέξεις, έτσι#ff8000και#FF8000Μερικοί οδηγοί στυλ προτιμούν τα μεγάλα γράμματα για ευκολία ανάγνωσης, ενώ οι minifiers CSS συχνά εκπέμπουν τα μικρά γράμματα για να αποθηκεύσουν bytes - αν και στην πράξη η διαφορά είναι αμελητέα.

Πώς να μετατρέψετε HEX σε RGB βήμα προς βήμα

Η μετατροπή ενός κωδικού χρώματος HEX στο ισοδύναμό του RGB είναι απλή. Η διαδικασία περιλαμβάνει τη διαίρεση της αλυσίδας των έξι χαρακτήρων σε τρία ζευγάρια και τη μετατροπή κάθε ζευγαριού από εξαδεκαδικό (βάση 16) σε δεκαδικό (βάση 10).

1. Αφαιρέστε το σύμβολο.Εάν ο κωδικός HEX αρχίζει με#Για παράδειγμα,#1A2B3Cγίνεται1A2B3C.
2. Χωριστείτε σε τρία ζευγάρια.Χωρίστε την εναπομείνασα συμβολοσειρά σε τρεις ομάδες δύο χαρακτήρων:1A, 2B, 3C.
3. Μετατρέψτε κάθε ζευγάρι σε δεκαδικό.Χρησιμοποιείται το εξαδέκατο σύστημα τιμών θέσης, όπου το πρώτο ψηφίο πολλαπλασιάζεται με το 16 και προστίθεται το δεύτερο ψηφίο:
   • Κόκκινο:1A-> (1 x 16) + 10 =26
   • Πράσινο:2B-> (2 x 16) + 11 =43
   • Μπλε:3C-> (3 x 16) + 12 =60
4. Γράψε την τιμή RGB.Συνδυάστε τις τρεις δεκαδικές τιμές:rgb(26, 43, 60).

Τα δεκαδεκαδικά ψηφία και τα δεκαδικά τους ισοδύναμα είναι: 0=0, 1=1, 2=2, 3=3, 4=4, 5=5, 6=6, 7=7, 8=8, 9=9, A=10, B=11, C=12, D=13, E=14, F=15.

Για προγραμματική μετατροπή, οι περισσότερες γλώσσες προσφέρουν ενσωματωμένες λειτουργίες.parseInt("1A", 16)επιστροφές26Στην Πύθωνα,int("1A", 16)Το ίδιο το CSS χειρίζεται και τις δύο μορφές εγγενώς, έτσι η μετατροπή είναι πρωτίστως χρήσιμη όταν πρέπει να χειριστείτε μεμονωμένα κανάλια χρώματος στον κώδικα -- για παράδειγμα, προσαρμόζοντας τη φωτεινότητα, δημιουργώντας κλίμακες προγραμματισμένα, ή συνδυάζοντας δύο χρώματα.

3-ψήφιοι ή 6-ψήφιοι κωδικοί HEX

Το CSS υποστηρίζει συντομεύσεις τριών ψηφίων σε μορφή HEX (#RGB) για διευκόλυνση όταν κάθε ένα από τα τρία ζεύγη αποτελείται από πανομοιότυπα ψηφία.

• #F80επεκτείνεται σε#FF8800-> rgb ((255, 136, 0)
• #FFFεπεκτείνεται σε#FFFFFF-> rgb ((255, 255, 255)
• #000επεκτείνεται σε#000000-> rgb ((0, 0, 0)
• #09Cεπεκτείνεται σε#0099CC-> rgb ((0, 153, 204)
• #A3Fεπεκτείνεται σε#AA33FF-> rgb{170, 51, 255)

Ο τριψήφιος συμβολισμός μειώνει τον αριθμό των διαθέσιμων χρωμάτων από 16,7 εκατομμύρια σε μόλις 4.096 (16 x 16 x 16), οπότε δεν μπορεί να αντιπροσωπεύει κάθε χρώμα.

Το CSS υποστηρίζει επίσης 4 ψηφία (#RGBA) και οκταψήφια (#RRGGBBAA) Κώδικες HEX που περιλαμβάνουν ένα κανάλι αλφα (διαφάνεια).FFείναι πλήρως αδιαφανής και00είναι πλήρως διαφανής.#FF880080αντιπροσωπεύει το χρώμαrgb(255, 136, 0)Ο μετατροπέας μας επικεντρώνεται στις τυπικές τριών και έξι ψηφιακές μορφές· αν εισάγετε έναν κωδικό με ένα κανάλι άλφα, θα επεξεργαστεί μόνο το τμήμα RGB.

Πίνακας αναφοράς HEX προς RGB

Παρακάτω είναι ένας πίνακας αναφοράς των κοινών χρωμάτων HEX και των ισοδύναμων RGB. Αυτός ο πίνακας καλύπτει τα πιο συχνά χρησιμοποιούμενα χρώματα στο σχεδιασμό ιστοσελίδων, τα χρώματα που ονομάζονται CSS και τις επιλογές παλέτας δημοφιλών εμπορικών σημάτων.

Το CSS ορίζει συνολικά 147 ονομασμένα χρώματα, το καθένα με αντίστοιχη τιμή HEX. Ενώ τα ονομασμένα χρώματα είναι βολικά για πρωτότυπο, τα επαγγελματικά έργα βασίζονται συνήθως σε τιμές HEX ή RGB για ακρίβεια και συνέπεια σε περιηγητές και εργαλεία σχεδιασμού.

Χρώματα δημοφιλών εμπορικών σημάτων - τιμές HEX και RGB

Οι προγραμματιστές και οι σχεδιαστές συχνά χρειάζονται τις ακριβείς τιμές HEX και RGB των δημοφιλών χρωμάτων μάρκας για mockups, ενσωματώσεις και οδηγούς στυλ.

Οι οδηγίες μάρκας συχνά καθορίζουν χρώματα σε πολλαπλές μορφές (HEX, RGB, CMYK, Pantone).

Σύγκριση μοντέλων χρωμάτων: HEX, RGB, HSL και CMYK

Η κατανόηση του πότε να χρησιμοποιήσετε κάθε χρωματικό μοντέλο σας βοηθά να εργαστείτε πιο αποτελεσματικά σε διαφορετικά εργαλεία και μέσα:

HEX και RGB είναι μαθηματικά πανομοιότυπα-- αντιπροσωπεύουν τον ίδιο χρωματικό χώρο χρησιμοποιώντας διαφορετική σημειογραφία. Η μετατροπή μεταξύ τους είναι μια απλή μετάφραση βάσης-16 σε βάση-10 χωρίς απώλεια ακρίβειας ή διαφορές γκάμας. Η HSL, από την άλλη πλευρά, είναι ένας μετασχηματισμός του RGB σε ένα κυλινδρικό σύστημα συντεταγμένων που καθιστά ευκολότερο να συλλογιστούμε για την απόχρωση, τον κορεσμό και την ελαφρότητα ανεξάρτητα. Το CMYK είναι ένα υποκείμενο χρωματικό μοντέλο που χρησιμοποιείται στην εκτύπωση και δεν μπορεί να αντιπροσωπεύσει όλα τα χρώματα RGB (και το αντίστροφο), έτσι οι μετατροπές μεταξύ RGB και CMYK είναι κατά προσέγγιση.

Στην σύγχρονη CSS (Επίπεδο 4), ηcolor()λειτουργία και νέους χρωματικούς χώρους όπωςoklch()καιdisplay-p3Ωστόσο, τα HEX και RGB παραμένουν η βασική γραμμή για τη συμβατότητα του διαδικτύου και υποστηρίζονται από κάθε πρόγραμμα περιήγησης που χρησιμοποιείται σήμερα.

Χρησιμοποιώντας HEX και RGB σε CSS και JavaScript

Τόσο οι τιμές HEX όσο και οι τιμές RGB είναι έγκυρες στο CSS και παράγουν πανομοιότυπα αποτελέσματα.

CSS δηλώσεις:

/* HEX notation */
body { background-color: #1A2B3C; }

/* RGB notation */
body { background-color: rgb(26, 43, 60); }

/* RGB with alpha (transparency) */
.overlay { background-color: rgba(26, 43, 60, 0.5); }

/* Modern CSS — space-separated syntax */
.card { color: rgb(26 43 60 / 80%); }

Λειτουργίες μετατροπής JavaScript:

// HEX to RGB
function hexToRgb(hex) {
  const h = hex.replace('#', '');
  return {
    r: parseInt(h.substring(0, 2), 16),
    g: parseInt(h.substring(2, 4), 16),
    b: parseInt(h.substring(4, 6), 16)
  };
}

// RGB to HEX
function rgbToHex(r, g, b) {
  return '#' + [r, g, b]
    .map(v => v.toString(16).padStart(2, '0'))
    .join('').toUpperCase();
}

Όταν εργάζεστε με το HTML Canvas API, τα χρώματα πρέπει συχνά να ορίζονται ως συμβολοσειρές."#FF8000"και"rgb(255, 128, 0)"Δουλειά γιαfillStyleκαιstrokeStyleΕντούτοις,getImageData()η μέθοδος επιστρέφει δεδομένα εικονοστοιχείων ως μια σειρά από 0 - 255 ακέραιους αριθμούς (RGBA), καθιστώντας το RGB τη φυσική μορφή για χειρισμό σε επίπεδο εικονοστοιχείων.

Στις προσαρμοσμένες ιδιότητες CSS (μεταβλητές), οι τιμές HEX συνήθως αποθηκεύονται για απλότητα:

:root {
  --primary: #4A90E2;
  --primary-rgb: 74, 144, 226; /* for use with rgba() */
}
.element {
  background: rgba(var(--primary-rgb), 0.3);
}

Αυτό το πρότυπο αποθήκευσης ακατέργαστων τιμών καναλιού RGB ως μεταβλητή CSS είναι μια δημοφιλής τεχνική που σας επιτρέπει να εφαρμόσετε την αδιαφάνεια δυναμικά χωρίς να μετατρέπετε μεταξύ μορφών κατά τη διάρκεια λειτουργίας.

Προσβασιμότητα και Αντίθεση Χρωμάτων

Η μετατροπή HEX σε RGB είναι συχνά το πρώτο βήμα για τον υπολογισμό αναλογιών αντίθεσης χρωμάτων για τη συμμόρφωση με την προσβασιμότητα.4.5:1για κανονικό κείμενο και3: 1για μεγάλο κείμενο (18px+ έντονο ή 24px+ κανονικό).

Ο τύπος της αναλογίας αντίθεσης απαιτεί τηνσχετική φωτεινότητακάθε χρώματος, η οποία υπολογίζεται από γραμμικές τιμές RGB.

1. Μετατροπή HEX σε RGB (0 - 255 ανά κανάλι).
2. Κανονικοποιήστε κάθε κανάλι σε 0 - 1 διαιρώντας το με 255.
3. Εφαρμόστε τον τύπο γραμμικοποίησης sRGB: εάν η τιμή είναι <= 0,04045, διαιρέστε με 12,92; διαφορετικά υπολογίστε ((αξία + 0,055) / 1,055) ^ 2.4.
4. Υπολογίζεται η φωτεινότητα: L = 0,2126 x R + 0,7152 x G + 0,0722 x B.
5. Υπολογίστε την αναλογία αντίθεσης μεταξύ δύο χρωμάτων: (L1 + 0,05) / (L2 + 0,05) όπου L1 είναι το ελαφρύτερο χρώμα.

Όπως μπορείτε να δείτε, οι τιμές RGB είναι η απαραίτητη είσοδος σε κάθε υπολογισμό αντίθεσης προσβασιμότητας.

Για τους σχεδιαστές, ένας γρήγορος κανόνας: το σκούρο κείμενο σε ανοιχτό φόντο (ή το αντίστροφο) με διαφορά φωτεινότητας τουλάχιστον 125 και διαφορά χρώματος τουλάχιστον 500 (χρησιμοποιώντας το άθροισμα των απόλυτων διαφορών στα κανάλια R, G, B) θα περάσει γενικά τα πρότυπα WCAG AA.