Bảng Mã Màu Đầy Đủ – Bảng Code Màu HTML, CSS, HEX, RGB, CMYK chuẩn (Copy Ngay)

Bảng mã màu là thứ bạn cần mở ra mỗi khi thiết kế website, chỉnh CSS hay chuẩn bị file in nhưng lại quên mất mã HEX của một màu quen thuộc. Thay vì dò từng chút bằng mắt, bạn copy đúng mã HEX, RGB, CMYK và dán thẳng vào code hoặc phần mềm. Trang này gom sẵn các dải màu chuẩn để bạn dùng ngay, do đội ngũ InterData tổng hợp.

Bảng mã màu là gì? Các hệ màu bạn nên biết

Bảng mã màu là tập hợp các màu kèm mã định danh để máy tính và phần mềm hiển thị đúng một màu cụ thể. Trong thiết kế web và in ấn, mỗi màu được mô tả bằng một chuỗi ký tự thay vì gọi tên cảm tính. Nhờ đó màu trên trình duyệt của bạn khớp với màu trên máy người khác.

Có bốn cách viết mã màu bạn sẽ gặp nhiều nhất. Hiểu bản chất từng hệ giúp bạn chọn đúng nơi dùng, tránh cảnh màu trên web đẹp nhưng in ra lệch tông.

• HEX: Chuỗi 6 ký tự sau dấu #, ví dụ #2563EB. Đây là mã màu HTML và mã màu CSS thông dụng nhất cho web.
• RGB: Ba giá trị Đỏ, Lục, Lam từ 0 đến 255, ví dụ rgb(37, 99, 235). Đây là hệ màu cộng, dùng cho màn hình phát sáng.
• HSL: Ba giá trị Màu sắc, Độ bão hòa, Độ sáng. Dễ chỉnh sáng tối và tạo dải màu đồng bộ trong CSS.
• CMYK: Bốn giá trị Xanh lơ, Hồng cánh sen, Vàng, Đen tính theo phần trăm. Đây là hệ màu trừ, dành cho máy in.

Điểm mấu chốt: RGB và HEX dành cho màn hình, CMYK dành cho in giấy. Màn hình tạo màu bằng ánh sáng nên gọi là hệ màu cộng. Giấy hấp thụ ánh sáng nên gọi là hệ màu trừ. Một màu HEX rực rỡ như #00FF00 gần như không thể in ra y hệt bằng mực CMYK. Nắm điều này trước khi bạn gửi file cho nhà in.

Hệ màu cộng và hệ màu trừ khác nhau ra sao?

Hệ màu cộng (RGB) bắt đầu từ màu đen tuyền, càng thêm ánh sáng càng sáng, đủ ba màu ở mức tối đa cho ra màu trắng. Hệ màu trừ (CMYK) bắt đầu từ giấy trắng, càng thêm mực càng tối, đủ bốn màu cho ra màu gần đen. Vì cơ chế ngược nhau, việc chuyển đổi qua lại luôn có sai số, nhất là với các màu neon và màu bão hòa cao.

Bảng mã màu HEX phổ biến (copy ngay)

Mã màu HEX là định dạng bạn dán nhiều nhất khi code web. Dưới đây là các màu cơ bản kèm mã HEX và giá trị RGB tương ứng. Click chọn ô mã và copy trực tiếp vào file CSS hoặc HTML của bạn.

Cách đọc một mã màu HEX trong 10 giây

Mã HEX gồm dấu # và 6 ký tự chia thành ba cặp: hai ký tự đầu cho Đỏ, hai giữa cho Lục, hai cuối cho Lam. Mỗi cặp chạy từ 00 đến FF, tức 0 đến 255 ở hệ thập phân. Ví dụ #2563EB nghĩa là Đỏ 37, Lục 99, Lam 235 — một sắc xanh dương đậm.

• Mã rút gọn 3 ký tự: #FFF tương đương #FFFFFF, #000 tương đương #000000. Trình duyệt tự nhân đôi từng ký tự.
• Mã 8 ký tự (HEX + Alpha): Hai ký tự cuối là độ trong suốt, ví dụ #2563EB80 là màu xanh với độ mờ 50%.
• Không phân biệt hoa thường: #ff0000 và #FF0000 cho cùng một màu.

Bảng mã màu RGB và cách dùng trong CSS

Mã màu RGB mô tả màu bằng ba kênh Đỏ, Lục, Lam, mỗi kênh từ 0 đến 255. So với HEX, RGB dễ đọc bằng mắt hơn và tiện khi bạn cần thêm độ trong suốt qua cú pháp rgba(). Đây là hệ màu gốc mà mọi màn hình dùng để phát sáng điểm ảnh.

Trong CSS, bạn khai báo màu RGB theo cú pháp quen thuộc. Đoạn dưới minh họa cách dùng cả RGB và RGBA có độ trong suốt.

.button {
  color: rgb(255, 255, 255);           /* chữ trắng */
  background-color: rgb(37, 99, 235);   /* nền xanh */
  border: 1px solid rgba(0, 0, 0, 0.1); /* viền đen mờ 10% */
}

/* Cú pháp CSS hiện đại, dấu phẩy tùy chọn */
.overlay {
  background-color: rgb(0 0 0 / 50%);   /* đen trong suốt 50% */
}

Lưu ý: cú pháp rgb(0 0 0 / 50%) dùng dấu cách và dấu gạch chéo là chuẩn mới, được các trình duyệt hiện đại hỗ trợ. Nếu bạn cần tương thích trình duyệt cũ, giữ cú pháp rgba(0, 0, 0, 0.5) cho an toàn.

Bảng mã màu CMYK cho in ấn

Mã màu CMYK dùng cho mọi thứ in ra giấy: name card, brochure, poster, bao bì. CMYK gồm bốn kênh Cyan, Magenta, Yellow, Key (đen), mỗi kênh tính theo phần trăm từ 0 đến 100. Nếu bạn thiết kế banner web rồi mang đi in mà không kiểm tra CMYK, màu in thường xỉn hơn màu trên màn hình.

Giá trị HEX ở cột cuối chỉ là xấp xỉ để bạn hình dung trên màn hình. Con số CMYK thực tế còn phụ thuộc loại giấy, loại mực và hồ sơ màu (ICC profile) của máy in. Vì vậy khi in số lượng lớn, bạn nên yêu cầu nhà in làm bản in thử (proof) trước khi chạy chính thức.

• Thiết kế cho web: Làm việc ở chế độ màu RGB, xuất HEX.
• Thiết kế để in: Chuyển file sang chế độ CMYK ngay từ đầu trong phần mềm như Illustrator hoặc Photoshop.
• Đừng chuyển đổi phút cuối: Chuyển RGB sang CMYK sát giờ in dễ khiến màu bị xỉn ngoài dự tính.

Bảng màu Pastel và bảng màu chuẩn thiết kế web

Bảng màu pastel là nhóm màu nhạt, độ bão hòa thấp, cho cảm giác nhẹ nhàng. Chúng hợp với landing page thương hiệu mềm mại, blog cá nhân, giao diện wedding hoặc mỹ phẩm. Dưới đây là dải pastel bạn có thể copy ngay và một bảng màu chuẩn thiết kế web để phối giao diện.

Bảng màu chuẩn để phối giao diện web

Một giao diện dễ nhìn thường dựa trên một màu chủ đạo, một màu nhấn và vài mức xám. Bảng dưới là bộ màu thang xanh dương thường gặp trên các hệ thống thiết kế hiện đại, bạn có thể lấy làm điểm xuất phát.

Mẹo chọn màu chuẩn thiết kế: giữ số màu chủ đạo ở mức 1 đến 2, còn lại là các mức xám và một màu nhấn cho nút bấm quan trọng. Kiểm tra độ tương phản giữa chữ và nền để nội dung dễ đọc, đặc biệt với người thị lực kém. Tiêu chuẩn tương phản tối thiểu cho chữ thường là 4.5:1 theo hướng dẫn WCAG của W3C.

Cách khai báo và pha màu trong CSS

Trong mã màu CSS, bạn có nhiều cách viết cùng một màu. Chọn cách nào tùy tình huống: HEX gọn cho màu cố định, HSL tiện khi cần dải sáng tối, biến CSS để quản lý cả bộ màu một chỗ. Phần này chỉ cách làm thực tế.

Bốn cách viết màu trong CSS

.box-1 { color: #2563EB; }                    /* HEX */
.box-2 { color: rgb(37, 99, 235); }           /* RGB */
.box-3 { color: hsl(221, 83%, 53%); }         /* HSL */
.box-4 { color: hsl(221 83% 53% / 0.5); }     /* HSL + trong suốt */

HSL đặc biệt hữu ích khi bạn muốn tạo màu đậm và nhạt từ một tông. Giữ nguyên số Màu sắc và Độ bão hòa, chỉ đổi Độ sáng, bạn có ngay một dải màu đồng bộ mà không cần dò từng mã.

Dùng biến CSS để quản lý cả bảng màu

Khai báo bảng màu một lần bằng biến, rồi tái sử dụng khắp nơi. Khi cần đổi thương hiệu, bạn chỉ sửa một chỗ.

:root {
  --color-primary: #2563EB;
  --color-dark: #1E3A8A;
  --color-text: #1F2937;
  --color-bg: #EFF6FF;
}

.header { background: var(--color-primary); }
.title  { color: var(--color-text); }
.panel  { background: var(--color-bg); }

1. Chọn 4 đến 6 màu cốt lõi cho thương hiệu.
2. Khai báo chúng trong :root bằng cú pháp --ten-bien.
3. Gọi lại bằng var(--ten-bien) ở mọi thành phần.
4. Khi cần đổi tông, sửa giá trị ở :root, toàn site cập nhật theo.

Cách này giảm lỗi lệch màu giữa các trang và giúp bạn làm dark mode nhanh hơn bằng cách gán bộ biến khác. Tài liệu tham khảo đầy đủ về giá trị màu trong CSS có tại MDN Web Docs.

Cách lấy và copy mã màu nhanh

Nhiều lúc bạn thấy một màu đẹp trên ảnh hoặc website khác và muốn lấy đúng mã màu đó. Có vài cách nhanh gọn, không cần cài phần mềm nặng. Dưới đây là các phương án theo thứ tự tiện dụng.

• Công cụ Eyedropper của trình duyệt: Trong DevTools của Chrome, mở bảng chọn màu của một thuộc tính CSS rồi bấm biểu tượng ống hút để hút màu bất kỳ trên màn hình.
• Trình chọn màu trong phần mềm thiết kế: Photoshop, Illustrator, Figma đều có công cụ ống hút để lấy mã HEX và RGB tức thì.
• Extension lấy mã màu: Các tiện ích color picker trên trình duyệt cho phép click vào bất kỳ điểm nào của trang để copy mã màu.
• Từ file thiết kế được bàn giao: Nếu nhận file Figma, bạn xem trực tiếp mã HEX ở panel bên phải khi chọn đối tượng.

Sau khi có mã, hãy lưu cả bộ màu vào một file style riêng hoặc biến CSS như phần trên. Đừng để mã màu nằm rải rác trong code, vì mỗi lần sửa thương hiệu bạn sẽ phải dò lại từng chỗ.

Checklist trước khi chốt bảng màu cho dự án

• Đã tách rõ màu cho web (HEX/RGB) và màu cho in (CMYK) chưa.
• Độ tương phản giữa chữ và nền có đạt mức dễ đọc không.
• Bộ màu có tối đa 1 đến 2 màu chủ đạo, tránh rối mắt.
• Đã lưu mã màu vào biến CSS hoặc file style tập trung.
• Đã thử màu trên cả nền sáng và nền tối nếu site có dark mode.

Câu hỏi thường gặp về bảng mã màu

Mã màu HEX và RGB có gì khác nhau?

Chúng mô tả cùng một hệ màu màn hình, chỉ khác cách viết. HEX dùng chuỗi 6 ký tự sau dấu #, gọn cho code. RGB dùng ba số từ 0 đến 255, dễ đọc bằng mắt và tiện thêm độ trong suốt qua rgba(). Cùng một màu, bạn có thể viết theo cả hai kiểu.

Vì sao màu trên web in ra bị khác?

Vì màn hình dùng hệ màu cộng RGB phát sáng, còn máy in dùng hệ màu trừ CMYK bằng mực. Nhiều màu RGB rực rỡ nằm ngoài dải màu mực in tái tạo được, nên in ra sẽ xỉn hơn. Hãy thiết kế ở chế độ CMYK và in thử trước khi in số lượng lớn.

Làm sao copy mã màu từ một hình ảnh?

Dùng công cụ ống hút (eyedropper) trong phần mềm thiết kế như Photoshop, Figma, hoặc trong DevTools của trình duyệt. Bạn cũng có thể cài extension color picker để click vào điểm bất kỳ trên màn hình và copy ngay mã HEX. Sau đó dán vào code hoặc file style của bạn.

Bảng màu pastel dùng cho loại website nào?

Bảng màu pastel hợp với thương hiệu mềm mại: mỹ phẩm, thời trang nhẹ nhàng, blog cá nhân, dịch vụ cưới, spa. Vì độ bão hòa thấp, pastel dịu mắt nhưng dễ thiếu tương phản. Hãy ghép pastel với một màu đậm cho chữ và nút bấm để nội dung vẫn rõ ràng.

Nên dùng HEX hay biến CSS cho dự án lớn?

Với dự án nhiều trang, hãy khai báo bảng mã màu bằng biến CSS trong :root rồi gọi lại bằng var(). Cách này giúp đổi tông toàn site chỉ bằng vài dòng, tránh lệch màu giữa các trang và dựng dark mode dễ hơn nhiều so với rải mã HEX khắp nơi.

Nội dung trong bài chỉ mang tính tham khảo. Giá trị mã màu, đặc biệt là CMYK, có thể thay đổi theo phần mềm thiết kế, hồ sơ màu ICC, loại giấy và loại mực của từng máy in. Cú pháp CSS có thể hiển thị khác nhau giữa các phiên bản trình duyệt. Bạn nên in thử, kiểm tra trên nhiều thiết bị và sao lưu file trước khi áp dụng cho sản phẩm chính thức.