Bài 05: 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.

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);

Vi dụ: XEM DEMO

#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%);

Ví dụ: XEM DEMO

#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);

Ví dụ: XEM DEMO

#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;

Ví dụ: XEM DEMO

#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:

EEEEEE	DDDDDD	CCCCCC	BBBBBB	AAAAAA	999999
888888	777777	666666	555555	444444	333333
222222	111111	000000	FF0000	EE0000	DD0000
CC0000	BB0000	AA0000	990000	880000	770000
660000	550000	440000	330000	220000	110000
FFFFFF	FFFFCC	FFFF99	FFFF66	FFFF33	FFFF00
CCFFFF	CCFFCC	CCFF99	CCFF66	CCFF33	CCFF00
99FFFF	99FFCC	99FF99	99FF66	99FF33	99FF00
66FFFF	66FFCC	66FF99	66FF66	66FF33	66FF00
33FFFF	33FFCC	33FF99	33FF66	33FF33	33FF00
00FFFF	00FFCC	00FF99	00FF66	00FF33	00FF00
FFCCFF	FFCCCC	FFCC99	FFCC66	FFCC33	FFCC00
CCCCFF	CCCCCC	CCCC99	CCCC66	CCCC33	CCCC00
99CCFF	99CCCC	99CC99	99CC66	99CC33	99CC00
66CCFF	66CCCC	66CC99	66CC66	66CC33	66CC00
33CCFF	33CCCC	33CC99	33CC66	33CC33	33CC00
00CCFF	00CCCC	33CC66	33CC33	00CC99	00CC66
00CC33	00CC00	FF99FF	FF99CC	FF9999	FF9966
FF9933	FF9900	CC99FF	CC99CC	CC9999	CC9966
CC9933	CC9900	9999FF	9999CC	999999	999966
999933	999900	6699FF	6699CC	669999	669966
669933	669900	3399FF	3399CC	339999	339966
339933	339900	0099FF	0099CC	009999	009966
009933	009900	FF66FF	FF66CC	FF6699	FF6666
FF6633	FF6600	CC66FF	CC66CC	CC6699	CC6666
CC6633	CC6600	9966FF	9966CC	996699	996666
996633	996600	6666FF	6666CC	666699	666666
666633	666600	3366FF	3366CC	336699	336666
336633	336600	0066FF	0066CC	006699	006666
006633	006600	FF33FF	FF33CC	FF3399	FF3366
FF3333	FF3300	CC33FF	CC33CC	CC3399	CC3366
CC3333	CC3300	9933FF	9933CC	993399	993366
993333	993300	6633FF	6633CC	663399	663366
663333	663300	3333FF	3333CC	333399	333366
333333	333300	0033FF	FF3333	0033CC	003399
003366	003333	003300	FF00FF	FF00CC	FF0099
FF0066	FF0033	FF0000	CC00FF	CC00CC	CC0099
CC0066	CC0033	CC0000	9900FF	9900CC	990099
990066	990033	990000	6600FF	6600CC	660099
660066	660033	660000	3300FF	3300CC	330099
330066	330033	330000	0000FF	0000CC	000099
000066	000033	00FF00	00EE00	00DD00	00CC00
00BB00	00AA00	009900	008800	007700	006600
005500	004400	003300	002200	001100	0000FF
0000EE	0000DD	0000CC	0000BB	0000AA	000099
000088	000077	000055	000044	000022	000011

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.