HTML Color Codes

Επιλογέας Χρωμάτων HTML για μορφές RGB HEX HSL

Αποκτήστε εύκολα κωδικούς χρωμάτων HTML CSS για την ιστοσελίδα σας χρησιμοποιώντας τον επιλογέα χρωμάτων, μετατρέψτε μορφές χρωμάτων μεταξύ HEX, RGB, HSL, HSV.

Επιλέξτε Χρώμα

Εισάγετε τιμή χρώματος

Ή χρησιμοποιήστε το HTML5 επιλογέα

Επιλεγμένο Χρώμα

Κόκκινο: 0
Πράσινο: 255
Μπλε: 255
HUE (Μοίρες): 180
Φωτεινότητα: 0.7
Alpha: 1
Hex: #00ffff
RGB: rgb(0, 255, 255)
HSL: hsl(180, 100%, 50%)
Ομάδα χρώματος: Cyan
Κοινοποίηση:
Παράδειγμα χρώματος CSS3

<style>
  div {
    color: #00ffff;
    color: rgb(0, 255, 255);
    color: hsl(180, 100%, 50%);
  }
</style>
Στυλ Σκοτεινότερο και Ελαφρύτερο

<style>
  .darken {
    color: rgb(0, 230, 230);
  }
  .lighten {
    color: rgb(25, 255, 255);
  }
</style>

Αποκτήστε Χρώματα από μια Εικόνα

get pixel color from pic

Επιλέξτε Χρώμα και Δημιουργήστε Παλέτα

select color and create palette

Τι είναι ο Κωδικός Χρώματος HTML;

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

Για παράδειγμα, το κόκκινο χρώμα μπορεί να προσδιοριστεί χρησιμοποιώντας τις ακόλουθες μορφές:

Τύποι Κωδικών Χρώματος HTML


Δεκαεξαδικοί Κωδικοί Χρωμάτων:
  • Ο πιο κοινός τρόπος για να προσδιορίσετε χρώματα σε HTML και CSS είναι χρησιμοποιώντας δεκαεξαδικούς (hex) κωδικούς χρωμάτων. Ένας hex κωδικός χρώματος είναι ένας εξαψήφιος συνδυασμός αριθμών και γραμμάτων που ορίζεται από το μείγμα του κόκκινου, του πράσινου και του μπλε (RGB) συστατικών.
  • Μορφή: #RRGGBB
  • Παράδειγμα: #FF5733 αντιπροσωπεύει μια απόχρωση πορτοκαλί.
  • Κάθε ζεύγος ψηφίων αντιστοιχεί στην ένταση του κόκκινου, του πράσινου και του μπλε, αντίστοιχα, σε μια κλίμακα από 00 (καμία ένταση) έως FF (πλήρης ένταση).
Κωδικοί Χρωμάτων RGB:
  • Οι κωδικοί χρωμάτων RGB ορίζουν τα χρώματα με βάση τα συστατικά τους κόκκινο, πράσινο και μπλε.
  • Μορφή: rgb(red, green, blue)
  • Παράδειγμα: rgb(255, 87, 51) είναι το ισοδύναμο RGB του #FF5733.
  • Κάθε συστατικό (κόκκινο, πράσινο και μπλε) ορίζεται ως ένας αριθμός μεταξύ 0 και 255
Κωδικοί Χρωμάτων RGBA:
  • Παρόμοιο με το RGB, αλλά περιλαμβάνει ένα συστατικό alpha για την αδιαφάνεια.
  • Μορφή: rgba(red, green, blue, alpha)
  • Παράδειγμα: rgba(255, 87, 51, 0.5) ορίζει το ίδιο χρώμα με 50% αδιαφάνεια.
Κωδικοί Χρωμάτων HSL:
  • Το HSL σημαίνει Απόχρωση (Hue), Κορεσμός (Saturation) και Φωτεινότητα (Lightness).
  • Μορφή: hsl(hue, saturation%, lightness%)
  • Παράδειγμα: hsl(9, 100%, 60%) είναι ένας άλλος τρόπος να αντιπροσωπεύσετε το χρώμα #FF5733
  • Η απόχρωση είναι ένας βαθμός στον χρωματικό κύκλο (από 0 έως 360), ο κορεσμός είναι ένα ποσοστό (0% είναι γκρίζο, 100% είναι πλήρες χρώμα), και η φωτεινότητα είναι επίσης ένα ποσοστό (0% είναι μαύρο, 100% είναι λευκό).
Κωδικοί Χρωμάτων HSLA:
  • Παρόμοιο με το HSL, αλλά περιλαμβάνει ένα συστατικό alpha για την αδιαφάνεια.
  • Μορφή: hsla(hue, saturation%, lightness%, alpha)
  • Παράδειγμα: hsla(9, 100%, 60%, 0.5) ορίζει το ίδιο χρώμα με 50% αδιαφάνεια.
Χρήση Κωδικών Χρώματος HTML:

Οι κωδικοί χρωμάτων HTML μπορούν να χρησιμοποιηθούν σε διάφορες ιδιότητες CSS για να μορφοποιήσουν τα στοιχεία της ιστοσελίδας. Για παράδειγμα:

<style>
    .text-color {
        color: #FF5733;
    }
    .background-color {
        background-color: rgb(255, 87, 51);
    }
    .border-color {
        border: 2px solid hsl(9, 100%, 60%);
    }
</style>
<p class="text-color">This text is orange.</p>
<div class="background-color">This background is orange.</div>
<div class="border-color">This border is orange.</div>

Σε αυτό το παράδειγμα, το κείμενο, το φόντο και το περίγραμμα μορφοποιούνται χρησιμοποιώντας διαφορετικούς τύπους κωδικών χρώματος HTML, όλοι αντιπροσωπεύοντας την ίδια απόχρωση πορτοκαλί.

Οι κωδικοί χρωμάτων HTML είναι ένα θεμελιώδες στοιχείο του σχεδιασμού ιστοσελίδων, επιτρέποντας στους προγραμματιστές να ορίζουν και να χειρίζονται χρώματα με ακρίβεια. Κατανοώντας τους κωδικούς χρωμάτων hex, RGB, RGBA, HSL και HSLA, μπορείτε να δημιουργήσετε οπτικά συνεκτικές και ελκυστικές ιστοσελίδες που βελτιώνουν την εμπειρία του χρήστη.