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

Nguồn: freetuts.net

Profile photo of adminTheHalfHeart

TheHalfHeart

Có sở thích viết tuts nên đã từng tham gia viết ở một số diễn đàn, đến năm 2014 mới có điều kiện sáng lập ra freetuts.net. Sinh năm 90 và có 1 vợ 2 con, thích ca hát và lập trình.

ĐĂNG BÌNH LUẬN: Đăng câu hỏi trên Facebook để được hỗ trợ nhanh nhất.