HTML và tên gọi của màu sắc
Việc trao đổi về những khái niệm tương đối như màu sắc thường rất khó. Sử dụng một qui chuẩn chung về tên gọi mượn từ các qui chuẩn máy tính có thể hỗ trợ việc truyền đạt.
HTML và màu sắc
HyperText Markup Language (HTML) là ngôn ngữ để dựng các tập tin văn bản hiển thị bởi trình duyệt web. HTML thường được dùng với Cascading Style Sheets (CSS) và ngôn ngữ lập trình JavaScript để xây dựng website.
Để biểu thị màu sắc trên web (và trên các thiết bị điện tử nói chung), mô hình màu RGB là phổ biến nhất. RGB là viết tắt của Red (Đỏ), Green (Xanh lá), và Blue (Xanh dương). Mô hình màu RGB định nghĩa mỗi màu là sự kết hợp của ba kênh màu cơ bản. Ví dụ: màu đỏ là kết hợp của 100% Red, 0% Green, 0% Blue, trong khi đó màu vàng là 100% Red, 100% Green, 0% Blue.
Dữ liệu trên máy tính được biểu diễn bằng chuỗi nhị phân với mỗi bit nhận giá trị 0 hoặc 1. Thông thường mỗi kênh màu R, G, và B được biểu thì bởi một số dương 8 bit nhận giá trị từ 0 tới 255. Vì vậy mỗi màu cũng có thể được biểu thị bằng số dương thay vì phần trăm. Ví dụ: màu đỏ nhận giá trị rgb(255, 0, 0)
, tương tự màu vàng là rgb(255, 255, 0)
.
Hệ 16 (hexadecimal hoặc hex) cũng thường được dùng để biểu thị dữ liệu máy tính. Ví dụ: Giá trị 212 được lưu trữ bằng 8 bit nhị phân 11010100
có thể được biểu thị ở hệ thập lục phân bằng cách chia chuỗi bit thành hai phần 1101
và 0100
tương đương D
và 4
. Vì vậy mỗi màu RGB cũng có thể được biểu thị bởi 6 chữ số hệ thập lục phân. Ví dụ: màu đỏ là #FF0000
và màu vàng là #FFFF00
.
Vì mỗi kênh màu R, G, và B nhận 256 giá trị khác nhau, tổng cộng có thể kết hợp thành 16.777.216 màu sắc. Tuy nhiên thực tế nhiều thiết bị không hiển thị được sự khác nhau giữa các màu gần nhau. Để tiện cho việc sử dụng, nhiều qui chuẩn (HTML, SVG, …) đặt tên riêng cho một số màu sắc cơ bản và phổ biến. Ví dụ: màu đỏ là Red
và màu vàng là Yellow
.
Như vậy có nhiều cách để gán màu sắc cho một đối tượng trong HTML, trong đó ba cách đáng quan tâm là 1) gán giá trị cho từng kênh màu 2) sử dụng mã màu hex, và 3) sử dụng tên riêng. Ví dụ để gán màu đỏ cho một chuỗi ký tự có thể làm 3 cách sau:
<span style="color: rgb(255, 0, 0)">màu đỏ</span>
<span style="color: #FF00000">màu đỏ</span>
<span style="color: red">màu đỏ</span>
Khi việc các thiết bị điện tử ngày càng phổ biến, việc nắm bắt một số khái niệm cơ bản của khoa học máy tính mang lại nhiều giá trị cho người dùng, không chỉ riêng lập trình viên.
140 màu sắc và tên gọi
Mặc dù HTML là được dùng để phát triển web, việc có một bộ quy chuẩn chung về tên gọi cho một khái niệm chủ quan như màu sắc giúp cho việc trao đổi thông tin cũng như để tham khảo và tra cứu dễ dàng hơn. Dưới đây là danh sách 140 màu sắc và tên gọi (được dịch sang Tiếng Việt) được hỗ trợ bởi hầu hết các trình duyệt web hiện đại.
Nhiều màu được đặt tên dựa theo văn hoá đại chúng Hoa Kỳ (tên người, tên sản phẩm, …) nên khi dịch sang Tiếng Việt không mang nhiều ý nghĩa tuy nhiên vẫn được dịch sát để tiện việc tra cứu.
Mã Hex | Tên gọi (dịch) | Tên gọi (từ khoá) | Màu RGB |
---|---|---|---|
#CD5C5C#CD5C5C | Đỏ ấn | IndianRed | rgb(205, 92, 92) |
#F08080#F08080 | San hô nhạt | LightCoral | rgb(240, 128, 128) |
#FA8072#FA8072 | Cá hồi | Salmon | rgb(250, 128, 114) |
#E9967A#E9967A | Cá hồi đậm | DarkSalmon | rgb(233, 150, 122) |
#FFA07A#FFA07A | Cá hồi nhạt | LightSalmon | rgb(255, 160, 122) |
#DC143C#DC143C | Đỏ thắm | Crimson | rgb(220, 20, 60) |
#FF0000#FF0000 | Đỏ | Red | rgb(255, 0, 0) |
#B22222#B22222 | Gạch đỏ | FireBrick | rgb(178, 34, 34) |
#8B0000#8B0000 | Đỏ đậm | DarkRed | rgb(139, 0, 0) |
#FFC0CB#FFC0CB | Hồng | Pink | rgb(255, 192, 203) |
#FFB6C1#FFB6C1 | Hồng nhạt | LightPink | rgb(255, 182, 193) |
#FF69B4#FF69B4 | Hồng ấm | HotPink | rgb(255, 105, 180) |
#FF1493#FF1493 | Hồng sẫm | DeepPink | rgb(255, 20, 147) |
#C71585#C71585 | Đỏ tím vừa | MediumVioletRed | rgb(199, 21, 133) |
#DB7093#DB7093 | Đỏ tím nhợt | PaleVioletRed | rgb(219, 112, 147) |
#FF7F50#FF7F50 | San hô | Coral | rgb(255, 127, 80) |
#FF6347#FF6347 | Cà chua | Tomato | rgb(255, 99, 71) |
#FF4500#FF4500 | Cam đỏ | OrangeRed | rgb(255, 69, 0) |
#FF8C00#FF8C00 | Cam đậm | DarkOrange | rgb(255, 140, 0) |
#FFA500#FFA500 | Cam | Orange | rgb(255, 165, 0) |
#FFD700#FFD700 | Vàng miếng | Gold | rgb(255, 215, 0) |
#FFFF00#FFFF00 | Vàng | Yellow | rgb(255, 255, 0) |
#FFFFE0#FFFFE0 | Vàng nhạt | LightYellow | rgb(255, 255, 224) |
#FFFACD#FFFACD | Bông lan chanh | LemonChiffon | rgb(255, 250, 205) |
#FAFAD2#FAFAD2 | Cúc hoàng anh vàng nhạt | LightGoldenrodYellow | rgb(250, 250, 210) |
#FFEFD5#FFEFD5 | Đu đủ đánh kem | PapayaWhip | rgb(255, 239, 213) |
#FFE4B5#FFE4B5 | Giày Moccasin | Moccasin | rgb(255, 228, 181) |
#FFDAB9#FFDAB9 | Má đào | PeachPuff | rgb(255, 218, 185) |
#EEE8AA#EEE8AA | Cúc hoàng anh nhợt | PaleGoldenrod | rgb(238, 232, 170) |
#F0E68C#F0E68C | Kaki | Khaki | rgb(240, 230, 140) |
#BDB76B#BDB76B | Kaki sẫm | DarkKhaki | rgb(189, 183, 107) |
#E6E6FA#E6E6FA | Oải hương | Lavender | rgb(230, 230, 250) |
#D8BFD8#D8BFD8 | Hoa thistle | Thistle | rgb(216, 191, 216) |
#DDA0DD#DDA0DD | Mận | Plum | rgb(221, 160, 221) |
#EE82EE#EE82EE | Tím | Violet | rgb(238, 130, 238) |
#DA70D6#DA70D6 | Phong lan | Orchid | rgb(218, 112, 214) |
#FF00FF#FF00FF | Vân anh | Fuchsia | rgb(255, 0, 255) |
#FF00FF#FF00FF | Cánh sen | Magenta | rgb(255, 0, 255) |
#BA55D3#BA55D3 | Phong lan vừa | MediumOrchid | rgb(186, 85, 211) |
#9370DB#9370DB | Tía vừa | MediumPurple | rgb(147, 112, 219) |
#663399#663399 | Tía Rebecca | RebeccaPurple | rgb(102, 51, 153) |
#8A2BE2#8A2BE2 | Xanh tím | BlueViolet | rgb(138, 43, 226) |
#9400D3#9400D3 | Tím đậm | DarkViolet | rgb(148, 0, 211) |
#9932CC#9932CC | Phong lan đậm | DarkOrchid | rgb(153, 50, 204) |
#8B008B#8B008B | Cánh sen đậm | DarkMagenta | rgb(139, 0, 139) |
#800080#800080 | Tía | Purple | rgb(128, 0, 128) |
#4B0082#4B0082 | Chàm | Indigo | rgb(75, 0, 130) |
#6A5ACD#6A5ACD | Xanh đá phiến | SlateBlue | rgb(106, 90, 205) |
#483D8B#483D8B | Xanh đá phiến đậm | DarkSlateBlue | rgb(72, 61, 139) |
#7B68EE#7B68EE | Xanh đá phiến vừa | MediumSlateBlue | rgb(123, 104, 238) |
#ADFF2F#ADFF2F | Vàng xanh | GreenYellow | rgb(173, 255, 47) |
#7FFF00#7FFF00 | Rượu Chartreuse | Chartreuse | rgb(127, 255, 0) |
#7CFC00#7CFC00 | Cỏ xanh | LawnGreen | rgb(124, 252, 0) |
#00FF00#00FF00 | Chanh | Lime | rgb(0, 255, 0) |
#32CD32#32CD32 | Chanh xanh | LimeGreen | rgb(50, 205, 50) |
#98FB98#98FB98 | Xanh nhợt | PaleGreen | rgb(152, 251, 152) |
#90EE90#90EE90 | Xanh lá cây nhạt | LightGreen | rgb(144, 238, 144) |
#00FA9A#00FA9A | Xanh xuân vừa | MediumSpringGreen | rgb(0, 250, 154) |
#00FF7F#00FF7F | Xanh xuân | SpringGreen | rgb(0, 255, 127) |
#3CB371#3CB371 | Xanh lá cây biển vừa | MediumSeaGreen | rgb(60, 179, 113) |
#2E8B57#2E8B57 | Xanh lá cây biển | SeaGreen | rgb(46, 139, 87) |
#228B22#228B22 | Xanh rừng | ForestGreen | rgb(34, 139, 34) |
#008000#008000 | Xanh lá cây | Green | rgb(0, 128, 0) |
#006400#006400 | Xanh lá cây đậm | DarkGreen | rgb(0, 100, 0) |
#9ACD32#9ACD32 | Xanh lá cây vàng | YellowGreen | rgb(154, 205, 50) |
#6B8E23#6B8E23 | Ô liu xám | OliveDrab | rgb(107, 142, 35) |
#808000#808000 | Ô liu | Olive | rgb(128, 128, 0) |
#556B2F#556B2F | Ô liu xanh đậm | DarkOliveGreen | rgb(85, 107, 47) |
#66CDAA#66CDAA | Ngọc lục vừa | MediumAquamarine | rgb(102, 205, 170) |
#8FBC8B#8FBC8B | Xanh lá cây biển đậm | DarkSeaGreen | rgb(143, 188, 139) |
#20B2AA#20B2AA | Xanh lá cây biển nhạt | LightSeaGreen | rgb(32, 178, 170) |
#008B8B#008B8B | Lam đậm | DarkCyan | rgb(0, 139, 139) |
#008080#008080 | Mòng két | Teal | rgb(0, 128, 128) |
#00FFFF#00FFFF | Lam | Cyan | rgb(0, 255, 255) |
#E0FFFF#E0FFFF | Lam nhạt | LightCyan | rgb(224, 255, 255) |
#AFEEEE#AFEEEE | Ngọc lục nhạt | PaleTurquoise | rgb(175, 238, 238) |
#7FFFD4#7FFFD4 | Ngọc lục | Aquamarine | rgb(127, 255, 212) |
#40E0D0#40E0D0 | Ngọc lam | Turquoise | rgb(64, 224, 208) |
#48D1CC#48D1CC | Ngọc lam vừa | MediumTurquoise | rgb(72, 209, 204) |
#00CED1#00CED1 | Ngọc lam đậm | DarkTurquoise | rgb(0, 206, 209) |
#5F9EA0#5F9EA0 | Xanh thiếu sinh quân | CadetBlue | rgb(95, 158, 160) |
#4682B4#4682B4 | Xanh thép | SteelBlue | rgb(70, 130, 180) |
#B0C4DE#B0C4DE | Xanh thép nhạt | LightSteelBlue | rgb(176, 196, 222) |
#B0E0E6#B0E0E6 | Xanh dương bột | PowderBlue | rgb(176, 224, 230) |
#ADD8E6#ADD8E6 | Xanh dương nhạt | LightBlue | rgb(173, 216, 230) |
#87CEEB#87CEEB | Xanh trời | SkyBlue | rgb(135, 206, 235) |
#87CEFA#87CEFA | Xanh trời nhạt | LightSkyBlue | rgb(135, 206, 250) |
#00BFFF#00BFFF | Xanh trời sẫm | DeepSkyBlue | rgb(0, 191, 255) |
#1E90FF#1E90FF | Xanh dương Dodger | DodgerBlue | rgb(30, 144, 255) |
#6495ED#6495ED | Thanh cúc xanh | CornflowerBlue | rgb(100, 149, 237) |
#4169E1#4169E1 | Xanh dương hoàng gia | RoyalBlue | rgb(65, 105, 225) |
#0000FF#0000FF | Xanh dương | Blue | rgb(0, 0, 255) |
#0000CD#0000CD | Xanh dương vừa | MediumBlue | rgb(0, 0, 205) |
#00008B#00008B | Xanh dương đậm | DarkBlue | rgb(0, 0, 139) |
#000080#000080 | Xanh tím than | Navy | rgb(0, 0, 128) |
#191970#191970 | Xanh trời đêm | MidnightBlue | rgb(25, 25, 112) |
#FFF8DC#FFF8DC | Râu ngô | Cornsilk | rgb(255, 248, 220) |
#FFEBCD#FFEBCD | Hạnh nhân luộc | BlanchedAlmond | rgb(255, 235, 205) |
#FFE4C4#FFE4C4 | Bánh quy | Bisque | rgb(255, 228, 196) |
#FFDEAD#FFDEAD | Trắng Navajo | NavajoWhite | rgb(255, 222, 173) |
#F5DEB3#F5DEB3 | Lúa | Wheat | rgb(245, 222, 179) |
#DEB887#DEB887 | Gỗ lớn | BurlyWood | rgb(222, 184, 135) |
#D2B48C#D2B48C | Da | Tan | rgb(210, 180, 140) |
#BC8F8F#BC8F8F | Nâu hồng | RosyBrown | rgb(188, 143, 143) |
#F4A460#F4A460 | Nâu cát | SandyBrown | rgb(244, 164, 96) |
#DAA520#DAA520 | Cúc hoàng anh | Goldenrod | rgb(218, 165, 32) |
#B8860B#B8860B | Cúc hoàng anh đậm | DarkGoldenrod | rgb(184, 134, 11) |
#CD853F#CD853F | Peru | Peru | rgb(205, 133, 63) |
#D2691E#D2691E | Sô cô la | Chocolate | rgb(210, 105, 30) |
#8B4513#8B4513 | Nâu yên ngựa | SaddleBrown | rgb(139, 69, 19) |
#A0522D#A0522D | Nâu Sienna | Sienna | rgb(160, 82, 45) |
#A52A2A#A52A2A | Nâu | Brown | rgb(165, 42, 42) |
#800000#800000 | Hạt dẻ | Maroon | rgb(128, 0, 0) |
#FFFFFF#FFFFFF | Trắng | White | rgb(255, 255, 255) |
#FFFAFA#FFFAFA | Tuyết | Snow | rgb(255, 250, 250) |
#F0FFF0#F0FFF0 | Giọt mật | HoneyDew | rgb(240, 255, 240) |
#F5FFFA#F5FFFA | Kem bạc hà | MintCream | rgb(245, 255, 250) |
#F0FFFF#F0FFFF | Ngọc lưu ly | Azure | rgb(240, 255, 255) |
#F0F8FF#F0F8FF | Xanh dương Alice | AliceBlue | rgb(240, 248, 255) |
#F8F8FF#F8F8FF | Trắng ma | GhostWhite | rgb(248, 248, 255) |
#F5F5F5#F5F5F5 | Khói trắng | WhiteSmoke | rgb(245, 245, 245) |
#FFF5EE#FFF5EE | Vỏ hào | SeaShell | rgb(255, 245, 238) |
#F5F5DC#F5F5DC | Be | Beige | rgb(245, 245, 220) |
#FDF5E6#FDF5E6 | Ren cũ | OldLace | rgb(253, 245, 230) |
#FFFAF0#FFFAF0 | Hoa trắng | FloralWhite | rgb(255, 250, 240) |
#FFFFF0#FFFFF0 | Ngà | Ivory | rgb(255, 255, 240) |
#FAEBD7#FAEBD7 | Trắng cổ | AntiqueWhite | rgb(250, 235, 215) |
#FAF0E6#FAF0E6 | Lanh | Linen | rgb(250, 240, 230) |
#FFF0F5#FFF0F5 | Má hồng | LavenderBlush | rgb(255, 240, 245) |
#FFE4E1#FFE4E1 | Hồng sương | MistyRose | rgb(255, 228, 225) |
#DCDCDC#DCDCDC | Gainsboro | Gainsboro | rgb(220, 220, 220) |
#D3D3D3#D3D3D3 | Xám nhạt | LightGray | rgb(211, 211, 211) |
#C0C0C0#C0C0C0 | Bạc | Silver | rgb(192, 192, 192) |
#A9A9A9#A9A9A9 | Xám đậm | DarkGray | rgb(169, 169, 169) |
#808080#808080 | Xám | Gray | rgb(128, 128, 128) |
#696969#696969 | Xám mờ | DimGray | rgb(105, 105, 105) |
#778899#778899 | Xám đá phiến nhạt | LightSlateGray | rgb(119, 136, 153) |
#708090#708090 | Xám đá phiến | SlateGray | rgb(112, 128, 144) |
#2F4F4F#2F4F4F | Xám đá phiến đậm | DarkSlateGray | rgb(47, 79, 79) |
#000000#000000 | Đen | Black | rgb(0, 0, 0) |