CSS rgb() Function

CSS Web Development Front End Technology

The rgb() function is used to set RGB color value. The parameter for the function sets the intensity of the color in percentage or value from 0 to 255.

Example

Let us first see an example to implement rgb() in CSS −

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
div {
   text-align: justify;
   text-justify: inter-word;
   color: rgb(213,33,33);
   background-color: rgb(211,211,211);
   font-size: 1.1em;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<div>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. </div>
</body>
</html>

Output

Example

Let us now see another example −

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
   grid-area: newArea;
   font-size: xx-large;
}
.item3 {
   font-size: small;
}
.item4 {
   font-size: medium;
}
.item5 {
   font-size: x-large;
}
.grid-container {
   display: grid;
   grid-template-areas:
   'newArea newArea . . .'
   'newArea newArea . . .';
   grid-gap: 5px;
   background-color: rgb(0,255,255);
   padding: 5px;
}
.grid-container > div {
   background-color: rgb(255, 50, 80);
   text-align: center;
   padding: 5px 0;
}
</style>
</head>
<body>
<h1>Heading One</h1>
<p>Set some random numbers</p>
<div class="grid-container">
<div class="demo">250</div>
<div class="item2">120</div>
<div class="item3">333</div>
<div class="item4">298</div>
<div class="item5">645</div>
<div class="item6">543</div>
<div class="item7">555</div>
</div>
</body>
</html>

Output

AmitDiwan

Published on 26-Dec-2019 12:02:36

Previous Page Print Page