Hướng Dẫn Chỉ Định Màu Trong CSS

Question

Vũ Tiến Dũng · Accepted Answer

Trong CSS, việc chỉ định màu sắc là một phần quan trọng để tạo ra giao diện hấp dẫn và dễ đọc. Có nhiều cách để chỉ định màu trong CSS, mỗi cách có ưu điểm và nhược điểm riêng. Dưới đây là hướng dẫn chi tiết từ cơ bản đến nâng cao về các phương pháp chỉ định màu sắc trong CSS.
1. Sử Dụng Tên Màu (Color Names)
CSS hỗ trợ một số tên màu chuẩn. Đây là cách đơn giản nhất để chỉ định màu, nhưng số lượng màu có giới hạn.
Ví dụ:
body {
    background-color: blue; /* Màu xanh dương */
    color: white;           /* Màu trắng cho chữ */
}
Danh sách một số tên màu phổ biến:
red
green
blue
black
white
yellow
gray
2. Sử Dụng Mã Hexadecimal (Hex Color Codes)
Mã màu hex là một chuỗi ký tự bắt đầu bằng dấu # theo sau là 6 ký tự (hoặc 3 ký tự) thể hiện màu sắc trong hệ màu RGB.
Mã 6 ký tự: #RRGGBB, trong đó RR, GG, và BB là giá trị từ 00 đến FF (0-255 trong hệ thập phân).
Ví dụ:
body {
    background-color: #ff5733; /* Màu cam */
    color: #ffffff;            /* Màu trắng */
}
Mã 3 ký tự: #RGB, mỗi ký tự được nhân đôi (ví dụ: #f00 sẽ thành #ff0000).
3. Sử Dụng Giá Trị RGB
Giá trị RGB cho phép bạn chỉ định màu bằng cách sử dụng ba thành phần: Đỏ, Xanh lá, và Xanh dương, với giá trị từ 0 đến 255.
Ví dụ:
body {
    background-color: rgb(255, 87, 51); /* Màu cam */
    color: rgb(255, 255, 255);          /* Màu trắng */
}
4. Sử Dụng Giá Trị RGBA
Giá trị RGBA tương tự như RGB nhưng thêm một thành phần alpha, cho phép bạn chỉ định độ trong suốt của màu (từ 0.0 đến 1.0).
Ví dụ:
body {
    background-color: rgba(255, 87, 51, 0.5); /* Màu cam với độ trong suốt 50% */
    color: rgba(255, 255, 255, 1);           /* Màu trắng hoàn toàn không trong suốt */
}
5. Sử Dụng Giá Trị HSL
Giá trị HSL (Hue, Saturation, Lightness) là một phương pháp khác để chỉ định màu.
Hue là góc trên vòng tròn màu (từ 0 đến 360 độ).
Saturation là độ bão hòa (0% &#8211; không bão hòa, 100% &#8211; bão hòa hoàn toàn).
Lightness là độ sáng (0% &#8211; đen, 100% &#8211; trắng).
Ví dụ:
body {
    background-color: hsl(12, 100%, 60%); /* Màu cam */
    color: hsl(0, 0%, 100%);              /* Màu trắng */
}
6. Sử Dụng Giá Trị HSLA
Giá trị HSLA tương tự như HSL nhưng cũng bao gồm thành phần alpha cho độ trong suốt.
Ví dụ:
body {
    background-color: hsla(12, 100%, 60%, 0.5); /* Màu cam với độ trong suốt 50% */
    color: hsla(0, 0%, 100%, 1);                /* Màu trắng hoàn toàn không trong suốt */
}
7. Sử Dụng Màu Gradient
Gradient cho phép bạn tạo màu chuyển tiếp từ một màu này sang một màu khác, rất hữu ích trong thiết kế hiện đại.
Ví dụ:
body {
    background: linear-gradient(to right, #ff5733, #ffc300); /* Gradient từ cam sang vàng */
}