Mã màu Hex 3 chữ số là cách viết ngắn gọn của mã màu Hex 6 chữ số. Định dạng 3 chữ số là dạng nén. Mỗi chữ số đại diện cho một cặp giá trị giống nhau trong định dạng 6 chữ số.
Điều này cho phép định nghĩa màu đơn giản và ngắn gọn hơn. Nó vẫn giữ hiệu ứng hình ảnh tương tự như định dạng dài hơn. Định dạng 3 chữ số thường được dùng khi các thành phần red, green và blue bằng nhau theo cặp.
How It Works
Mã hex 3 chữ số được viết là #RGB, trong đó:
- R là viết tắt của Red,
- G là viết tắt của Green,
- B là viết tắt của Blue.
Mỗi ký tự trong mã hex 3 chữ số được nhân đôi để tạo ra mã hex 6 chữ số tương đương:
#RGB becomes #RRGGBB
For example:
- #123 expands to #112233.
- #abc expands to #aabbcc.
Syntax:
color: #RGB;
Example 1: Using a 3-Digit Hex Color in CSS
Trong ví dụ này, chúng ta áp dụng mã màu hex 3 chữ số cho một phần tử text.
html<!DOCTYPE html>
<html>
<head>
<title>CSS 3 Digit Hex Color</title>
<style>
body {
background-color: #666600;
}
h1 {
color: green;
}
article {
background-color: #FFF;
border: 5px solid green;
margin: 15px;
text-align: center;
}
</style>
</head>
<body>
<article>
<h1>GeeksforGeeks</h1>
</article>
</body>
</html>
Output:
Example 2: Applying 3-Digit Hex Color to Background
Trong ví dụ này, ta sử dụng mã màu hex 3 chữ số để đặt màu nền cho phần tử div.
html<!DOCTYPE html>
<html>
<head>
<title>CSS 3 Digit Hex Color</title>
<style>
body {
background-image: url(
'https://media.geeksforgeeks.org/wp-content/uploads/
20190806202057/Screenshot-from-2019-08-02-10-51-372.png');
background-attachment: fixed;
background-size: cover;
}
h2 {
color: green;
}
article {
background-color: #FFF;
border: 2px solid green;
background-position: center center;
text-align: center;
}
</style>
</head>
<body>
<article>
<h2>GeeksforGeeks</h2>
</article>
</body>
</html>
Output:
