Contents
- Khám Phá Các Mã Màu Phổ Biến Với Tên Gọi Riêng
- Các Sắc Thái Gần Màu Hồng (Pink)
- Các Sắc Thái Gần Màu Tím (Purple)
- Các Sắc Thái Gần Màu Đỏ (Red)
- Các Sắc Thái Gần Màu Cam (Orange)
- Các Sắc Thái Gần Màu Vàng (Yellow)
- Các Sắc Thái Gần Màu Xanh Lá Cây (Green)
- Các Sắc Thái Gần Màu Xanh Cyan (Cyan)
- Các Sắc Thái Gần Màu Xanh Da Trời (Blue)
- Các Sắc Thái Gần Màu Nâu (Brown)
- Các Sắc Thái Gần Màu Trắng (White)
- Các Sắc Thái Gần Màu Xám (Grey)
- Bảng Mã Màu Theo Sắc Thái Đen – Xám và Đỏ
- Sắc Đen – Xám
- Sắc Đỏ
- Web Safe Colors – Bảng Màu “An Toàn” Cho Website (Lịch Sử)
- Các Định Dạng Mã Màu Thường Gặp
- Cách Áp Dụng Mã Màu Trong CSS
- Thiết Lập Màu Chữ (Phần Tử Cụ Thể)
- Thiết Lập Màu Chữ (Tất Cả Các Phần Tử Cùng Loại)
- Đặt Màu Nền Cho Phần Tử
- Đặt Màu Đường Viền Phần Tử
Trong thế giới kỹ thuật số và thiết kế, màu sắc đóng vai trò vô cùng quan trọng. Việc lựa chọn và áp dụng màu sắc chính xác là yếu tố then chốt để tạo nên giao diện đẹp mắt, truyền tải đúng thông điệp và thu hút người nhìn. Đặc biệt với những người làm thiết kế web, lập trình hay đơn giản là cần chọn màu cho ấn phẩm, việc nắm vững các bảng màu vàng và các mã màu chuẩn là điều không thể thiếu. Bài viết này sẽ tổng hợp những mã màu thông dụng nhất, đặc biệt tập trung vào các sắc thái của Mã Màu Vàng, cùng với mã Hex và RGB để bạn dễ dàng sử dụng.
Khám Phá Các Mã Màu Phổ Biến Với Tên Gọi Riêng
Các trình duyệt hiện đại hỗ trợ rất nhiều màu sắc được đặt tên sẵn, giúp việc lựa chọn màu sắc trong CSS trở nên trực quan hơn. Dưới đây là danh sách các màu được nhóm theo sắc thái, bao gồm cả tên màu tiếng Anh và mã Hex tương ứng.
Các Sắc Thái Gần Màu Hồng (Pink)
| TÊN MÀU | MÃ HEX | Màu Hiển Thị |
|---|---|---|
| Pink | #FFC0CB | |
| LightPink | #FFB6C1 | |
| HotPink | #FF69B4 | |
| DeepPink | #FF1493 | |
| PaleVioletRed | #DB7093 | |
| MediumVioletRed | #C71585 |
Các Sắc Thái Gần Màu Tím (Purple)
| TÊN MÀU | MÃ HEX | Màu Hiển Thị |
|---|---|---|
| Lavender | #E6E6FA | |
| Thistle | #D8BFD8 | |
| Plum | #DDA0DD | |
| Orchid | #DA70D6 | |
| Violet | #EE82EE | |
| Fuchsia/Magenta | #FF00FF | |
| MediumOrchid | #BA55D3 | |
| DarkOrchid | #9932CC | |
| DarkViolet | #9400D3 | |
| BlueViolet | #8A2BE2 | |
| DarkMagenta | #8B008B | |
| Purple | #800080 | |
| MediumPurple | #9370DB | |
| MediumSlateBlue | #7B68EE | |
| SlateBlue | #6A5ACD | |
| DarkSlateBlue | #483D8B | |
| RebeccaPurple | #663399 | |
| Indigo | #4B0082 |
Các Sắc Thái Gần Màu Đỏ (Red)
| TÊN MÀU | MÃ HEX | Màu Hiển Thị |
|---|---|---|
| LightSalmon | #FFA07A | |
| Salmon | #FA8072 | |
| DarkSalmon | #E9967A | |
| LightCoral | #F08080 | |
| IndianRed | #CD5C5C | |
| Crimson | #DC143C | |
| Red | #FF0000 | |
| FireBrick | #B22222 | |
| DarkRed | #8B0000 |
Các Sắc Thái Gần Màu Cam (Orange)
| TÊN MÀU | MÃ HEX | Màu Hiển Thị |
|---|---|---|
| Orange | #FFA500 | |
| DarkOrange | #FF8C00 | |
| Coral | #FF7F50 | |
| Tomato | #FF6347 | |
| OrangeRed | #FF4500 |
Các Sắc Thái Gần Màu Vàng (Yellow)
Màu vàng là một gam màu rực rỡ và ấm áp, thường gắn liền với ánh nắng mặt trời, sự vui vẻ, lạc quan và thịnh vượng. Trong thiết kế, các sắc độ của mã màu vàng được sử dụng rộng rãi để tạo điểm nhấn, thu hút sự chú ý hoặc làm nền. Dưới đây là các mã màu vàng phổ biến:
| TÊN MÀU | MÃ HEX | Màu Hiển Thị |
|---|---|---|
| Gold | #FFD700 | |
| Yellow | #FFFF00 | |
| LightYellow | #FFFFE0 | |
| LemonChiffon | #FFFACD | |
| LightGoldenRodYellow | #FAFAD2 | |
| PapayaWhip | #FFEFD5 | |
| Moccasin | #FFE4B5 | |
| PeachPuff | #FFDAB9 | |
| PaleGoldenRod | #EEE8AA | |
| Khaki | #F0E68C | |
| DarkKhaki | #BDB76B |
Mỗi sắc thái vàng lại mang một cảm giác khác biệt, từ vàng kim sang trọng (Gold) đến vàng nhạt dịu mắt (LightYellow). Việc hiểu rõ ý nghĩa màu vàng trong từng ngữ cảnh sẽ giúp bạn lựa chọn mã màu vàng phù hợp nhất cho dự án của mình.
Các Sắc Thái Gần Màu Xanh Lá Cây (Green)
| TÊN MÀU | MÃ HEX | Màu Hiển Thị |
|---|---|---|
| GreenYellow | #ADFF2F | |
| Chartreuse | #7FFF00 | |
| LawnGreen | #7CFC00 | |
| Lime | #00FF00 | |
| LimeGreen | #32CD32 | |
| PaleGreen | #98FB98 | |
| LightGreen | #90EE90 | |
| MediumSpringGreen | #00FA9A | |
| SpringGreen | #00FF7F | |
| MediumSeaGreen | #3CB371 | |
| SeaGreen | #2E8B57 | |
| ForestGreen | #228B22 | |
| Green | #008000 | |
| DarkGreen | #006400 | |
| YellowGreen | #9ACD32 | |
| OliveDrab | #6B8E23 | |
| DarkOliveGreen | #556B2F | |
| MediumAquaMarine | #66CDAA | |
| DarkSeaGreen | #8FBC8F | |
| LightSeaGreen | #20B2AA | |
| DarkCyan | #008B8B | |
| Teal | #008080 |
Các Sắc Thái Gần Màu Xanh Cyan (Cyan)
| TÊN MÀU | MÃ HEX | Màu Hiển Thị |
|---|---|---|
| Aqua | #00FFFF | |
| Cyan | #00FFFF | |
| LightCyan | #E0FFFF | |
| PaleTurquoise | #AFEEEE | |
| Aquamarine | #7FFFD4 | |
| Turquoise | #40E0D0 | |
| MediumTurquoise | #48D1CC | |
| DarkTurquoise | #00CED1 |
Các Sắc Thái Gần Màu Xanh Da Trời (Blue)
| TÊN MÀU | MÃ HEX | Màu Hiển Thị |
|---|---|---|
| CadetBlue | #5F9EA0 | |
| SteelBlue | #4682B4 | |
| LightSteelBlue | #B0C4DE | |
| LightBlue | #ADD8E6 | |
| PowderBlue | #B0E0E6 | |
| LightSkyBlue | #87CEFA | |
| SkyBlue | #87CEEB | |
| CornflowerBlue | #6495ED | |
| DeepSkyBlue | #00BFFF | |
| DodgerBlue | #1E90FF | |
| RoyalBlue | #4169E1 | |
| Blue | #0000FF | |
| MediumBlue | #0000CD | |
| DarkBlue | #00008B | |
| Navy | #000080 | |
| MidnightBlue | #191970 |
Các Sắc Thái Gần Màu Nâu (Brown)
| TÊN MÀU | MÃ HEX | Màu Hiển Thị |
|---|---|---|
| Cornsilk | #FFF8DC | |
| BlanchedAlmond | #FFEBCD | |
| Bisque | #FFE4C4 | |
| NavajoWhite | #FFDEAD | |
| Wheat | #F5DEB3 | |
| BurlyWood | #DEB887 | |
| Tan | #D2B48C | |
| RosyBrown | #BC8F8F | |
| SandyBrown | #F4A460 | |
| GoldenRod | #DAA520 | |
| DarkGoldenRod | #B8860B | |
| Peru | #CD853F | |
| Chocolate | #D2691E | |
| Olive | #808000 | |
| SaddleBrown | #8B4513 | |
| Sienna | #A0522D | |
| Brown | #A52A2A | |
| Maroon | #800000 |
Các Sắc Thái Gần Màu Trắng (White)
| TÊN MÀU | MÃ HEX | Màu Hiển Thị |
|---|---|---|
| White | #FFFFFF | |
| Snow | #FFFAFA | |
| HoneyDew | #F0FFF0 | |
| MintCream | #F5FFFA | |
| Azure | #F0FFFF | |
| AliceBlue | #F0F8FF | |
| GhostWhite | #F8F8FF | |
| WhiteSmoke | #F5F5F5 | |
| SeaShell | #FFF5EE | |
| Beige | #F5F5DC | |
| OldLace | #FDF5E6 | |
| FloralWhite | #FFFAF0 | |
| Ivory | #FFFFF0 | |
| AntiqueWhite | #FAEBD7 | |
| Linen | #FAF0E6 | |
| LavenderBlush | #FFF0F5 | |
| MistyRose | #FFE4E1 |
Các Sắc Thái Gần Màu Xám (Grey)
| TÊN MÀU | MÃ HEX | Màu Hiển Thị |
|---|---|---|
| Gainsboro | #DCDCDC | |
| LightGray | #D3D3D3 | |
| Silver | #C0C0C0 | |
| DarkGray | #A9A9A9 | |
| DimGray | #696969 | |
| Gray | #808080 | |
| LightSlateGray | #778899 | |
| SlateGray | #708090 | |
| DarkSlateGray | #2F4F4F | |
| Black | #000000 |
Bảng Mã Màu Theo Sắc Thái Đen – Xám và Đỏ
Ngoài tên màu, các mã màu còn được biểu diễn bằng giá trị Hex hoặc RGB. Các bảng dưới đây liệt kê chi tiết các sắc thái tăng dần của màu Đen/Xám và Đỏ theo mã Hex và RGB.
Sắc Đen – Xám
| Gray Shades | HEX | RGB | Màu Hiển Thị |
|---|---|---|---|
| HTML Black | #000000 | rgb(0,0,0) | |
| #080808 | rgb(8,8,8) | ||
| #101010 | rgb(16,16,16) | ||
| #181818 | rgb(24,24,24) | ||
| #202020 | rgb(32,32,32) | ||
| #282828 | rgb(40,40,40) | ||
| #303030 | rgb(48,48,48) | ||
| #383838 | rgb(56,56,56) | ||
| #404040 | rgb(64,64,64) | ||
| #484848 | rgb(72,72,72) | ||
| #505050 | rgb(80,80,80) | ||
| #585858 | rgb(88,88,88) | ||
| #606060 | rgb(96,96,96) | ||
| #686868 | rgb(104,104,104) | ||
| HTML DimGray | #696969 | rgb(105,105,105) | |
| #707070 | rgb(112,112,112) | ||
| #787878 | rgb(120,120,120) | ||
| HTML Gray | #808080 | rgb(128,128,128) | |
| #888888 | rgb(136,136,136) | ||
| #909090 | rgb(144,144,144) | ||
| #989898 | rgb(152,152,152) | ||
| #A0A0A0 | rgb(160,160,160) | ||
| #A8A8A8 | rgb(168,168,168) | ||
| HTML DarkGray | #A9A9A9 | rgb(169,169,169) | |
| #B0B0B0 | rgb(176,176,176) | ||
| #B8B8B8 | rgb(184,184,184) | ||
| X11 Gray | #BEBEBE | rgb(190,190,190) | |
| HTML Silver | #C0C0C0 | rgb(192,192,192) | |
| #C8C8C8 | rgb(200,200,200) | ||
| #D0D0D0 | rgb(208,208,208) | ||
| HTML LightGray | #D3D3D3 | rgb(211,211,211) | |
| #D8D8D8 | rgb(216,216,216) | ||
| HTML Gainsboro | #DCDCDC | rgb(220,220,220) | |
| #E0E0E0 | rgb(224,224,224) | ||
| #E8E8E8 | rgb(232,232,232) | ||
| #F0F0F0 | rgb(240,240,240) | ||
| HTML WhiteSmoke | #F5F5F5 | rgb(245,245,245) | |
| #F8F8F8 | rgb(248,248,248) | ||
| HTML White | #FFFFFF | rgb(255,255,255) |
Lưu ý rằng trong bảng trên, HTML Gray (808080) lại tối hơn HTML DarkGray (A9A9A9). Điều này xuất phát từ việc tên màu HTML/CSS kế thừa từ tiêu chuẩn X11, nơi Gray được định nghĩa khác nhau. Bạn chỉ cần lưu ý điều này khi sử dụng tên màu thay vì mã Hex hoặc RGB.
Sắc Đỏ
| Red Light | HEX | RGB | Màu Hiển Thị |
|---|---|---|---|
| #000000 | rgb(0,0,0) | ||
| #080000 | rgb(8,0,0) | ||
| #100000 | rgb(16,0,0) | ||
| #180000 | rgb(24,0,0) | ||
| #200000 | rgb(32,0,0) | ||
| #280000 | rgb(40,0,0) | ||
| #300000 | rgb(48,0,0) | ||
| #380000 | rgb(56,0,0) | ||
| #400000 | rgb(64,0,0) | ||
| #480000 | rgb(72,0,0) | ||
| #500000 | rgb(80,0,0) | ||
| #580000 | rgb(88,0,0) | ||
| #600000 | rgb(96,0,0) | ||
| #680000 | rgb(104,0,0) | ||
| #700000 | rgb(112,0,0) | ||
| #780000 | rgb(120,0,0) | ||
| #800000 | rgb(128,0,0) | ||
| #880000 | rgb(136,0,0) | ||
| #900000 | rgb(144,0,0) | ||
| #980000 | rgb(152,0,0) | ||
| #A00000 | rgb(160,0,0) | ||
| #A80000 | rgb(168,0,0) | ||
| #B00000 | rgb(176,0,0) | ||
| #B80000 | rgb(184,0,0) | ||
| #C00000 | rgb(192,0,0) | ||
| #C80000 | rgb(200,0,0) | ||
| #D00000 | rgb(208,0,0) | ||
| #D80000 | rgb(216,0,0) | ||
| #E00000 | rgb(224,0,0) | ||
| #E80000 | rgb(232,0,0) | ||
| #F00000 | rgb(240,0,0) | ||
| #F80000 | rgb(248,0,0) | ||
| #FF0000 | rgb(255,0,0) |
Web Safe Colors – Bảng Màu “An Toàn” Cho Website (Lịch Sử)
Khoảng thời gian trước đây, khi khả năng hiển thị màu của máy tính còn hạn chế (chỉ khoảng 256 màu), danh sách 216 “Màu an toàn cho web” (Web Safe Colors) đã ra đời như một tiêu chuẩn để đảm bảo màu sắc hiển thị nhất quán trên hầu hết các thiết bị.
Tuy nhiên, trong thời đại công nghệ hiện nay, hầu hết các màn hình đều có thể hiển thị hàng triệu màu, nên việc tuân thủ nghiêm ngặt bảng màu này không còn quá quan trọng nữa. Dưới đây là bảng màu này để bạn tham khảo thêm về lịch sử phát triển của màu sắc trong thiết kế web.
| 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ác Định Dạng Mã Màu Thường Gặp
Để sử dụng màu sắc trong các ngôn ngữ như CSS, bạn có thể dùng một trong ba định dạng phổ biến sau:
- Định dạng Hex:
#rrggbb(Ví dụ:#FFA500cho màu cam). Hai ký tự đầurrbiểu thị giá trị màu Đỏ,ggcho màu Xanh Lá Cây vàbbcho màu Xanh Da Trời. Giá trị từ 00 đến FF. - Định dạng RGB:
rgb(red, green, blue)(Ví dụ:rgb(255, 165, 0)cho màu cam). Mỗi giá trị màu (đỏ, xanh lá, xanh dương) nằm trong khoảng từ 0 đến 255. - Định dạng Tên: Sử dụng trực tiếp tên màu tiếng Anh (Ví dụ:
orangecho màu cam). Tuy nhiên, số lượng tên màu được hỗ trợ có giới hạn so với định dạng Hex hoặc RGB.
Cách Áp Dụng Mã Màu Trong CSS
Việc thiết lập màu sắc cho các thành phần trên website được thực hiện dễ dàng bằng CSS. Dưới đây là một số ví dụ cơ bản:
Thiết Lập Màu Chữ (Phần Tử Cụ Thể)
Để đặt màu cho văn bản bên trong một phần tử HTML cụ thể, bạn sử dụng thuộc tính color trong thẻ style hoặc một file CSS riêng. Ví dụ, đặt màu chữ cho một đoạn văn bản thành màu đỏ:
<p style="color: #FF0000;">Đây là đoạn văn bản màu đỏ.</p>Thiết Lập Màu Chữ (Tất Cả Các Phần Tử Cùng Loại)
Nếu bạn muốn tất cả các phần tử cùng loại (ví dụ: tất cả các đoạn <p>) có cùng màu, bạn có thể định nghĩa trong thẻ <style> ở đầu file HTML hoặc trong file CSS.
<style>
p {
color: #FF0000; /* Hoặc color: red; */
}
</style>
<p>Tất cả đoạn văn này sẽ có màu đỏ.</p>
<p>Đoạn văn bản khác cũng màu đỏ.</p>Đặt Màu Nền Cho Phần Tử
Thuộc tính background-color được dùng để thiết lập màu nền cho một phần tử. Ví dụ, đặt màu nền cho một đoạn văn bản thành màu đỏ nhạt:
<p style="background-color: #F08080;">Đoạn văn bản này có nền màu đỏ nhạt.</p>Hoặc áp dụng cho tất cả đoạn <p>:
<style>
p {
background-color: #F08080; /* Hoặc background-color: lightcoral; */
}
</style>Đặt Màu Đường Viền Phần Tử
Bạn có thể đặt màu cho đường viền của một phần tử bằng thuộc tính border-color. Thuộc tính này có thể nhận một hoặc nhiều giá trị để thiết lập màu cho từng cạnh (trên, phải, dưới, trái).
Ví dụ, đặt màu đường viền cho một đoạn văn bản thành đỏ, xanh lá, xanh dương và đen:
<p style="border: 1px solid; border-color: red green blue black;">Đoạn văn bản với đường viền nhiều màu.</p>Hoặc áp dụng cho tất cả đoạn <p>:
<style>
p {
border: 1px solid; /* Định nghĩa kiểu và độ dày đường viền */
border-color: red green blue black;
}
</style>Hiểu rõ các mã màu và cách áp dụng chúng trong CSS là kỹ năng cơ bản nhưng quan trọng trong thiết kế. Việc có trong tay các bảng mã màu chi tiết như trên sẽ giúp bạn làm việc hiệu quả hơn, đặc biệt khi cần sử dụng những sắc thái màu cụ thể như mã màu vàng hay các gam màu khác để tạo nên các thiết kế ấn tượng, ví dụ như thiết kế bao bì sản phẩm hoặc ấn phẩm quảng cáo cho ảnh sự kiện. Đôi khi, việc lựa chọn màu sắc còn thể hiện cảm xúc cá nhân, giống như cách lựa chọn màu cho hình ảnh nắm tay người yêu đẹp hay ảnh nắm tay đẹp tự chụp để truyền tải sự ấm áp và gần gũi.
Nguồn tham khảo: Tiêu chuẩn màu sắc HTML/CSS