Màu trong HTML & CSS

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