Màu trong CSS | Color trong CSS

CSS sử dụng các giá trị màu để xác định màu sắc hiển thị. Bạn có thể thiết lập màu nền (background) hoặc màu cận cảnh (foreground) của một phần tử, hoặc màu của đường viền hay đường bao của một khung hoặc một bảng. Màu được hiển thị bởi kết hợp ba màu là RED, GREEN, và BLUE.

Để xác định màu trong CSS, bạn có thể sử dụng một trong các cách sau:

Định dạng
Cú pháp
Ví dụ

Hex Code
#RRGGBB
p{color:#FF0000;}

Short Hex Code
#RGB
p{color:#6A7;}

RGB(dạng %)
rgb(rrr%,ggg%,bbb%)
p{color:rgb(50%,50%,50%);}

RGB (tuyệt đối)
rgb(rrr,ggg,bbb)
p{color:rgb(0,0,255);}

Tên màu
aqua, black, etc.
p{color:teal;}

Quảng cáo

Sử dụng Hex Code để xác định màu trong CSS

Mỗi giá trị màu có thể được xác định bởi một giá trị Hex Code gồm 6 chữ số. Hai chữ số đầu tiên biểu diễn một giá trị RED, hai chữ số tiếp theo biểu diễn một giá trị GREEN và hai chữ số cuối cùng biểu diễn giá trị BLUE.

Mỗi giá trị Hex Code này được đặt trước bởi một ký hiệu #.

Color
Color HEX

 
#000000

 
#FF0000

 
#00FF00

 
#0000FF

 
#FFFF00

 
#00FFFF

 
#FF00FF

 
#C0C0C0

 
#FFFFFF

Sử dụng Short Hex Code để xác định màu trong CSS

Đây là dạng rút gọn của Hex Code. Bạn nhìn lại phần cú pháp bên trên, và đọc lại phần Hex Code, bạn sẽ thấy rằng cứ mỗi cặp hai chữ số (cặp RR, cặp GG, cặp BB) trong Hex Code được rút gọn thành một chữ số tương ứng trong Short Hex Code. Ví dụ: nếu trong Hex Code bạn xác định giá trị màu là #66AA77 thì trong Short Hex Code giá trị sẽ là #6A7. Hai giá trị là tương đương.

Color
Color HEX

 
#000

 
#F00

 
#0F0

 
#0FF

 
#FF0

 
#0FF

 
#F0F

 
#FFF

Quảng cáo

Sử dụng RGB để xác định màu trong CSS

Giá trị màu có thể được xác định bởi sử dụng thuộc tính rgb(). Property này nhận ba giá trị, mỗi giá trị tương ứng cho RED, GREEN và BLUE. Giá trị có thể là số nguyên hoặc dạng phần trăm (%).

Ghi chú : Tất cả trình duyệt không hỗ trợ thuộc tính rgb(). Vì thế tốt nhất là bạn không nên sử dụng chúng.

Color
Color RGB

 
rgb(0,0,0)

 
rgb(255,0,0)

 
rgb(0,255,0)

 
rgb(0,0,255)

 
rgb(255,255,0)

 
rgb(0,255,255)

 
rgb(255,0,255)

 
rgb(192,192,192)

 
rgb(255,255,255)

Sử dụng tên màu để xác định màu trong CSS

Bạn có thể sử dụng tên màu (bằng tiếng Anh) để xác định giá trị màu trong CSS. Tên màu trong CSS là không phân biệt kiểu chữ, do đó Red là tương đương với red và RED.

Safe Color cho trình duyệt

Bảng dưới liệt kê 216 màu được coi như là Safe Color cho các trình duyệt. Các màu này bảo đảm rằng tất cả các mày tính sẽ hiển thị màu một cách chính xác khi gặp bất kỳ màu nào trong 216 trong bảng dưới đây:

000000
000033
000066
000099
0000CC
0000FF

003300
003333
003366
003399
0033CC
0033FF

006600
006633
006666
006699
0066CC
0066FF

009900
009933
009966
009999
0099CC
0099FF

00CC00
00CC33
00CC66
00CC99
00CCCC
00CCFF

00FF00
00FF33
00FF66
00FF99
00FFCC
00FFFF

330000
330033
330066
330099
3300CC
3300FF

333300
333333
333366
333399
3333CC
3333FF

336600
336633
336666
336699
3366CC
3366FF

339900
339933
339966
339999
3399CC
3399FF

33CC00
33CC33
33CC66
33CC99
33CCCC
33CCFF

33FF00
33FF33
33FF66
33FF99
33FFCC
33FFFF

660000
660033
660066
660099
6600CC
6600FF

663300
663333
663366
663399
6633CC
6633FF

666600
666633
666666
666699
6666CC
6666FF

669900
669933
669966
669999
6699CC
6699FF

66CC00
66CC33
66CC66
66CC99
66CCCC
66CCFF

66FF00
66FF33
66FF66
66FF99
66FFCC
66FFFF

990000
990033
990066
990099
9900CC
9900FF

993300
993333
993366
993399
9933CC
9933FF

996600
996633
996666
996699
9966CC
9966FF

999900
999933
999966
999999
9999CC
9999FF

99CC00
99CC33
99CC66
99CC99
99CCCC
99CCFF

99FF00
99FF33
99FF66
99FF99
99FFCC
99FFFF

CC0000
CC0033
CC0066
CC0099
CC00CC
CC00FF

CC3300
CC3333
CC3366
CC3399
CC33CC
CC33FF

CC6600
CC6633
CC6666
CC6699
CC66CC
CC66FF

CC9900
CC9933
CC9966
CC9999
CC99CC
CC99FF

CCCC00
CCCC33
CCCC66
CCCC99
CCCCCC
CCCCFF

CCFF00
CCFF33
CCFF66
CCFF99
CCFFCC
CCFFFF

FF0000
FF0033
FF0066
FF0099
FF00CC
FF00FF

FF3300
FF3333
FF3366
FF3399
FF33CC
FF33FF

FF6600
FF6633
FF6666
FF6699
FF66CC
FF66FF

FF9900
FF9933
FF9966
FF9999
FF99CC
FF99FF

FFCC00
FFCC33
FFCC66
FFCC99
FFCCCC
FFCCFF

FFFF00
FFFF33
FFFF66
FFFF99
FFFFCC
FFFFFF

Đã có app VietJack trên điện thoại, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng….miễn phí. Tải ngay ứng dụng trên Android và iOS.

Theo dõi chúng tôi miễn phí trên mạng xã hội facebook và youtube:

Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile…. mới nhất của chúng tôi.