Ορισμός χρώματος μέσω rgb στο CSS

Στην αρχή του βιβλίου, όταν μελετούσαμε τα χρώματα, σας είπα ότι το χρώμα μπορεί να οριστεί είτε με αγγλική λέξη, είτε μέσω rgb, είτε μέσω #. Οι δύο τελευταίες μορφές επιτρέπουν την απόκτηση χρώματος οποιασδήποτε απόχρωσης. Ας δούμε πώς ακριβώς λειτουργούν αυτές οι μορφές.

Για να κατανοήσουμε αυτούς τους τρόπους, πρώτα πρέπει να καταλάβουμε πώς προκύπτει το επιθυμητό χρώμα στην οθόνη του υπολογιστή.

Στην πραγματικότητα, ένα μεμονωμένο σημείο της οθόνης (pixel) δεν μπορεί να λάμψει με όλα τα χρώματα που χρειάζονται, καθώς αυτό τεχνικά θα ήταν πολύ δύσκολο. Κάθε σημείο της οθόνης μπορεί να λάμψει μόνο με τρία χρώματα: κόκκινο, πράσινο και κυανό. Αλλά ταυτόχρονα και σε διαφορετικές αναλογίες.

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

Για την ανάμειξη χρωμάτων στο CSS, πρέπει ως τιμή της ιδιότητας να ορίσετε τη λέξη-κλειδί rgb, μετά από την οποία να αναφέρετε διαχωρισμένα με κόμμα τις τιμές που καθορίζουν σε ποιες αναλογίες πρέπει να ληφθούν αυτά τα τρία βασικά χρώματα. Τα ίδια τα χρώματα μπορούν να ποικίλλουν από 0 έως 255. Επιπλέον, το μηδέν - σημαίνει απουσία χρώματος, ενώ το 255 είναι το καθαρό χρώμα (για παράδειγμα, καθαρό κόκκινο).

Οι ίδιοι οι χαρακτήρες rgb αποκωδικοποιούνται ως red, green, blue.

Ας δούμε παραδείγματα.

Παράδειγμα

Ας αναμείξουμε καθαρό κόκκινο και καθαρό κυανό χρώμα. Για να το κάνουμε αυτό, βάζουμε την πρώτη τιμή σε 255, τη δεύτερη σε 0, και την τρίτη - σε 255. Θα πάρουμε μωβ χρώμα:

<p>
	κείμενο
</p>

p {
	color: rgb(255, 0, 255);
}

Παράδειγμα

Ας ορίσουμε τώρα την πρώτη τιμή σε 255, και όλες τις υπόλοιπες - σε μηδέν. Ως αποτέλεσμα θα πάρουμε καθαρό κόκκινο χρώμα:

<p>
	κείμενο
</p>

p {
	color: rgb(255, 0, 0);
}

Παράδειγμα

Έτσι θα πάρουμε καθαρό πράσινο χρώμα:

<p>
	κείμενο
</p>

p {
	color: rgb(0, 255, 0);
}

Παράδειγμα

Και αν για το πράσινο βάλουμε όχι 255, αλλά 100, θα προκύψει μερικώς πράσινο:

<p>
	κείμενο
</p>

p {
	color: rgb(0, 100, 0);
}

Παράδειγμα

Ας αναμείξουμε και τα τρία χρώματα σε αυθαίρετες αναλογίες. Δείτε τι προέκυψε:

<p>
	κείμενο
</p>

p {
	color: rgb(200, 100, 125);
}

Παράδειγμα

Αν βάλουμε όλες τις τιμές σε 255, θα προκύψει καθαρό λευκό χρώμα:

p {
	color: rgb(255, 255, 255);
}

Παράδειγμα

Αν βάλουμε όλες τις τιμές σε 0, τότε θα προκύψει καθαρό μαύρο χρώμα:

p {
	color: rgb(0, 0, 0);
}

Πρακτικές Ασκήσεις

Ορίζοντας χρώμα μέσω rgb κάντε όλες τις παραγράφους κόκκινες.

Ορίζοντας χρώμα μέσω rgb κάντε όλους τους h2 πράσινους.

Ορίζοντας χρώμα μέσω rgb κάντε όλα τα h3 κυανά.

Αναμείξτε καθαρό κόκκινο και καθαρό πράσινο. Ποιο χρώμα προκύπτει;