Danh sách sau chứa 216 màu sắc an toàn được sử dụng trong thiết kế giao diện Web. Mỗi màu đều chứa mã màu HEX và RGB để bạn có thể dễ dàng copy sử dụng cho trang web của mình.
| Color name | Hex | Red | Green | Blue | Hue | Saturation | Lightness |
|---|---|---|---|---|---|---|---|
| #000000 | #000000 | 0 | 0 | 0 | 0° | 0% | 0% |
| #000033 | #000033 | 0 | 0 | 51 | 240° | 100% | 10% |
| #000066 | #000066 | 0 | 0 | 102 | 240° | 100% | 20% |
| #000099 | #000099 | 0 | 0 | 153 | 240° | 100% | 30% |
| #0000cc | #0000cc | 0 | 0 | 204 | 240° | 100% | 40% |
| #0000ff | #0000ff | 0 | 0 | 255 | 240° | 100% | 50% |
| #003300 | #003300 | 0 | 51 | 0 | 120° | 100% | 10% |
| #003333 | #003333 | 0 | 51 | 51 | 180° | 100% | 10% |
| #003366 | #003366 | 0 | 51 | 102 | 210° | 100% | 20% |
| #003399 | #003399 | 0 | 51 | 153 | 220° | 100% | 30% |
| #0033cc | #0033cc | 0 | 51 | 204 | 225° | 100% | 40% |
| #0033ff | #0033ff | 0 | 51 | 255 | 228° | 100% | 50% |
| #006600 | #006600 | 0 | 102 | 0 | 120° | 100% | 20% |
| #006633 | #006633 | 0 | 102 | 51 | 150° | 100% | 20% |
| #006666 | #006666 | 0 | 102 | 102 | 180° | 100% | 20% |
| #006699 | #006699 | 0 | 102 | 153 | 200° | 100% | 30% |
| #0066cc | #0066cc | 0 | 102 | 204 | 210° | 100% | 40% |
| #0066ff | #0066ff | 0 | 102 | 255 | 216° | 100% | 50% |
| #009900 | #009900 | 0 | 153 | 0 | 120° | 100% | 30% |
| #009933 | #009933 | 0 | 153 | 51 | 140° | 100% | 30% |
| #009966 | #009966 | 0 | 153 | 102 | 160° | 100% | 30% |
| #009999 | #009999 | 0 | 153 | 153 | 180° | 100% | 30% |
| #0099cc | #0099cc | 0 | 153 | 204 | 195° | 100% | 40% |
| #0099ff | #0099ff | 0 | 153 | 255 | 204° | 100% | 50% |
| #00cc00 | #00cc00 | 0 | 204 | 0 | 120° | 100% | 40% |
| #00cc33 | #00cc33 | 0 | 204 | 51 | 135° | 100% | 40% |
| #00cc66 | #00cc66 | 0 | 204 | 102 | 150° | 100% | 40% |
| #00cc99 | #00cc99 | 0 | 204 | 153 | 165° | 100% | 40% |
| #00cccc | #00cccc | 0 | 204 | 204 | 180° | 100% | 40% |
| #00ccff | #00ccff | 0 | 204 | 255 | 192° | 100% | 50% |
| #00ff00 | #00ff00 | 0 | 255 | 0 | 120° | 100% | 50% |
| #00ff33 | #00ff33 | 0 | 255 | 51 | 132° | 100% | 50% |
| #00ff66 | #00ff66 | 0 | 255 | 102 | 144° | 100% | 50% |
| #00ff99 | #00ff99 | 0 | 255 | 153 | 156° | 100% | 50% |
| #00ffcc | #00ffcc | 0 | 255 | 204 | 168° | 100% | 50% |
| #00ffff | #00ffff | 0 | 255 | 255 | 180° | 100% | 50% |
| #330000 | #330000 | 51 | 0 | 0 | 0° | 100% | 10% |
| #330033 | #330033 | 51 | 0 | 51 | 300° | 100% | 10% |
| #330066 | #330066 | 51 | 0 | 102 | 270° | 100% | 20% |
| #330099 | #330099 | 51 | 0 | 153 | 260° | 100% | 30% |
| #3300cc | #3300cc | 51 | 0 | 204 | 255° | 100% | 40% |
| #3300ff | #3300ff | 51 | 0 | 255 | 252° | 100% | 50% |
| #333300 | #333300 | 51 | 51 | 0 | 60° | 100% | 10% |
| #333333 | #333333 | 51 | 51 | 51 | 0° | 0% | 20% |
| #333366 | #333366 | 51 | 51 | 102 | 240° | 33.3% | 30% |
| #333399 | #333399 | 51 | 51 | 153 | 240° | 50% | 40% |
| #3333cc | #3333cc | 51 | 51 | 204 | 240° | 60% | 50% |
| #3333ff | #3333ff | 51 | 51 | 255 | 240° | 100% | 60% |
| #336600 | #336600 | 51 | 102 | 0 | 90° | 100% | 20% |
| #336633 | #336633 | 51 | 102 | 51 | 120° | 33.3% | 30% |
| #336666 | #336666 | 51 | 102 | 102 | 180° | 33.3% | 30% |
| #336699 | #336699 | 51 | 102 | 153 | 210° | 50% | 40% |
| #3366cc | #3366cc | 51 | 102 | 204 | 220° | 60% | 50% |
| #3366ff | #3366ff | 51 | 102 | 255 | 225° | 100% | 60% |
| #339900 | #339900 | 51 | 153 | 0 | 100° | 100% | 30% |
| #339933 | #339933 | 51 | 153 | 51 | 120° | 50% | 40% |
| #339966 | #339966 | 51 | 153 | 102 | 150° | 50% | 40% |
| #339999 | #339999 | 51 | 153 | 153 | 180° | 50% | 40% |
| #3399cc | #3399cc | 51 | 153 | 204 | 200° | 60% | 50% |
| #3399ff | #3399ff | 51 | 153 | 255 | 210° | 100% | 60% |
| #33cc00 | #33cc00 | 51 | 204 | 0 | 105° | 100% | 40% |
| #33cc33 | #33cc33 | 51 | 204 | 51 | 120° | 60% | 50% |
| #33cc66 | #33cc66 | 51 | 204 | 102 | 140° | 60% | 50% |
| #33cc99 | #33cc99 | 51 | 204 | 153 | 160° | 60% | 50% |
| #33cccc | #33cccc | 51 | 204 | 204 | 180° | 60% | 50% |
| #33ccff | #33ccff | 51 | 204 | 255 | 195° | 100% | 60% |
| #33ff00 | #33ff00 | 51 | 255 | 0 | 108° | 100% | 50% |
| #33ff33 | #33ff33 | 51 | 255 | 51 | 120° | 100% | 60% |
| #33ff66 | #33ff66 | 51 | 255 | 102 | 135° | 100% | 60% |
| #33ff99 | #33ff99 | 51 | 255 | 153 | 150° | 100% | 60% |
| #33ffcc | #33ffcc | 51 | 255 | 204 | 165° | 100% | 60% |
| #33ffff | #33ffff | 51 | 255 | 255 | 180° | 100% | 60% |
| #660000 | #660000 | 102 | 0 | 0 | 0° | 100% | 20% |
| #660033 | #660033 | 102 | 0 | 51 | 330° | 100% | 20% |
| #660066 | #660066 | 102 | 0 | 102 | 300° | 100% | 20% |
| #660099 | #660099 | 102 | 0 | 153 | 280° | 100% | 30% |
| #6600cc | #6600cc | 102 | 0 | 204 | 270° | 100% | 40% |
| #6600ff | #6600ff | 102 | 0 | 255 | 264° | 100% | 50% |
| #663300 | #663300 | 102 | 51 | 0 | 30° | 100% | 20% |
| #663333 | #663333 | 102 | 51 | 51 | 0° | 33.3% | 30% |
| #663366 | #663366 | 102 | 51 | 102 | 300° | 33.3% | 30% |
| #663399 | #663399 | 102 | 51 | 153 | 270° | 50% | 40% |
| #6633cc | #6633cc | 102 | 51 | 204 | 260° | 60% | 50% |
| #6633ff | #6633ff | 102 | 51 | 255 | 255° | 100% | 60% |
| #666600 | #666600 | 102 | 102 | 0 | 60° | 100% | 20% |
| #666633 | #666633 | 102 | 102 | 51 | 60° | 33.3% | 30% |
| #666666 | #666666 | 102 | 102 | 102 | 0° | 0% | 40% |
| #666699 | #666699 | 102 | 102 | 153 | 240° | 20% | 50% |
| #6666cc | #6666cc | 102 | 102 | 204 | 240° | 50% | 60% |
| #6666ff | #6666ff | 102 | 102 | 255 | 240° | 100% | 70% |
| #669900 | #669900 | 102 | 153 | 0 | 80° | 100% | 30% |
| #669933 | #669933 | 102 | 153 | 51 | 90° | 50% | 40% |
| #669966 | #669966 | 102 | 153 | 102 | 120° | 20% | 50% |
| #669999 | #669999 | 102 | 153 | 153 | 180° | 20% | 50% |
| #6699cc | #6699cc | 102 | 153 | 204 | 210° | 50% | 60% |
| #6699ff | #6699ff | 102 | 153 | 255 | 220° | 100% | 70% |
| #66cc00 | #66cc00 | 102 | 204 | 0 | 90° | 100% | 40% |
| #66cc33 | #66cc33 | 102 | 204 | 51 | 100° | 60% | 50% |
| #66cc66 | #66cc66 | 102 | 204 | 102 | 120° | 50% | 60% |
| #66cc99 | #66cc99 | 102 | 204 | 153 | 150° | 50% | 60% |
| #66cccc | #66cccc | 102 | 204 | 204 | 180° | 50% | 60% |
| #66ccff | #66ccff | 102 | 204 | 255 | 200° | 100% | 70% |
| #66ff00 | #66ff00 | 102 | 255 | 0 | 96° | 100% | 50% |
| #66ff33 | #66ff33 | 102 | 255 | 51 | 105° | 100% | 60% |
| #66ff66 | #66ff66 | 102 | 255 | 102 | 120° | 100% | 70% |
| #66ff99 | #66ff99 | 102 | 255 | 153 | 140° | 100% | 70% |
| #66ffcc | #66ffcc | 102 | 255 | 204 | 160° | 100% | 70% |
| #66ffff | #66ffff | 102 | 255 | 255 | 180° | 100% | 70% |
| #990000 | #990000 | 153 | 0 | 0 | 0° | 100% | 30% |
| #990033 | #990033 | 153 | 0 | 51 | 340° | 100% | 30% |
| #990066 | #990066 | 153 | 0 | 102 | 320° | 100% | 30% |
| #990099 | #990099 | 153 | 0 | 153 | 300° | 100% | 30% |
| #9900cc | #9900cc | 153 | 0 | 204 | 285° | 100% | 40% |
| #9900ff | #9900ff | 153 | 0 | 255 | 276° | 100% | 50% |
| #993300 | #993300 | 153 | 51 | 0 | 20° | 100% | 30% |
| #993333 | #993333 | 153 | 51 | 51 | 0° | 50% | 40% |
| #993366 | #993366 | 153 | 51 | 102 | 330° | 50% | 40% |
| #993399 | #993399 | 153 | 51 | 153 | 300° | 50% | 40% |
| #9933cc | #9933cc | 153 | 51 | 204 | 280° | 60% | 50% |
| #9933ff | #9933ff | 153 | 51 | 255 | 270° | 100% | 60% |
| #996600 | #996600 | 153 | 102 | 0 | 40° | 100% | 30% |
| #996633 | #996633 | 153 | 102 | 51 | 30° | 50% | 40% |
| #996666 | #996666 | 153 | 102 | 102 | 0° | 20% | 50% |
| #996699 | #996699 | 153 | 102 | 153 | 300° | 20% | 50% |
| #9966cc | #9966cc | 153 | 102 | 204 | 270° | 50% | 60% |
| #9966ff | #9966ff | 153 | 102 | 255 | 260° | 100% | 70% |
| #999900 | #999900 | 153 | 153 | 0 | 60° | 100% | 30% |
| #999933 | #999933 | 153 | 153 | 51 | 60° | 50% | 40% |
| #999966 | #999966 | 153 | 153 | 102 | 60° | 20% | 50% |
| #999999 | #999999 | 153 | 153 | 153 | 0° | 0% | 60% |
| #9999cc | #9999cc | 153 | 153 | 204 | 240° | 33.3% | 70% |
| #9999ff | #9999ff | 153 | 153 | 255 | 240° | 100% | 80% |
| #99cc00 | #99cc00 | 153 | 204 | 0 | 75° | 100% | 40% |
| #99cc33 | #99cc33 | 153 | 204 | 51 | 80° | 60% | 50% |
| #99cc66 | #99cc66 | 153 | 204 | 102 | 90° | 50% | 60% |
| #99cc99 | #99cc99 | 153 | 204 | 153 | 120° | 33.3% | 70% |
| #99cccc | #99cccc | 153 | 204 | 204 | 180° | 33.3% | 70% |
| #99ccff | #99ccff | 153 | 204 | 255 | 210° | 100% | 80% |
| #99ff00 | #99ff00 | 153 | 255 | 0 | 84° | 100% | 50% |
| #99ff33 | #99ff33 | 153 | 255 | 51 | 90° | 100% | 60% |
| #99ff66 | #99ff66 | 153 | 255 | 102 | 100° | 100% | 70% |
| #99ff99 | #99ff99 | 153 | 255 | 153 | 120° | 100% | 80% |
| #99ffcc | #99ffcc | 153 | 255 | 204 | 150° | 100% | 80% |
| #99ffff | #99ffff | 153 | 255 | 255 | 180° | 100% | 80% |
| #cc0000 | #cc0000 | 204 | 0 | 0 | 0° | 100% | 40% |
| #cc0033 | #cc0033 | 204 | 0 | 51 | 345° | 100% | 40% |
| #cc0066 | #cc0066 | 204 | 0 | 102 | 330° | 100% | 40% |
| #cc0099 | #cc0099 | 204 | 0 | 153 | 315° | 100% | 40% |
| #cc00cc | #cc00cc | 204 | 0 | 204 | 300° | 100% | 40% |
| #cc00ff | #cc00ff | 204 | 0 | 255 | 288° | 100% | 50% |
| #cc3300 | #cc3300 | 204 | 51 | 0 | 15° | 100% | 40% |
| #cc3333 | #cc3333 | 204 | 51 | 51 | 0° | 60% | 50% |
| #cc3366 | #cc3366 | 204 | 51 | 102 | 340° | 60% | 50% |
| #cc3399 | #cc3399 | 204 | 51 | 153 | 320° | 60% | 50% |
| #cc33cc | #cc33cc | 204 | 51 | 204 | 300° | 60% | 50% |
| #cc33ff | #cc33ff | 204 | 51 | 255 | 285° | 100% | 60% |
| #cc6600 | #cc6600 | 204 | 102 | 0 | 30° | 100% | 40% |
| #cc6633 | #cc6633 | 204 | 102 | 51 | 20° | 60% | 50% |
| #cc6666 | #cc6666 | 204 | 102 | 102 | 0° | 50% | 60% |
| #cc6699 | #cc6699 | 204 | 102 | 153 | 330° | 50% | 60% |
| #cc66cc | #cc66cc | 204 | 102 | 204 | 300° | 50% | 60% |
| #cc66ff | #cc66ff | 204 | 102 | 255 | 280° | 100% | 70% |
| #cc9900 | #cc9900 | 204 | 153 | 0 | 45° | 100% | 40% |
| #cc9933 | #cc9933 | 204 | 153 | 51 | 40° | 60% | 50% |
| #cc9966 | #cc9966 | 204 | 153 | 102 | 30° | 50% | 60% |
| #cc9999 | #cc9999 | 204 | 153 | 153 | 0° | 33.3% | 70% |
| #cc99cc | #cc99cc | 204 | 153 | 204 | 300° | 33.3% | 70% |
| #cc99ff | #cc99ff | 204 | 153 | 255 | 270° | 100% | 80% |
| #cccc00 | #cccc00 | 204 | 204 | 0 | 60° | 100% | 40% |
| #cccc33 | #cccc33 | 204 | 204 | 51 | 60° | 60% | 50% |
| #cccc66 | #cccc66 | 204 | 204 | 102 | 60° | 50% | 60% |
| #cccc99 | #cccc99 | 204 | 204 | 153 | 60° | 33.3% | 70% |
| #cccccc | #cccccc | 204 | 204 | 204 | 0° | 0% | 80% |
| #ccccff | #ccccff | 204 | 204 | 255 | 240° | 100% | 90% |
| #ccff00 | #ccff00 | 204 | 255 | 0 | 72° | 100% | 50% |
| #ccff33 | #ccff33 | 204 | 255 | 51 | 75° | 100% | 60% |
| #ccff66 | #ccff66 | 204 | 255 | 102 | 80° | 100% | 70% |
| #ccff99 | #ccff99 | 204 | 255 | 153 | 90° | 100% | 80% |
| #ccffcc | #ccffcc | 204 | 255 | 204 | 120° | 100% | 90% |
| #ccffff | #ccffff | 204 | 255 | 255 | 180° | 100% | 90% |
| #ff0000 | #ff0000 | 255 | 0 | 0 | 0° | 100% | 50% |
| #ff0033 | #ff0033 | 255 | 0 | 51 | 348° | 100% | 50% |
| #ff0066 | #ff0066 | 255 | 0 | 102 | 336° | 100% | 50% |
| #ff0099 | #ff0099 | 255 | 0 | 153 | 324° | 100% | 50% |
| #ff00cc | #ff00cc | 255 | 0 | 204 | 312° | 100% | 50% |
| #ff00ff | #ff00ff | 255 | 0 | 255 | 300° | 100% | 50% |
| #ff3300 | #ff3300 | 255 | 51 | 0 | 12° | 100% | 50% |
| #ff3333 | #ff3333 | 255 | 51 | 51 | 0° | 100% | 60% |
| #ff3366 | #ff3366 | 255 | 51 | 102 | 345° | 100% | 60% |
| #ff3399 | #ff3399 | 255 | 51 | 153 | 330° | 100% | 60% |
| #ff33cc | #ff33cc | 255 | 51 | 204 | 315° | 100% | 60% |
| #ff33ff | #ff33ff | 255 | 51 | 255 | 300° | 100% | 60% |
| #ff6600 | #ff6600 | 255 | 102 | 0 | 24° | 100% | 50% |
| #ff6633 | #ff6633 | 255 | 102 | 51 | 15° | 100% | 60% |
| #ff6666 | #ff6666 | 255 | 102 | 102 | 0° | 100% | 70% |
| #ff6699 | #ff6699 | 255 | 102 | 153 | 340° | 100% | 70% |
| #ff66cc | #ff66cc | 255 | 102 | 204 | 320° | 100% | 70% |
| #ff66ff | #ff66ff | 255 | 102 | 255 | 300° | 100% | 70% |
| #ff9900 | #ff9900 | 255 | 153 | 0 | 36° | 100% | 50% |
| #ff9933 | #ff9933 | 255 | 153 | 51 | 30° | 100% | 60% |
| #ff9966 | #ff9966 | 255 | 153 | 102 | 20° | 100% | 70% |
| #ff9999 | #ff9999 | 255 | 153 | 153 | 0° | 100% | 80% |
| #ff99cc | #ff99cc | 255 | 153 | 204 | 330° | 100% | 80% |
| #ff99ff | #ff99ff | 255 | 153 | 255 | 300° | 100% | 80% |
| #ffcc00 | #ffcc00 | 255 | 204 | 0 | 48° | 100% | 50% |
| #ffcc33 | #ffcc33 | 255 | 204 | 51 | 45° | 100% | 60% |
| #ffcc66 | #ffcc66 | 255 | 204 | 102 | 40° | 100% | 70% |
| #ffcc99 | #ffcc99 | 255 | 204 | 153 | 30° | 100% | 80% |
| #ffcccc | #ffcccc | 255 | 204 | 204 | 0° | 100% | 90% |
| #ffccff | #ffccff | 255 | 204 | 255 | 300° | 100% | 90% |
| #ffff00 | #ffff00 | 255 | 255 | 0 | 60° | 100% | 50% |
| #ffff33 | #ffff33 | 255 | 255 | 51 | 60° | 100% | 60% |
| #ffff66 | #ffff66 | 255 | 255 | 102 | 60° | 100% | 70% |
| #ffff99 | #ffff99 | 255 | 255 | 153 | 60° | 100% | 80% |
| #ffffcc | #ffffcc | 255 | 255 | 204 | 60° | 100% | 90% |
| #ffffff | #ffffff | 255 | 255 | 255 | 0° | 0% | 100% |
Trích dẫn bài viết
- APA:
Dammio. (2018). Danh sách 216 màu sắc an toàn trong thiết kế giao diện Web. https://www.dammio.com/2018/05/27/danh-sach-216-mau-sac-an-toan-cho-thiet-ke-giao-dien-web. - BibTeX:
@misc{dammio,
author = {Dammio},
title = {Danh sách 216 màu sắc an toàn trong thiết kế giao diện Web},
year = {2018},
url = {https://www.dammio.com/2018/05/27/danh-sach-216-mau-sac-an-toan-cho-thiet-ke-giao-dien-web},
urldate = {2024-05-04}
}
![[HTML/HTML5] Phần 29: URL trong HTML](https://www.dammio.com/wp-content/uploads/2017/10/url_html-410x260.jpg "[HTML/HTML5] Phần 29: URL trong HTML")
![[HTML/HTML5] Phần 22: Đường dẫn tập tin](https://www.dammio.com/wp-content/uploads/2017/06/html-1-410x260.jpg "[HTML/HTML5] Phần 22: Đường dẫn tập tin")
![[AngularJS] Phần 21: Hoạt hình trong AngularJS](https://www.dammio.com/wp-content/uploads/2017/09/ngActivityIndicator-410x260.png "[AngularJS] Phần 21: Hoạt hình trong AngularJS")
![[AngularJS] Phần 16: Sự kiện AngularJS](https://www.dammio.com/wp-content/uploads/2017/01/banner-angularjs-410x260.jpg "[AngularJS] Phần 16: Sự kiện AngularJS")
đúng là màu sắc muôn màu mà, có nhiều màu thì có nhiều lựa chon cho giao diện web của mình, cảm ơn bạn nhiều.