Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Define colors using the Red-Green-Blue model (RGB) with CSS
In website design, color is crucial. It affects the links that users click on, the way they read information, and how comfortable they are surfing your website. While incorporating color requires practice, adding it to your website is simple when you use the CSS color and background-color properties.
These properties can be defined in a number of ways. A web page's text or background color can be altered using HTML color names, hex color codes, RGB color codes, or HSL color values. In this article we are going to learn about the RGB colors.
Syntax
selector {
color: rgb(red, green, blue);
background-color: rgb(red, green, blue);
}
RGB (Red-Green-Blue)
An HTML element's color can be defined using the RGB (Red, Green, Blue) format by defining the R, G, and B values that range from 0 to 255. For example, the RGB values for black are (0, 0, 0), white (255, 255, 255), yellow (255, 255, 0), and so on.
| Color | RGB Values | Description |
|---|---|---|
| Black | rgb(0, 0, 0) | No color intensity |
| White | rgb(255, 255, 255) | Maximum color intensity |
| Red | rgb(255, 0, 0) | Maximum red, no green/blue |
| Green | rgb(0, 255, 0) | Maximum green, no red/blue |
| Blue | rgb(0, 0, 255) | Maximum blue, no red/green |
Example 1: Basic RGB Colors
Let's look at the following example, where we are going to use RGB colors for text and background −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: verdana;
text-align: center;
background-color: rgb(213, 245, 227);
}
h1 {
color: rgb(142, 68, 173);
}
p {
color: rgb(222, 49, 99);
}
</style>
</head>
<body>
<h1>TUTORIALSPOINT</h1>
<p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p>
</body>
</html>
A webpage with a light green background displays the purple heading "TUTORIALSPOINT" and red paragraph text below it.
Example 2: RGB with Transparency
RGB also supports alpha transparency using the rgba() format. The alpha value ranges from 0 (transparent) to 1 (opaque) −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
height: 200px;
background: rgb(249, 231, 159);
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.overlay {
width: 150px;
height: 150px;
background: rgba(30, 132, 73, 0.8);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<div class="overlay">Semi-transparent</div>
</div>
</body>
</html>
A yellow background with a semi-transparent green rounded square overlaid in the center, containing white text "Semi-transparent".
Conclusion
RGB colors provide precise control over color values using red, green, and blue components. Use rgb() for solid colors and rgba() when transparency is needed.
255 Views
