Bảng mã màu là gì? Cách đọc mã màu HTML, CSS, RGB, HEX và CMYK dễ hiểu cho người mới
Một bài tổng hợp theo hướng thực hành: hiểu bảng mã màu để tra nhanh, viết CSS đúng và chọn màu hợp lý cho web, thiết kế và in ấn.
Khi làm website, thiết kế banner, chỉnh giao diện WordPress hoặc viết CSS, bạn sẽ gặp những chuỗi như #ffffff, rgb(255 255 255) hay hsl(0 0% 100%). Đó đều là những cách biểu diễn màu sắc bằng mã.
Điều khiến nhiều người mới rối là cùng một màu nhưng lại có nhiều kiểu viết khác nhau. Bài này sẽ giúp bạn hiểu bảng mã màu là gì, phân biệt các hệ màu thường gặp, biết khi nào nên dùng HEX, RGB, HSL hoặc CMYK và có sẵn một số ví dụ để áp dụng ngay vào HTML hoặc CSS.
Tóm tắt nhanh cho người bận
Bảng mã màu là tập hợp các mã chuẩn để biểu diễn màu sắc nhất quán trên web và trong thiết kế. Với web, bạn sẽ gặp nhiều nhất các dạng HEX, rgb(), hsl() và tên màu chuẩn. Còn CMYK thường gắn với in ấn hơn. Nếu chỉ cần viết màu nhanh trong CSS, HEX rất tiện. Nếu muốn tinh chỉnh độ sáng, sắc độ và phối màu dễ hơn, HSL thường dễ đọc hơn. Nếu bạn đang làm việc với giao diện web hoặc WordPress, chỉ cần nắm chắc HEX, RGB và HSL là đã dùng được trong phần lớn tình huống.
Bảng mã màu là gì?
Hiểu đơn giản, bảng mã màu là danh sách các giá trị màu được chuẩn hóa để bạn có thể gọi đúng một màu trong code, thiết kế hoặc tài liệu in ấn. Thay vì nói mơ hồ như “xanh hơi đậm” hay “đỏ tươi”, bạn dùng một mã cụ thể để mọi người và mọi hệ thống hiểu cùng một màu.
Điểm quan trọng nhất của bảng mã màu là tính nhất quán. Khi bạn dùng đúng mã, màu trên nút bấm, heading, logo hoặc banner sẽ dễ được giữ đồng đều hơn trên toàn bộ giao diện.
4 nhóm mã màu bạn gặp nhiều nhất
Trong thực tế, người làm web không cần nhớ mọi hệ màu. Chỉ cần nắm chắc 4 nhóm sau là đủ để làm việc hiệu quả hơn rất nhiều.
HEX
Dạng quen thuộc nhất trong CSS, ví dụ #2563eb. Nó ngắn gọn, dễ copy và rất phổ biến trong giao diện web.
RGB
Biểu diễn màu bằng ba thành phần đỏ, xanh lá và xanh dương. Ví dụ rgb(37 99 235).
HSL
Diễn tả màu theo sắc độ, độ bão hòa và độ sáng. Dạng này thường dễ chỉnh màu hơn khi làm UI.
CMYK
Phù hợp hơn với in ấn. Nếu bạn làm file in, đây là hệ màu đáng quan tâm hơn so với CSS thông thường.
HEX, RGB và HSL khác nhau thế nào?
Ba cách viết này có thể cùng mô tả một màu, nhưng góc nhìn của chúng khác nhau. HEX thiên về cách gọi ngắn gọn. RGB thiên về ba kênh màu gốc. HSL thiên về cách con người dễ hình dung màu hơn khi tinh chỉnh.
.btn-primary{
background:#2563eb;
color:#ffffff;
}
.btn-primary{
background:rgb(37 99 235);
color:rgb(255 255 255);
}
.btn-primary{
background:hsl(220 83% 53%);
color:hsl(0 0% 100%);
}Nếu bạn chỉ cần copy màu từ Figma, Photoshop hoặc bảng màu trên web, HEX thường là lựa chọn nhanh nhất. Nếu bạn đang chỉnh tông màu đậm nhạt cho UI, HSL thường dễ nghĩ và dễ kiểm soát hơn.
Cách đọc mã HEX cực nhanh
Một mã HEX cơ bản thường có dạng #RRGGBB. Trong đó, hai ký tự đầu là đỏ, hai ký tự giữa là xanh lá và hai ký tự cuối là xanh dương. Giá trị đi từ 00 đến FF.
- #000000 là đen vì cả ba kênh đều về mức thấp nhất.
- #ffffff là trắng vì cả ba kênh đều ở mức cao nhất.
- #ff0000 là đỏ thuần.
- #00ff00 là xanh lá sáng.
- #0000ff là xanh dương thuần.
Khi đã quen, chỉ nhìn vài ký tự cuối thôi bạn cũng có thể đoán đại khái màu đang nghiêng về tông nào.
Một bảng màu cơ bản hay dùng trong web
Đây là vài màu nền tảng rất hay xuất hiện khi làm website, UI và CSS cơ bản. Bạn có thể dùng trực tiếp hoặc lấy làm mốc để tinh chỉnh tiếp.
| Tên màu | HEX | RGB |
|---|---|---|
| Black | #000000 | rgb(0 0 0) |
| White | #ffffff | rgb(255 255 255) |
| Red | #ff0000 | rgb(255 0 0) |
| Lime | #00ff00 | rgb(0 255 0) |
| Blue | #0000ff | rgb(0 0 255) |
| Yellow | #ffff00 | rgb(255 255 0) |
| Cyan / Aqua | #00ffff | rgb(0 255 255) |
| Magenta / Fuchsia | #ff00ff | rgb(255 0 255) |
Nếu bạn đang làm web và muốn có màu dễ nhớ, các tên màu chuẩn như red, blue, white vẫn dùng được trong CSS. Nhưng khi cần thống nhất màu thương hiệu, HEX hoặc HSL thường chính xác hơn.
Khi nào nên dùng HSL thay vì HEX?
HSL rất hữu ích khi bạn muốn tư duy màu theo kiểu tự nhiên hơn. Ví dụ, bạn giữ nguyên sắc độ rồi tăng độ sáng để tạo hover state, hoặc giảm độ bão hòa để làm phiên bản dịu hơn của cùng một màu thương hiệu.
Nói cách khác, HSL rất hợp với việc xây dựng hệ màu cho giao diện. Bạn không cần đổi từng cặp ký tự như HEX, mà chỉ cần chỉnh vài giá trị để sáng hơn, nhạt hơn hoặc đậm hơn.
:root{
--brand:hsl(220 83% 53%);
--brand-hover:hsl(220 83% 46%);
--brand-soft:hsl(220 70% 92%);
}CMYK dùng khi nào?
Nếu bạn đang làm website, CSS hay giao diện WordPress, CMYK thường không phải dạng bạn thao tác hằng ngày. Hệ này liên quan nhiều hơn đến in ấn, nơi màu được tạo bởi bốn thành phần cyan, magenta, yellow và black.
Vì vậy, nếu công việc của bạn là web, hãy ưu tiên HEX, RGB và HSL. Còn nếu bạn đang chuẩn bị file in như brochure, poster, name card hoặc bao bì, CMYK mới là thứ nên kiểm tra kỹ hơn.
Một lỗi khá phổ biến là chọn màu rất đẹp trên màn hình rồi kỳ vọng màu in ra giống hệt. Thực tế, web và in ấn là hai bối cảnh khác nhau nên bạn luôn nên kiểm tra màu ở đúng môi trường sử dụng cuối cùng.
Cách chọn màu cho website để nhìn chuyên nghiệp hơn
Biết mã màu là một chuyện, dùng màu đẹp lại là chuyện khác. Với website, bạn thường không cần quá nhiều màu. Một bảng màu gọn thường dễ kiểm soát và nhìn chuyên nghiệp hơn.
- Chọn một màu chính cho thương hiệu hoặc CTA.
- Chọn 1 đến 2 màu phụ để hỗ trợ, không cạnh tranh với màu chính.
- Dùng màu trung tính cho nền, viền và chữ để giao diện dễ đọc hơn.
- Ưu tiên độ tương phản đủ rõ giữa chữ và nền.
- Không nên dùng quá nhiều màu bão hòa mạnh trong cùng một màn hình.
Nếu bạn dùng WordPress, cách làm thực dụng nhất là chốt trước bộ màu cho nút, link, heading, nền và trạng thái hover. Làm vậy giao diện sẽ đồng nhất hơn rất nhiều.
Một mẹo thực dụng cho người mới
Nếu bạn chưa quen màu sắc, hãy bắt đầu bằng cách lưu sẵn một bảng nhỏ gồm màu chữ chính, màu nền, màu nút chính, màu hover và màu cảnh báo. Sau đó dùng lại đúng các mã này trên toàn site. Chỉ riêng việc giảm số màu dùng tùy hứng cũng đã giúp website trông gọn và “ra nghề” hơn rất nhiều.
FAQ ngắn
HEX và RGB có thể là cùng một màu không?
Có. Chúng chỉ là hai cách biểu diễn khác nhau của cùng một màu trong bối cảnh web.
Người mới nên học hệ màu nào trước?
Nên bắt đầu từ HEX và RGB vì rất hay gặp trong HTML/CSS. Sau đó học thêm HSL để phối màu và tinh chỉnh giao diện dễ hơn.
CMYK có dùng trực tiếp trong CSS thông thường không?
Thông thường khi làm web, bạn sẽ ít dùng CMYK hơn nhiều so với HEX, RGB và HSL. CMYK phù hợp hơn với in ấn.
Tên màu như red, blue, white có dùng được trong CSS không?
Có. CSS hỗ trợ các tên màu chuẩn, nhưng khi cần màu thương hiệu chính xác hơn, HEX hoặc HSL thường dễ kiểm soát hơn.
Kết luận ngắn
Bảng mã màu không chỉ là danh sách để tra nhanh, mà còn là nền tảng giúp bạn làm web và thiết kế nhất quán hơn. Với người mới, chỉ cần hiểu rõ HEX, RGB, HSL và biết CMYK chủ yếu dành cho in ấn là đã đủ để áp dụng ngay trong phần lớn công việc. Khi quen hơn, bạn sẽ thấy chọn màu đẹp không còn là chuyện cảm tính, mà là sự kết hợp giữa mã màu đúng, độ tương phản hợp lý và cách dùng màu có kỷ luật.