Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Define colors using the Red-Green-Blue model (RGB) with CSS
In website design, color is crucial. It can affect the links that users click on, the way they read information, and how comfortable they are surfing your website. While incorporating color it requires practice and adding it to your website is simple when you use the CSS color and background-color property.
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 aricle we are going to learn about the RGB colors.
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 range from 0 to 255. For example, the RGB values for the colors black (0, 0, 0), white (255, 255, 255), yellow (255, 255, 0), and so on.
Syntax
Following is the syntax for RGB color format −
rgb(red, green, blue)
Example
Let's look at the following example, where we are going to use the RGB colors
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: verdana;
text-align: center;
background-color: rgb(213, 245, 227);
}
h1 {
color: rgba(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>undefined
</html>
When we run the above code, it will generate an output consisting of the text applied with CSS displayed on the webpage.
Example
Considering another scenario, where we are going to see the usage of the RGB colors.
<!DOCTYPE html>
<html>
<head>
<style>
.tp {
position: absolute;
inset: 0;
margin: auto;
width: 200px;
height: 200px;
border-radius: 10px;
transform: rotate(69deg);
}
div {
height: 250px;
margin-top: 250px;
background: rgb(249, 231, 159);
}
.tp {
background: rgb(30 132 73/0.8);
}
</style>
</head>
<body>
<div>
<div class="tp"></div>
</div>
</body>
</html>
On running the above code, the output window will pop up, displaying the div box applied with CSS on the webpage
116 Views
