Màu trong HTML & CSS
Màu trong HTML & CSS được xác định theo các cách sau:
Xác định màu theo hệ thập lục phân - HEX
HEX là viết tắc của từ "hexadecimal".
- Cách viết: gồm dấu "#" kết hợp với dãy ký tự Latin, chỉ bao gồm số hoặc chữ (hệ thập lục phân), không phân biệt chữ hoa hay chữ thường.
- Các ký tự Latin có thể chấp nhận là: a,b,c,d,e,f,A,B,C,D,E,F.
- Ví dụ: #00ffff
Ta có thể viết gút gọn màu này theo các cách sau:
- Gút gọn 6 ký tự giống nhau thành 3 ký tự: #ffffff => #fff
- Gút gọn 3 cặp ký tự thành 3 ký tự: #ff0066 => #f06
Xác định màu theo kết hợp màu RGB
Xác định màu theo RGB là sự kết hợp của 3 màu cơ bản: đỏ (Red), xanh lá cây (Green) và xanh dương (Blue)
- Cách viết: rgb(giá trị 1, giá trị 2, giá trị 3)
Với giá trị từ 0 tới 255. - Ví dụ: rgb(155,167,1)
Một số giá trị đặc biệt:
- Màu đen: rgb(0,0,0)
- Màu đỏ: rgb(255,0,0)
- Màu xanh lá cây: rgb(0,255,0)
- Màu xanh dương: rgb(0,0,255)
- Màu vàng: rgb(255,255,0)
- Màu Trắng: rgb(255,255,255)
Xác định màu theo tên tiếng anh
- Cách viết: tên màu được viết theo tiếng anh.
- Ví dụ: blue
Một số tên thường dùng:
- Màu đen: black
- Màu đỏ: red
- Màu xanh lá cây: green
- Màu xanh dương: blue
- Màu vàng: yellow
- Màu trắng: white
Giá trị
Tên màu | RGB | HEX | Background | Color |
---|---|---|---|---|
AliceBlue | rgb(240,248,255) | #F0F8FF | #F0F8FF | |
AntiqueWhite | rgb(250,235,215) | #FAEBD7 | #FAEBD7 | |
Aqua | rgb(0,255,255) | #00FFFF | #00FFFF | |
Aquamarine | rgb(127,255,212) | #7FFFD4 | #7FFFD4 | |
Azure | rgb(240,255,255) | #F0FFFF | #F0FFFF | |
Beige | rgb(245,245,220) | #F5F5DC | #F5F5DC | |
Bisque | rgb(255,228,196) | #FFE4C4 | #FFE4C4 | |
Black | rgb(0,0,0) | #000000 | #000000 | |
BlanchedAlmond | rgb(255,235,205) | #FFEBCD | #FFEBCD | |
Blue | rgb(0,0,255) | #0000FF | #FAEBD7 | |
BlueViolet | rgb(138,43,226) | #8A2BE2 | #8A2BE2 | |
Brown | rgb(165,42,42) | #A52A2A | #A52A2A | |
BurlyWood | rgb(222,184,135) | #DEB887 | #DEB887 | |
CadetBlue | rgb(95,158,160) | #5F9EA0 | #5F9EA0 | |
Chartreuse | rgb(127,255,0) | #7FFF00 | #7FFF00 | |
Chocolate | rgb(210,105,30) | #D2691E | #D2691E | |
Coral | rgb(255,127,80) | #FF7F50 | #FF7F50 | |
CornflowerBlue | rgb(100,149,137) | #6495ED | #6495ED | |
Cornsilk | rgb(255,248,220) | #FFF8DC | #FFF8DC | |
Crimson | rgb(220,20,60) | #DC143C | #DC143C | |
Cyan | rgb(0,255,255) | #00FFFF | #00FFFF | |
DarkBlue | rgb(0,0,139) | #00008B | #00008B | |
DarkCyan | rgb(0,139,139) | #008B8B | #008B8B | |
DarkGoldenRod | rgb(184,134,11) | #B8860B | #B8860B | |
DarkGray | rgb(169,169,169) | #A9A9A9 | #A9A9A9 | |
DarkGreen | rgb(0,100,0) | #006400 | #006400 | |
DarkGrey | rgb(169,169,169) | #A9A9A9 | #A9A9A9 | |
DarkKhaki | rgb(189,183,107) | #BDB76B | #BDB76B | |
DarkMagenta | rgb(139,0,139) | #8B008B | #8B008B | |
DarkOliveGreen | rgb(85,107,47) | #556B2F | #556B2F | |
Darkorange | rgb(255,140,0) | #FF8C00 | #FF8C00 | |
DarkOrchid | rgb(153,50,204) | #9932CC | #9932CC | |
DarkRed | rgb(139,0,0) | #8B0000 | #8B0000 | |
DarkSalmon | rgb(233,150,122) | #E9967A | #E9967A | |
DarkSeaGreen | rgb(143,188,143) | #8FBC8F | #8FBC8F | |
DarkSlateBlue | rgb(72,61,139) | #483D8B | #483D8B | |
DarkSlateGray | rgb(47,79,79) | #2F4F4F | #2F4F4F | |
DarkSlateGrey | rgb(47,79,79) | #2F4F4F | #2F4F4F | |
DarkTurquoise | rgb(0,206,209) | #00CED1 | #00CED1 | |
DarkViolet | rgb(248,0,211) | #9400D3 | #9400D3 | |
DeepPink | rgb(255,20,147) | #FF1493 | #FF1493 | |
DeepSkyBlue | rgb(0,191,255) | #00BFFF | #00BFFF | |
DimGray | rgb(105,105,105) | #696969 | #696969 | |
DimGrey | rgb(105,105,105) | #696969 | #696969 | |
DodgerBlue | rgb(30,144,255) | #1E90FF | #1E90FF | |
FireBrick | rgb(178,34,34) | #B22222 | #B22222 | |
FloralWhite | rgb(255,250,240) | #FFFAF0 | #FFFAF0 | |
ForestGreen | rgb(34,139,34) | #228B22 | #228B22 | |
Fuchsia | rgb(255,0,255) | #FF00FF | #FF00FF | |
Gainsboro | rgb(220,220,220) | #DCDCDC | #DCDCDC | |
GhostWhite | rgb(248,248,255) | #F8F8FF | #F8F8FF | |
Gold | rgb(255,215,0) | #FFD700 | #FFD700 | |
GoldenRod | rgb(218,165,32) | #DAA520 | #DAA520 | |
Gray | rgb(218,218,218) | #808080 | #808080 | |
Green | rgb(0,218,0) | #008000 | #008000 | |
Grey | rgb(218,218,218) | #808080 | #808080 | |
GreenYellow | rgb(173,255,47) | #ADFF2F | #ADFF2F | |
HoneyDew | rgb(240,255,240) | #F0FFF0 | #F0FFF0 | |
HotPink | rgb(255,105,180) | #FF69B4 | #FF69B4 | |
IndianRed | rgb(205,90,90) | #CD5C5C | #CD5C5C | |
Indigo | rgb(75,0,130) | #4B0082 | #4B0082 | |
Ivory | rgb(255,255,240) | #FFFFF0 | #FFFFF0 | |
Khaki | rgb(240,230,140) | #F0E68C | #F0E68C | |
Lavender | rgb(230,230,230) | #E6E6FA | #E6E6FA | |
LavenderBlush | rgb(255,240,245) | #FFF0F5 | #FFF0F5 | |
LawnGreen | rgb(124,252,0) | #7CFC00 | #7CFC00 | |
LemonChiffon | rgb(255,250,205) | #FFFACD | #FFFACD | |
LightBlue | rgb(173,216,230) | #ADD8E6 | #ADD8E6 | |
LightCoral | rgb(240,128,128) | #F08080 | #F08080 | |
LightCyan | rgb(224,255,255) | #E0FFFF | #E0FFFF | |
LightGoldenRodYellow | rgb(250,250,210) | #FAFAD2 | #FAFAD2 | |
LightGray | rgb(211,211,211) | #D3D3D3 | #D3D3D3 | |
LightGreen | rgb(144,238,144) | #90EE90 | #90EE90 | |
LightGrey | rgb(211,211,211) | #D3D3D3 | #D3D3D3 | |
LightPink | rgb(255,182,193) | #FFB6C1 | #FFB6C1 | |
LightSalmon | rgb(255,160,122) | #FFA07A | #FFA07A | |
LightSeaGreen | rgb(32,178,170) | #20B2AA | #20B2AA | |
LightSkyBlue | rgb(135,206,250) | #87CEFA | #87CEFA | |
LightSlateGray | rgb(119,136,153) | #778899 | #778899 | |
LightSlateGrey | rgb(119,136,153) | #778899 | #778899 | |
LightSteelBlue | rgb(176,196,222) | #B0C4DE | #B0C4DE | |
LightYellow | rgb(255,255,224) | #FFFFE0 | #FFFFE0 | |
Lime | rgb(0,255,0) | #00FF00 | #00FF00 | |
LimeGreen | rgb(50,205,50) | #32CD32 | #32CD32 | |
Linen | rgb(250,240,230) | #FAF0E6 | #FAF0E6 | |
Magenta | rgb(255,0,255) | #FF00FF | #FF00FF | |
Maroon | rgb(128,0,0) | #800000 | #800000 | |
MediumAquaMarine | rgb(102,205,170) | #66CDAA | #66CDAA | |
MediumBlue | rgb(0,0,205) | #0000CD | #0000CD | |
MediumOrchid | rgb(186,85,211) | #BA55D3 | #BA55D3 | |
MediumPurple | rgb(147,112,216) | #9370D8 | #9370D8 | |
MediumSeaGreen | rgb(60,179,113) | #3CB371 | #3CB371 | |
MediumSlateBlue | rgb(123,104,238) | #7B68EE | #7B68EE | |
MediumSpringGreen | rgb(0,250,154) | #00FA9A | #00FA9A | |
MediumTurquoise | rgb(72,209,204) | #48D1CC | #48D1CC | |
MediumVioletRed | rgb(199,21,133) | #C71585 | #C71585 | |
MidnightBlue | rgb(25,25,112) | #191970 | #191970 | |
MintCream | rgb(245,255,250) | #F5FFFA | #F5FFFA | |
MistyRose | rgb(255,228,225) | #FFE4E1 | #FFE4E1 | |
Moccasin | rgb(255,228,181) | #FFE4B5 | #FFE4B5 | |
NavajoWhite | rgb(255,222,173) | #FFDEAD | #FFDEAD | |
Navy | rgb(0,0,128) | #000080 | #000080 | |
OldLace | rgb(253,245,230) | #FDF5E6 | #FDF5E6 | |
Olive | rgb(128,128,0) | #808000 | #808000 | |
OliveDrab | rgb(107,142,35) | #6B8E23 | #6B8E23 | |
Orange | rgb(255,165,0) | #FFA500 | #FFA500 | |
OrangeRed | rgb(255,69,0) | #FF4500 | #FF4500 | |
Orchid | rgb(218,112,214) | #DA70D6 | #DA70D6 | |
PaleGoldenRod | rgb(238,232,170) | #EEE8AA | #EEE8AA | |
PaleGreen | rgb(152,251,152) | #98FB98 | #98FB98 | |
PaleTurquoise | rgb(175,238,238) | #AFEEEE | #AFEEEE | |
PaleVioletRed | rgb(216,112,147) | #D87093 | #D87093 | |
PapayaWhip | rgb(255,239,213) | #FFEFD5 | #FFEFD5 | |
PeachPuff | rgb(255,218,185) | #FFDAB9 | #FFDAB9 | |
Peru | rgb(205,133,63) | #CD853F | #CD853F | |
Pink | rgb(255,192,203) | #FFC0CB | #FFC0CB | |
Plum | rgb(221,160,221) | #DDA0DD | #DDA0DD | |
PowderBlue | rgb(176,224,230) | #B0E0E6 | #B0E0E6 | |
Purple | rgb(128,0,128) | #800080 | #800080 | |
Red | rgb(255,0,0) | #FF0000 | #FF0000 | |
RosyBrown | rgb(188,143,143) | #BC8F8F | #BC8F8F | |
RoyalBlue | rgb(65,105,225) | #4169E1 | #4169E1 | |
SaddleBrown | rgb(139,69,19) | #8B4513 | #8B4513 | |
Salmon | rgb(250,128,114) | #FA8072 | #FA8072 | |
SandyBrown | rgb(244,164,96) | #F4A460 | #F4A460 | |
SeaGreen | rgb(46,139,87) | #2E8B57 | #2E8B57 | |
SeaShell | rgb(255,245,238) | #FFF5EE | #FFF5EE | |
Sienna | rgb(160,82,45) | #A0522D | #A0522D | |
Silver | rgb(192,192,192) | #C0C0C0 | #C0C0C0 | |
SkyBlue | rgb(135,206,235) | #87CEEB | #87CEEB | |
SlateBlue | rgb(106,90,255) | #6A5ACD | #6A5ACD | |
SlateGray | rgb(112,128,144) | #708090 | #708090 | |
SlateGrey | rgb(112,128,144) | #708090 | #708090 | |
Snow | rgb(255,250,250) | #FFFAFA | #FFFAFA | |
SpringGreen | rgb(0,255,127) | #00FF7F | #00FF7F | |
SteelBlue | rgb(70,130,180) | #4682B4 | #4682B4 | |
Tan | rgb(210,180,140) | #D2B48C | #D2B48C | |
Teal | rgb(0,128,128) | #008080 | #008080 | |
Thistle | rgb(216,191,216) | #D8BFD8 | #D8BFD8 | |
Tomato | rgb(255,99,71) | #FF6347 | #FF6347 | |
Turquoise | rgb(64,224,208) | #40E0D0 | #40E0D0 | |
Violet | rgb(238,130,238) | #EE82EE | #EE82EE | |
Wheat | rgb(245,222,179) | #F5DEB3 | #F5DEB3 | |
White | rgb(255,255,255) | #FFFFFF | #FFFFFF | |
WhiteSmoke | rgb(245,245,245) | #F5F5F5 | #F5F5F5 | |
Yellow | rgb(255,255,0) | #FFFF00 | #FFFF00 | |
YellowGreen | rgb(145,205,50) | #9ACD32 | #9ACD32 |