Cách chọn màu HEX, RGB cho thiết kế web
Tháng 6, 2026 · 7 phút đọc
Màu sắc là yếu tố quan trọng nhất trong thiết kế web. Một bảng màu phù hợp có thể tạo ấn tượng chuyên nghiệp, tăng tỷ lệ chuyển đổi, và cải thiện trải nghiệm người dùng. Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách chọn và sử dụng mã màu HEX, RGB cho thiết kế web hiệu quả.
Mã màu HEX là gì?
HEX (Hexadecimal) là hệ mã màu phổ biến nhất trong thiết kế web. Mã HEX sử dụng 6 ký tự thập lục phân để biểu diễn màu sắc:
- 2 ký tự đầu: mức độ đỏ (00-FF)
- 2 ký tự giữa: mức độ xanh lá (00-FF)
- 2 ký tự cuối: mức độ xanh dương (00-FF)
Ví dụ: #FF0000 là màu đỏ (đỏ tối đa, không xanh lá, không xanh dương), #00FF00 là màu xanh lá, #0000FF là màu xanh dương.
Mã màu RGB là gì?
RGB (Red, Green, Blue) là hệ mã màu sử dụng 3 số nguyên từ 0-255 để biểu diễn mức độ của 3 kênh màu:
rgb(255, 0, 0) // Màu đỏ
rgb(0, 255, 0) // Màu xanh lá
rgb(0, 0, 255) // Màu xanh dương
rgb(255, 255, 255) // Màu trắng
rgb(0, 0, 0) // Màu đenChuyển đổi HEX sang RGB
HEX và RGB biểu diễn cùng một thông tin nhưng ở định dạng khác. Cách chuyển đổi:
#FF5733 → RGB(255, 87, 51)
FF = 255 (đỏ)
57 = 87 (xanh lá)
33 = 51 (xanh dương)Sử dụng công cụ Color Picker của ToolHub để chuyển đổi tự động giữa HEX, RGB, HSL và các định dạng màu khác.
Các hệ mã màu phổ biến
| Hệ mã | Định dạng | Ví dụ | Ứng dụng |
|---|---|---|---|
| HEX | #RRGGBB | #FF5733 | CSS, HTML |
| RGB | rgb(r,g,b) | rgb(255,87,51) | CSS, JavaScript |
| HSL | hsl(h,s%,l%) | hsl(14,100%,60%) | CSS |
| RGBA | rgba(r,g,b,a) | rgba(255,87,51,0.5) | CSS (có độ trong suốt) |
| CMYK | c,m,y,k | 0,66,80,0 | In ấn |
Nguyên tắc chọn màu cho web
1. Quy tắc 60-30-10
Đây là nguyên tắc cơ bản trong thiết kế:
- 60% - Màu chủ đạo (background, không gian trống)
- 30% - Màu phụ (thẻ, section, sidebar)
- 10% - Màu nhấn (nút CTA, link, icon)
2. Tương phản đủ lớn
Đảm bảo văn bản có độ tương phản đủ lớn với background để dễ đọc. WCAG khuyến nghị tỷ lệ tương phản tối thiểu 4.5:1 cho văn bản thường và 3:1 cho văn bản lớn.
3. Giới hạn số lượng màu
Sử dụng tối đa 3-5 màu chính trong thiết kế. Quá nhiều màu sẽ tạo cảm giác rối mắt và thiếu chuyên nghiệp.
4. Nhất quán
Sử dụng cùng một bảng màu xuyên suốt website để tạo nhận diện thương hiệu mạnh mẽ.
Bảng màu web an toàn (Web Safe Colors)
Bảng màu web an toàn là 216 màu được hiển thị chính xác trên mọi trình duyệt và thiết bị. Mặc dù hiện đại các màn hình đều hỗ trợ hàng triệu màu, bảng màu này vẫn hữu ích cho việc đảm bảo tính nhất quán.
Một số màu web an toàn phổ biến:
#FFFFFF - Trắng #000000 - Đen
#FF0000 - Đỏ #00FF00 - Xanh lá
#0000FF - Xanh dương #FFFF00 - Vàng
#FF00FF - Hồng #00FFFF - Xanh cyan
#FFA500 - Cam #800080 - TímCách chọn màu phối hợp đẹp
Màu Complementary (Đối diện)
Hai màu đối diện nhau trên bánh xe màu. Tạo sự tương phản mạnh mẽ:
- Xanh dương + Cam
- Đỏ + Xanh lá
- Tím + Vàng
Màu Analogous (Kề cận)
Ba màu liền kề nhau trên bánh xe màu. Tạo sự hài hòa, dễ chịu:
- Xanh dương + Xanh lục + Xanh lá
- Đỏ + Cam + Vàng
Màu Triadic (Ba màu)
Ba màu cách đều nhau 120 độ trên bánh xe màu. Tạo sự cân bằng và sinh động:
- Đỏ + Xanh lá + Xanh dương
- Cam + Tím + Xanh lá
Màu Monochromatic (Đơn sắc)
Sử dụng một màu với nhiều sắc độ khác nhau. Tạo sự tinh tế, chuyên nghiệp:
- Xanh dương nhạt + Xanh dương trung bình + Xanh dương đậm
Sử dụng Color Picker ToolHub
Công cụ Color Picker của ToolHub giúp bạn chọn và tạo màu dễ dàng:
- Chọn màu trực quan bằng cách click vào vùng màu
- Xem mã màu ở nhiều định dạng: HEX, RGB, HSL
- Sao chép mã màu chỉ với một click
- Tạo bảng màu phối hợp tự động
- Xem trước màu trên background và text
- Kiểm tra tỷ lệ tương phản (contrast ratio)
Mẹo chọn màu cho từng loại website
Website doanh nghiệp
- Sử dụng màu thương hiệu làm màu chính
- Chọn màu trung tính cho background (trắng, xám nhạt)
- Sử dụng màu nhấn cho CTA (nút mua hàng, đăng ký)
Website sáng tạo
- Có thể sử dụng màu sắc大胆 hơn
- Gradient và màu neon đang là xu hướng
- Vẫn đảm bảo tính dễ đọc
Website thương mại điện tử
- Màu đỏ/cam cho nút "Mua ngay" (tạo cảm giác khẩn cấp)
- Xanh lá cho giá khuyến mãi (tạo cảm giác tiết kiệm)
- Nền trắng để sản phẩm nổi bật
Xu hướng màu sắc web 2026
- Viva Magenta: Màu hồng đỏ sống động, biểu tượng cho sức mạnh và sáng tạo
- Earth Tones: Màu đất, nâu, be - tạo cảm giác tự nhiên, bền vững
- Soft Pastels: Màu pastel nhẹ nhàng - tạo cảm giác thư thái, dễ chịu
- Dark Mode: Nền tối với màu neon - giảm mỏi mắt, tiết kiệm pin
- Gradients: Chuyển màu mượt mà - tạo chiều sâu và sự sinh động
Công cụ hỗ trợ chọn màu
- ToolHub Color Picker - Chọn và tạo màu miễn phí
- Coolors.co - Tạo bảng màu ngẫu nhiên
- Adobe Color - Công cụ tạo bảng màu chuyên nghiệp
- Contrast Checker - Kiểm tra tỷ lệ tương phản
Lỗi thường gặp khi chọn màu
- Thiếu tương phản: Văn bản và background có màu quá giống nhau, khó đọc
- Quá nhiều màu: Sử dụng hơn 5 màu chính tạo cảm giác rối mắt
- Không nhất quán: Màu sắc thay đổi giữa các trang, không tạo nhận diện thương hiệu
- Bỏ qua accessibility: Người mù màu không thể phân biệt một số màu
- Chỉ chọn theo sở thích: Màu sắc nên phục vụ mục đích kinh doanh, không chỉ sở thích cá nhân
Câu hỏi thường gặp
Chọn màu ngay bây giờ
Sử dụng công cụ Color Picker miễn phí của ToolHub để chọn và tạo màu đẹp.
Mở Color Picker →