Μια τιμή χρώματος RGB αντιπροσωπεύει το ΚΟΚΚΙΝΟ, ΠΡΑΣΙΝΟ και ΜΠΛΕ φως πηγές.
Στο CSS, ένα χρώμα μπορεί να καθοριστεί ως τιμή RGB, χρησιμοποιώντας αυτόν τον τύπο:
rgb(κόκκινο, πράσινο, μπλε)
Κάθε παράμετρος (κόκκινο, πράσινο και μπλε) ορίζει την ένταση του χρώματος μεταξύ 0 και 255.
Για παράδειγμα, το rgb(255, 0, 0) εμφανίζεται με κόκκινο χρώμα, γιατί το κόκκινο έχει οριστεί στην υψηλότερη τιμή του (255) και τα άλλα είναι οριστεί στο 0.
Για εμφάνιση μαύρου χρώματος, ορίστε όλες τις παραμέτρους χρώματος στο 0, ως εξής: rgb(0, 0, 0).
Για να εμφανίσετε λευκό, ορίστε όλες τις παραμέτρους χρώματος σε 255, όπως αυτό: rgb(255, 255, 255).
Πειραματιστείτε αναμειγνύοντας τις παρακάτω τιμές RGB:
RED
GREEN
BLUE
Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<body>
<h1>Specify colors using RGB values</h1>
<h2 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h2>
<h2 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h2>
<h2 style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</h2>
<h2 style="background-color:rgb(238, 130, 238);">rgb(238, 130, 238)</h2>
<h2 style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</h2>
<h2 style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</h2>
</body>
</html>
Οι αποχρώσεις του γκρι συχνά ορίζονται χρησιμοποιώντας ίσες τιμές και για τις 3 πηγές φωτός:
Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<body>
<h1>Shades of gray</h1>
<p>By using equal values for red, green, and blue, you will get different shades of gray:</p>
<h2 style="background-color:rgb(60, 60, 60);">rgb(60, 60, 60)</h2>
<h2 style="background-color:rgb(90, 90, 90);">rgb(90, 90, 90)</h2>
<h2 style="background-color:rgb(120, 120, 120);">rgb(120, 120, 120)</h2>
<h2 style="background-color:rgb(180, 180, 180);">rgb(180, 180, 180)</h2>
<h2 style="background-color:rgb(210, 210, 210);">rgb(210, 210, 210)</h2>
<h2 style="background-color:rgb(240, 240, 240);">rgb(240, 240, 240)</h2>
</body>
</html>
Οι τιμές χρώματος RGBA είναι μια επέκταση των τιμών χρώματος RGB με ένα κανάλι άλφα - που καθορίζει την αδιαφάνεια για ένα χρώμα.
Μια τιμή χρώματος RGBA είναι καθορίζεται με:
rgba(κόκκινο, πράσινο, μπλε, άλφα)
Η παράμετρος άλφα είναι ένας αριθμός μεταξύ 0,0 (πλήρως διαφανές) και 1,0 (καθόλου διαφανές):
Πειραματιστείτε αναμειγνύοντας τις παρακάτω τιμές RGBA:
RED
GREEN
BLUE
ALPHA
Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<body>
<h1>Make transparent colors with RGBA</h1>
<h2 style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</h2>
<h2 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h2>
<h2 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</h2>
<h2 style="background-color:rgba(255, 99, 71, 0.6);">rgba(255, 99, 71, 0.6)</h2>
<h2 style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</h2>
<h2 style="background-color:rgba(255, 99, 71, 1);">rgba(255, 99, 71, 1)</h2>
</body>
</html>