Hàm rgb() trong CSS - Thiết lập màu RGB

Hàm rgb() được dùng để thiết lập giá trị màu RGB. Tham số của hàm thiết lập cường độ màu theo phần trăm hoặc giá trị từ 0 đến 255.

Ví dụ 1: Màu chữ và nền

<!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>Tiêu đề Demo</h2>
<div>Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo.</div>
</body>
</html>

Kết quả

Ví dụ 2: Sử dụng trong Grid Layout

<!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>Tiêu đề Một</h1>
<p>Đặt một số số ngẫu nhiên</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>

Kết quả

Cú pháp:

rgb(red, green, blue)
rgb(red%, green%, blue%)

Mỗi giá trị từ 0-255 hoặc 0%-100%. Cũng có rgba() với tham số alpha thứ 4 cho độ trong suốt.