Màu Trong HTML & CSS | CSS | TEMPLATE MẪU - Học Web Chuẩn

Màu trong HTML & CSS

• Trang chủ
• Tham khảo
• CSS
• 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
• Xác định màu theo kết hợp màu RGB
• Xác định màu theo tên tiếng anh

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

Đầu trang

Học web chuẩn

HƯỚNG DẪN HỌC

• Hướng dẫn học
• Hướng dẫn học XHTML & HTML5
• Hướng dẫn học CSS
• Hướng dẫn học CSS3
• Hướng dẫn học Responsive
• Hướng dẫn học ES6
• Hướng dẫn học React.js
• Hướng dẫn học jQuery
• Hướng dẫn học PHP
• Hướng dẫn học Laravel
• Hướng dẫn học Wordpress
• Hướng dẫn học Webpack
• Hướng dẫn học SCSS

BÀI TẬP

• Bài tập XHTML & HTML5 cơ bản
• Bài tập XHTML & HTML5 nâng cao
• Bài tập CSS & CSS3 cơ bản
• Bài tập CSS & CSS3 nâng cao
• Bài tập jQuery

THAM KHẢO

• Tham khảo
• Tham khảo HTML4/XHTML
• Tham khảo HTML5
• Tham khảo CSS
• Tham khảo CSS3
• Tham khảo jQuery

CHUYÊN ĐỀ

• Chuyên đề
• Chuyên đề HTML/CSS
• Chuyên đề HTML5/CSS3
• Chuyên đề jQuery/JS
• jQuery/JS plugin

CÔNG CỤ HỖ TRỢ

• CSS3 Generator
• Generator Tools
• Web Tools
• Random Tools
• Công cụ test responsive
• Chia sẻ web & tools hay

GÓP Ý - LIÊN HỆ

• CÔNG CỤ TẠO CSS3CSS3 GENERATOR
• BỘ CÔNG CỤGENERATOR TOOLS
• CÔNG CỤ HỖ TRỢWEB TOOLS
• CÔNG CỤ TẠO RANDOMRANDOM GENERATOR
• CÔNG CỤ KIỂM TRA RESPONSIVE TEST
• CHIA SẺ HAYWEB & TOOLS

• 
• 
•