Bảng mã màu HTML, CSS: 148 tên màu và mã HEX tương ứng

Bảng mã màu HTML, CSS: đủ 148 tên màu CSS (tomato, navy, gold...) kèm mã HEX, RGB, HSL, xếp theo nhóm màu và đối chiếu với chuẩn W3C CSS Color 4. Lịch sử 16 màu gốc, 4 cách viết màu trong CSS, cặp tên trùng mã, chỗ dễ nhầm và cách đổi tên màu sang HEX bằng công cụ.

Trả lời nhanh: CSS (và HTML) có 148 tên màu dùng được trực tiếp, như tomato, navy, gold; mỗi tên ứng với đúng một mã HEX, ví dụ tomato là #FF6347. Trong 148 tên có 9 cặp trùng mã (aqua/cyan, fuchsia/magenta và 7 cặp gray/grey), nên thực tế có 139 màu khác nhau; vì vậy nhiều bảng trên mạng ghi "140 màu". Bảng đầy đủ 148 tên với mã HEX, RGB, HSL nằm ở cuối bài.

Mã HEX của từng tên được đọc từ công cụ Đổi mã màu của ColorME (gõ từng tên vào ô nhập, ngày 18/10/2026) và mình đối chiếu lại với bảng màu chính thức trong W3C CSS Color Module Level 4 ngày 20/10/2026: khớp đủ 148 trên 148. Phần lịch sử và các cặp tên trùng mã lấy từ W3C và MDN Web Docs.

148 tên màu CSS xếp theo nhóm màu kèm mã HEX; khớp bảng W3C CSS Color 4 ngày 20/10/2026. Bảng ColorME.

Tên màu CSS là gì?

Tên màu (named color) là từ khoá tiếng Anh mà trình duyệt hiểu là một màu cố định. Thay vì viết color: #FF6347;, bạn viết color: tomato; và trình duyệt hiển thị đúng màu đó. W3C viết: "CSS defines a large set of named colors, so that common colors can be written and read more easily." Tức là CSS định nghĩa sẵn một bộ tên màu để màu thường dùng dễ viết, dễ đọc hơn.

Ba điều cần biết về tên màu, theo W3C và MDN:

• Không phân biệt chữ hoa, chữ thường: W3C ghi các từ khoá này "are ASCII case-insensitive". Viết Tomato, TOMATO hay tomato đều như nhau.
• Đều thuộc không gian màu sRGB: W3C ghi "The names resolve to colors in sRGB", MDN cũng viết "All names specify a color in the sRGB color space". Đây là không gian màu chuẩn của màn hình, ảnh web.
• Đều là màu đặc, không trong suốt: MDN ghi "The color keywords all represent plain, solid colors without transparency." Muốn màu trong suốt thì dùng rgb() có kênh alpha hoặc từ khoá riêng transparent.

Vì sao tên màu nghe lạ: chút lịch sử

Theo W3C, 16 tên màu CSS ban đầu đến từ bảng màu VGA rồi được HTML dùng: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white và yellow. Phần lớn tên còn lại đến từ hệ màu X11 (dùng trên các hệ máy kiểu Unix), sau đó được SVG đưa vào. MDN kể thêm: các tên này được chuẩn hoá trong SVG 1 rồi CSS Colors Level 3, và đến CSS Colors Level 4 có thêm màu rebeccapurple (#663399); MDN ghi màu này "was added to honor web pioneer Eric Meyer", tức để vinh danh Eric Meyer, một người tiên phong của web.

16 tên màu gốc của HTML, có từ bảng màu VGA, theo W3C. Sơ đồ ColorME.

W3C viết khá thẳng: các tên này được chuẩn hoá "not because they are good, but because their use and implementation has been widespread for decades". Nghĩa là tên màu không được đặt theo một hệ thống khoa học; nhiều tên đọc lên không đúng với cảm nhận màu (xem phần chỗ dễ nhầm bên dưới). MDN cũng ghi các tên "are essentially artificial, without a strict rationale behind the terms used".

4 cách viết một màu trong CSS

Tên màu chỉ là một trong nhiều cách viết. Cùng màu tomato có thể viết:

Cùng màu tomato viết bằng tên, HEX, RGB, HSL. Sơ đồ ColorME.

Mã HEX gồm 6 ký tự là 3 cặp số hệ 16 cho đỏ, xanh lá, xanh dương: FF = 255, 63 = 99, 47 = 71. Nếu bạn chưa quen cách đọc HEX, bài mã màu HEX là gì giải thích chi tiết; còn khác nhau giữa RGB cho màn hình và CMYK cho in, xem bài hệ màu CMYK và RGB.

Đổi tên màu sang HEX, RGB, CMYK bằng công cụ

Bạn không cần thuộc bảng: gõ tên màu vào công cụ Đổi mã màu của ColorME là ra ngay các mã khác. Phần câu hỏi thường gặp của trang công cụ (đọc ngày 20/10/2026) ghi công cụ nhận "HEX (#rgb, #rrggbb, #rrggbbaa, có hoặc không có dấu #), rgb(), hsl(), hsv(), cmyk(), oklch() hoặc tên màu CSS như tomato, navy", và "Kết quả xuất ra HEX, RGB, HSL, HSV, CMYK, OKLCH và một biến CSS".

Gõ tên màu tomato vào công cụ Đổi mã màu của ColorME để nhận HEX, RGB, HSL, CMYK. Ảnh chụp màn hình thật ngày 18/10/2026.

1. Gõ tên màu (ví dụ tomato) vào ô "Mã màu của bạn".
2. Công cụ hiện mã HEX, RGB, HSL, HSV, CMYK, OKLCH.
3. Bấm ô cần dùng để sao chép, dán vào Figma, Photoshop hoặc file CSS. Trang công cụ ghi "Figma và Photoshop nhận trực tiếp mã HEX."

Hai điều trang công cụ nói rõ: về chi phí, "Hoàn toàn miễn phí, không cần đăng nhập và không giới hạn số lần dùng"; về dữ liệu, "Việc chuyển đổi chạy ngay trên trình duyệt của bạn. ColorME chỉ ghi nhận lượt dùng kèm mã màu bạn đổi hoặc sao chép để thống kê, không cần tài khoản." Về đổi sang CMYK để in, trang ghi đây là công thức chuyển đổi chuẩn "đủ để tham khảo và trao đổi", còn màu in thật phụ thuộc hồ sơ màu, giấy và máy in, "nên hãy in thử trước khi in số lượng lớn".

6 chỗ dễ nhầm khi gõ tên màu

Vì tên màu đến từ lịch sử chứ không theo hệ thống, có vài chỗ dễ nhầm:

6 chỗ dễ nhầm khi gõ tên màu CSS, mã theo W3C và MDN. Bảng ColorME.

• darkgray sáng hơn gray: darkgray là #A9A9A9, còn gray là #808080, tối hơn dù tên không có chữ dark.
• violet không phải tím đậm: violet (#EE82EE) là tím hồng nhạt; tím đậm gần với blueviolet (#8A2BE2) hoặc darkviolet (#9400D3).
• lavender gần như trắng: lavender là #E6E6FA, nhạt hơn nhiều so với màu hoa oải hương ngoài đời.
• aqua và cyan là một: cùng #00FFFF; tương tự fuchsia và magenta cùng #FF00FF. MDN liệt kê các cặp này là tên trùng nhau (aliases).
• gray hay grey đều được: MDN liệt kê 7 cặp tên xám viết hai kiểu, cùng một mã: gray/grey, darkgray/darkgrey, darkslategray/darkslategrey, dimgray/dimgrey, lightgray/lightgrey, lightslategray/lightslategrey, slategray/slategrey.
• green không phải xanh lá tươi: green là #008000 (khá tối); xanh lá rực #00FF00 có tên là lime.

Mẹo thường gặp: khi dùng tên màu cho một thiết kế thật, hãy chép mã HEX ra và dùng mã đó trong hệ màu của dự án, để không bị phụ thuộc vào cách đặt tên khó đoán.

Có nên dùng tên màu trong thiết kế thật không?

Tên màu tiện để học, làm mẫu, ghi chú nhanh. Nhưng trong một bộ nhận diện hay giao diện thật, người làm nghề thường dùng mã HEX hoặc biến màu riêng (thường gặp), vì:

• 148 tên là quá ít so với dải màu bạn cần; màu thương hiệu hiếm khi trùng đúng một tên CSS.
• Tên màu không cho biết màu sáng hay tối, đậm hay nhạt một cách nhất quán (darkgray sáng hơn gray).
• Khi cần đổi sắc độ cả hệ màu, dùng mã HEX hoặc biến CSS dễ quản lý hơn.

Muốn xây bảng màu cho dự án, bạn có thể bắt đầu từ một màu chủ đạo rồi dùng bánh xe màu tìm màu đi kèm, kiểm tra chữ trên nền bằng Kiểm tra tương phản. Các bài bảng màu theo từng sắc của ColorME như bảng màu xám, bảng màu tím, bảng màu vàng có thêm nhiều mã ngoài 148 tên CSS.

Cách dùng tên màu trong HTML, CSS

Ví dụ đơn giản (cách viết thường gặp):

• Chữ màu đỏ cà chua: p { color: tomato; }
• Nền xanh navy, chữ trắng: .box { background: navy; color: white; }
• Viền xám nhạt: .card { border: 1px solid lightgray; }
• Trong thuộc tính style của HTML: <p style="color: teal">

Khi dùng màu cho chữ, hãy kiểm tra độ tương phản: yellow trên nền trắng hay lightgray trên nền trắng gần như không đọc được. Muốn học bài bản về màu và giao diện, bạn có thể tham khảo khoá UI/UX của ColorME.

Bảng mã màu HTML, CSS đầy đủ: 148 tên theo nhóm màu

Bảng dưới xếp 148 tên màu CSS theo nhóm màu để dễ tìm (cách chia nhóm là của ColorME, W3C xếp theo bảng chữ cái). Giá trị HEX, RGB, HSL đọc từ công cụ Đổi mã màu của ColorME và khớp với bảng W3C.

Câu hỏi thường gặp

CSS có bao nhiêu tên màu?

148 tên màu, theo bảng của W3C CSS Color Module Level 4. Có 9 cặp tên trùng mã (aqua/cyan, fuchsia/magenta và 7 cặp gray/grey), nên thực tế có 139 màu khác nhau.

Mã màu HTML và mã màu CSS có khác nhau không?

Không. Tên màu và mã HEX dùng trong thuộc tính style của HTML hay trong file CSS là như nhau, vì cả hai đều do trình duyệt hiểu theo chuẩn CSS.

Tên màu CSS có phân biệt chữ hoa, chữ thường không?

Không. W3C ghi các tên màu là "ASCII case-insensitive", nên Tomato, TOMATO hay tomato đều cho cùng một màu.

Làm sao đổi tên màu sang mã HEX?

Tra bảng trong bài, hoặc gõ tên màu vào công cụ Đổi mã màu của ColorME: công cụ hiện ngay HEX, RGB, HSL, HSV, CMYK và OKLCH để sao chép.

Màu rebeccapurple là gì?

Là tên màu #663399, được thêm vào CSS Colors Level 4 để vinh danh Eric Meyer, một người tiên phong của web, theo MDN.