Học CSS3 – Định dạng màu sắc

CSS3 hỗ trợ nhận diện color bằng tên màu, mã hexadecimal và mã RGB.

Trong bài này chúng ta sẽ tìm hiểu một số định dạng mã màu thường sử dụng như RGBA colors, HSL colors, HSLA colors, Name colors và đặc biệt hơn là tìm hiểu thuộc tính opacity.

Các thuộc tính và mã màu đều được hỗ trợ ở hầu hết các trình duyệt hiện đại hiện nay.

1. RGBA Colors

RGBA color là một phần mở rộng của RGB color với thành phần bổ sung là chỉ số opacity. Cú pháp của loại màu này là rgba(reg, green, blue, alpha) trong đó alpha có giá trị từ [0->1], giá trị càng gần về 0 thì màu sắc càng mờ và giá trị 1 là màu đậm nhất.

Bài viết này được đăng tại [kiso.vn]

Ví dụ: Màu đỏ có độ alpha tăng dần

rgba(255, 0, 0, 0.1);

rgba(255, 0, 0, 0.2);

rgba(255, 0, 0, 0.3);

rgba(255, 0, 0, 0.4);

rgba(255, 0, 0, 0.5);

rgba(255, 0, 0, 0.6);

rgba(255, 0, 0, 0.7);

rgba(255, 0, 0, 0.8);

rgba(255, 0, 0, 0.9);

rgba(255, 0, 0, 1.0);

#red{
    background-color: rgba(255,0,0,1);
}
#green{
    background-color: rgba(0,255,0,1);
}
#blue{
    background-color: rgba(0,0,255,1);
}
#gray{
    background-color: rgba(192,192,192,1);
}
#yellow{
    background-color: rgba(255,255,0,1);
}

2. HSL Colors

HSL là chữ viết tắt của Hue, Saturation và Lightness, ký hiệu của nó là hsl(hue, saturation, lightness).

Trong đó:

• Hue có giá trị từ 0 tới 360, giá trị 0 hoặc 360 là màu đỏ
• Saturation có giá trị phần trăm (%) và cao nhất là 100% (full)
• Lightness cũng có giá trị phần trăm, 0% là màu đen và 100% là màu trắng.

Ví dụ: Mã màu đỏ giảm dần,

hsl(0, 100%, 10%);

hsl(0, 100%, 20%);

hsl(0, 100%, 30%);

hsl(0, 100%, 40%);

hsl(0, 100%, 50%);

hsl(0, 100%, 60%);

hsl(0, 100%, 70%);

hsl(0, 100%, 80%);

hsl(0, 100%, 90%);

hsl(0, 100%, 100%);

#green {background-color:hsl(120,100%,50%);}
#light-green {background-color:hsl(120,100%,75%);}
#dark-green {background-color:hsl(120,100%,25%);}
#pastel-green {background-color:hsl(120,60%,70%);}
#violet {background-color:hsl(290,100%,50%);}
#pastel-violet {background-color:hsl(290,60%,70%);}

3. HSLA Colors

HSLA Color là một phần mở rộng của HSL color với thành phần bổ sung là giá trị của alpha (opacity color).

Cú pháp của loại màu này là hsla(hue, saturation, lightness, alpha). Trong đó:

• Hue có giá trị từ 0 tới 360, giá trị 0 hoặc 360 là màu đỏ
• Saturation có giá trị phần trăm (%) và cao nhất là 100% (full)
• Lightness cũng có giá trị phần trăm, 0% là màu đen và 100% là màu trắng.
• Alpha alpha có giá trị từ [0->1], giá trị càng gần về 0 thì màu sắc càng mờ và giá trị 1 là màu đậm nhất.

Ví dụ:

hsla(0, 100%, 10%, 0.3);

hsla(0, 100%, 20%, 0.3);

hsla(0, 100%, 30%, 0.3);

hsla(0, 100%, 40%, 0.3);

hsla(0, 100%, 50%, 0.3);

hsla(0, 100%, 60%, 0.3);

hsla(0, 100%, 70%, 0.3);

hsla(0, 100%, 80%, 0.3);

hsla(0, 100%, 90%, 0.3);

hsla(0, 100%, 100%, 0.3);

#green {background-color:hsla(120,100%,50%,0.3);}
#light-green {background-color:hsla(120,100%,75%,0.3);}
#dark-green {background-color:hsla(120,100%,25%,0.3);}
#pastel-green {background-color:hsla(120,60%,70%,0.3);}
#violet {background-color:hsla(290,100%,50%,0.3);}
#pastel-violet {background-color:hsla(290,60%,70%,0.3);}

4. Opacity

Một câu hỏi được đặt ra là trường hợp ta sử dụng mã màu dạng HSL thì làm thế nào để bổ sung giá trị của alpha? Câu trả lời là bạn sẽ sử dụng thuộc tính opacity để làm việc này.

Tuy nhiên nó sẽ có nhược điểm là text cũng sẽ bị mờ theo, vì vậy nếu trường hợp background của bạn có trong suốt thì nên dùng mã HSLA.

Ví dụ:

hsl(0, 100%, 10%); opacity:0.3;

hsl(0, 100%, 20%); opacity:0.3;

hsl(0, 100%, 30%); opacity:0.3;

hsl(0, 100%, 40%); opacity:0.3;

hsl(0, 100%, 50%); opacity:0.3;

hsl(0, 100%, 60%); opacity:0.3;

hsl(0, 100%, 70%); opacity:0.3;

hsl(0, 100%, 80%); opacity:0.3;

hsl(0, 100%, 90%); opacity:0.3;

hsl(0, 100%, 100%); opacity:0.3;

#green {background-color:hsl(120,100%,50%); opacity: 0.3}
#light-green {background-color:hsl(120,100%,75%); opacity: 0.3}
#dark-green {background-color:hsl(120,100%,25%); opacity: 0.3}
#pastel-green {background-color:hsl(120,60%,70%); opacity: 0.3}
#violet {background-color:hsl(290,100%,50%); opacity: 0.3}
#pastel-violet {background-color:hsl(290,60%,70%); opacity: 0.3}

5. HEX Colors

Đây là loại mã màu thông dụng nhất không chỉ ở CSS mà trong các công cụ thiết kế như Photoshop cũng sử dụng.

Cấu trúc của nó như sau: #xxxxxx. Trong đó dấu # là khai báo loại mã màu HEX và xxxxxx là các giá trị có thể chữ cái hoặc chữ số.

Ví dụ điển hình nhất là mã màu trắng là #ffffff và mã màu đen là #000000.

Sau đây là bảng mã màu cho bạn tham khảo:

6. Color Name

Đây là cú pháp đơn giản nhất để xác định màu trong CSS. Tuy nhiên không khuyến khích bạn sử dụng bởi vì nó không phải là một dạng chuẩn của color và nó cũng không chứa đầy đủ màu.

Ví dụ:

• black : màu đen
• red : màu đỏ
• pink : màu hồng
• white : màu trắng
• yellow : màu vàng

7. Lời kết

Qua bài này mình đã giới thiệu đầy đủ các định dạng màu sắc có thể sử dụng trong CSS nói chung và trong CSS3 nói riêng.

Qua bài này ta cũng rút được kinh nghiệm là nếu sử dụng màu background có trong suốt thì nên sử dụng định dạng màu RGBA hoặc HSLA. Thứ hai nữa là không nên sử dụng màu theo tên tiếng anh bởi vì nó khó quản lý và ko đúng chuẩn.