Mã màu là chuỗi ký tự mô tả một màu bằng con số để máy tính và trình duyệt hiển thị đúng màu đó, hoặc để máy in tái tạo gần đúng nhất trong khả năng của mực và giấy. Cùng một màu có thể viết ở nhiều hệ: HEX và RGB cho màn hình và HTML/CSS, HSL để chỉnh sắc độ trực quan, CMYK cho in ấn. Ví dụ màu đỏ cam viết là #FF5733, rgb(255, 87, 51), hsl(11, 100%, 60%) hoặc cmyk(0%, 66%, 80%, 0%).

So sánh các hệ mã màu HEX, RGB, HSL, CMYK

Cú pháp và phạm vi sử dụng của bốn hệ mã màu phổ biến
Hệ màu	Cú pháp	Khoảng giá trị	Dùng khi
HEX	`#RRGGBB`	Mỗi cặp từ 00 đến FF (hệ 16)	HTML, CSS, công cụ thiết kế; ngắn gọn, dễ sao chép
RGB	`rgb(R, G, B)`	Mỗi kênh từ 0 đến 255	CSS, lập trình, khi cần thêm độ trong suốt bằng `rgb(R G B / 50%)`
HSL	`hsl(H, S%, L%)`	H: 0–360°, S và L: 0–100%	Tạo biến thể sáng, tối, nhạt của cùng một màu trong CSS
CMYK	`C% M% Y% K%`	Mỗi kênh mực từ 0 đến 100%	In ấn: danh thiếp, bao bì, tờ rơi. Không dùng được trong CSS

HEX và RGB là hai cách viết của cùng một giá trị: FF trong hệ 16 bằng 255 trong hệ 10, nên #FF5733 chính là rgb(255, 87, 51). Hệ RGB 8 bit biểu diễn được 256 × 256 × 256 = 16.777.216 màu.

Cách dùng bảng màu

Gõ tên màu (ví dụ xanh navy, hồng pastel) hoặc dán một mã bất kỳ như #ff5733, rgb(255, 87, 51) vào ô tìm kiếm.
Chọn định dạng cần dùng: HEX, RGB, HSL hoặc CMYK. Toàn bộ bảng đổi sang định dạng đó.
Bấm vào ô màu để sao chép mã, rồi dán vào CSS, Canva, Photoshop, Figma hay Excel. Có sẵn ảnh hay logo? Dùng công cụ lấy mã màu từ ảnh.
Bấm vào tên màu để xem sắc độ đậm nhạt, màu tương phản và gợi ý phối màu của riêng màu đó.

Dùng mã màu trong HTML và CSS

Trong CSS, mã màu được gán cho các thuộc tính như color (màu chữ), background-color (màu nền) và border-color (màu viền). Ba dòng dưới đây cho cùng một kết quả:

.nut-dang-ky { background-color: #FF5733; }
.nut-dang-ky { background-color: rgb(255, 87, 51); }
.nut-dang-ky { background-color: hsl(11, 100%, 60%); }

Mã HEX không phân biệt chữ hoa, chữ thường. Mã có ba cặp ký tự giống nhau có thể viết tắt còn ba ký tự: #FFAA00 thành #FA0. Ngoài mã số, CSS còn có 148 tên màu chuẩn như tomato hay navy.

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

Tên màu CSS (named colors) là các từ khoá tiếng Anh mà trình duyệt hiểu như một mã màu cố định, ví dụ red là #FF0000 và navy là #000080. Chuẩn CSS Color Module Level 4 định nghĩa 148 tên, không phân biệt chữ hoa chữ thường và được mọi trình duyệt hiện đại hỗ trợ. Tên màu dùng được ở mọi thuộc tính nhận giá trị màu, kể cả fill và stroke của SVG:

h1 { color: tomato; }
.the { background-color: aliceblue; border: 1px solid steelblue; }

Vài điểm dễ nhầm:

Chín cặp tên trùng mã: aqua = cyan, fuchsia = magenta, và mọi tên chứa gray đều có bản grey. Vì vậy 148 tên chỉ ứng với 139 màu khác nhau.
darkgray sáng hơn gray: darkgray là #A9A9A9 còn gray là #808080 — di sản từ khi CSS gộp bộ 16 màu HTML 4 với bộ màu X11.
green không phải xanh lá thuần: green là #008000; xanh lá thuần #00FF00 có tên lime.

Tên màu dễ đọc, hợp cho bản nháp, ví dụ minh hoạ và gỡ lỗi nhanh. Màu thương hiệu thường nằm ngoài 148 tên này, nên sản phẩm thật vẫn nên dùng mã HEX hoặc biến CSS. Ngoài ra còn hai từ khoá đặc biệt: transparent (trong suốt) và currentcolor (lấy theo màu chữ hiện tại).

Màu nóng, màu lạnh và màu trung tính

Bộ lọc Tông màu phía trên chia bảng màu thành ba nhóm theo vị trí trên vòng tròn màu:

Cách phân loại tông màu trong bảng màu này
Tông	Gồm những màu	Cảm giác và cách dùng
Màu nóng	Đỏ, cam, vàng, hồng, nâu — sắc độ từ 315° qua 0° đến 75°	Ấm áp, năng động, như tiến lại gần người xem. Hợp cho nút kêu gọi hành động, ẩm thực, khuyến mãi
Màu lạnh	Xanh lá, xanh ngọc, xanh dương, tím — sắc độ từ 75° đến 315°	Dịu mát, tin cậy, như lùi ra xa. Hợp cho nền, công nghệ, y tế, tài chính
Màu trung tính	Đen, trắng, các sắc xám, be, kem, trắng ngà, nude — nhóm xám và nhóm trung tính của bảng	Không ngả nóng hay lạnh rõ rệt, phối được với mọi màu. Dùng cho chữ, nền và khoảng nghỉ

Ranh giới nóng – lạnh là quy ước: vàng chanh và hồng tím nằm sát ranh giới nên có thể cho cảm giác khác nhau tuỳ màu đặt cạnh. Một bố cục dễ chịu thường chọn một tông chủ đạo, thêm màu trung tính làm nền và một điểm nhấn thuộc tông đối lập. Muốn biết mỗi màu nên chiếm bao nhiêu diện tích, xem quy tắc 60-30-10.

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

Vì sao màu in ra khác màu trên màn hình?

Màn hình phát sáng theo hệ cộng màu RGB, còn máy in dùng mực theo hệ trừ màu CMYK với dải màu hẹp hơn. Các màu rực như xanh neon hay cam neon nằm ngoài dải CMYK nên khi in sẽ xỉn đi. Giá trị CMYK trên trang này là quy đổi lý thuyết; với bản in quan trọng, hãy chuyển hệ màu trong phần mềm thiết kế theo hồ sơ ICC của nhà in. Chi tiết từng bước có trong bài vì sao màu in ra khác màn hình.

Nên dùng HEX hay RGB trong CSS?

Hai cách cho kết quả giống hệt nhau. HEX ngắn và phổ biến trong tài liệu thiết kế; RGB và HSL tiện hơn khi cần độ trong suốt hoặc cần tính toán màu bằng biến CSS.

Bảng màu này có bao nhiêu màu?

Bảng gồm hơn 110 màu có tên tiếng Việt, chia thành 11 nhóm, cộng thêm 148 tên màu CSS chuẩn. Với màu nằm ngoài bảng, nhập mã vào ô tìm kiếm để xem đủ bốn định dạng, hoặc dùng color picker để chọn trực tiếp. Tên tiếng Anh và phiên âm của từng màu nằm ở bảng tên màu Anh – Việt.

Nguồn tham chiếu

W3C — CSS Color Module Level 4: cú pháp HEX, rgb(), hsl() và tên màu chuẩn.
Công thức chuyển đổi RGB ↔ HSL theo định nghĩa trong cùng tài liệu; CMYK quy đổi theo công thức bù màu cơ bản, không áp dụng hồ sơ ICC.

Cập nhật lần cuối: 24/09/2026 · Phương pháp và nguồn dữ liệu · Nhật ký cập nhật · Báo lỗi trang này

Bảng màu và bảng mã màu HEX, RGB, HTML

Nhóm màu đỏ 10 màu

Nhóm màu cam 10 màu

Nhóm màu vàng 10 màu

Nhóm màu xanh lá 12 màu

Nhóm màu xanh ngọc 5 màu

Nhóm màu xanh dương 12 màu

Nhóm màu tím 11 màu

Nhóm màu hồng 11 màu

Nhóm màu nâu 11 màu

Nhóm màu xám 9 màu

Nhóm màu đen, trắng và trung tính 10 màu

148 tên màu CSS chuẩn

Mã màu là gì?