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ử ...

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 colorsHSL colorsHSLA colorsName 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#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

1
2
3
4
5
6
#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

1
2
3
4
5
6
#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

1
2
3
4
5
6
#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:

EEEEEEDDDDDDCCCCCCBBBBBBAAAAAA999999
888888777777666666555555444444333333
222222111111000000FF0000EE0000DD0000
CC0000BB0000AA0000990000880000770000
660000550000440000330000220000110000
FFFFFFFFFFCCFFFF99FFFF66FFFF33FFFF00
CCFFFFCCFFCCCCFF99CCFF66CCFF33CCFF00
99FFFF99FFCC99FF9999FF6699FF3399FF00
66FFFF66FFCC66FF9966FF6666FF3366FF00
33FFFF33FFCC33FF9933FF6633FF3333FF00
00FFFF00FFCC00FF9900FF6600FF3300FF00
FFCCFFFFCCCCFFCC99FFCC66FFCC33FFCC00
CCCCFFCCCCCCCCCC99CCCC66CCCC33CCCC00
99CCFF99CCCC99CC9999CC6699CC3399CC00
66CCFF66CCCC66CC9966CC6666CC3366CC00
33CCFF33CCCC33CC9933CC6633CC3333CC00
00CCFF00CCCC33CC6633CC3300CC9900CC66
00CC3300CC00FF99FFFF99CCFF9999FF9966
FF9933FF9900CC99FFCC99CCCC9999CC9966
CC9933CC99009999FF9999CC999999999966
9999339999006699FF6699CC669999669966
6699336699003399FF3399CC339999339966
3399333399000099FF0099CC009999009966
009933009900FF66FFFF66CCFF6699FF6666
FF6633FF6600CC66FFCC66CCCC6699CC6666
CC6633CC66009966FF9966CC996699996666
9966339966006666FF6666CC666699666666
6666336666003366FF3366CC336699336666
3366333366000066FF0066CC006699006666
006633006600FF33FFFF33CCFF3399FF3366
FF3333FF3300CC33FFCC33CCCC3399CC3366
CC3333CC33009933FF9933CC993399993366
9933339933006633FF6633CC663399663366
6633336633003333FF3333CC333399333366
3333333333000033FFFF33330033CC003399
003366003333003300FF00FFFF00CCFF0099
FF0066FF0033FF0000CC00FFCC00CCCC0099
CC0066CC0033CC00009900FF9900CC990099
9900669900339900006600FF6600CC660099
6600666600336600003300FF3300CC330099
3300663300333300000000FF0000CC000099
00006600003300FF0000EE0000DD0000CC00
00BB0000AA00009900008800007700006600
0055000044000033000022000011000000FF
0000EE0000DD0000CC0000BB0000AA000099
000088000077000055000044000022000011

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.

 

Code Dev

144 Blog posts

Comments