Cách chọn màu sắc đẹp cho thiết kế web
Tháng 6, 2026 · 10 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 đẹp có thể biến website bình thường trở nên chuyên nghiệp và thu hút. Ngược lại, màu sắc sai có thể khiến người dùng bỏ đi trong vài giây. Bài viết này sẽ hướng dẫn bạn cách chọn màu sắc đẹp cho thiết kế web dựa trên lý thuyết màu sắc và các nguyên tắc thiết kế.
Lý thuyết màu sắc cơ bản
1. Bánh xe màu (Color Wheel)
Bánh xe màu là công cụ cơ bản nhất trong lý thuyết màu sắc. Nó gồm 12 màu chính:
- 3 màu chính (Primary): Đỏ, Vàng, Xanh dương - không thể tạo bằng cách trộn màu khác
- 3 màu phụ (Secondary): Cam (Đỏ+Vàng), Xanh lá (Vàng+Xanh dương), Tím (Đỏ+Xanh dương)
- 6 màu bậc ba (Tertiary): Trộn 1 màu chính + 1 màu phụ
2. Nhiệt độ màu (Color Temperature)
| Nhiệt độ | Màu sắc | Cảm giác | Phù hợp cho |
|---|---|---|---|
| Ấm (Warm) | Đỏ, Cam, Vàng | Năng động, nhiệt huyết, gần gũi | Ẩm thực, giải trí, thể thao |
| Mát (Cool) | Xanh dương, Xanh lá, Tím | Bình tĩnh, tin cậy, chuyên nghiệp | Công nghệ, y tế, tài chính |
| Trung tính (Neutral) | Đen, Trắng, Xám, Nâu, Be | Thanh lịch, sang trọng | Thời trang, nhiếp ảnh, portfolio |
Color Harmony - Các cách phối màu
Color Harmony là nguyên tắc kết hợp màu sắc để tạo bảng màu hài hòa:
1. Monochromatic (Đơn sắc)
Sử dụng một màu với nhiều sắc độ khác nhau (sáng hơn, tối hơn). Tạo cảm giác thanh lịch, nhất quán.
- Ví dụ: Xanh dương nhạt, Xanh dương, Xanh dương đậm
- Phù hợp: Thiết kế minimal, portfolio, blog cá nhân
2. Analogous (Tương tự)
Sử dụng 2-3 màu liền kề trên bánh xe màu. Tạo cảm giác hài hòa, tự nhiên.
- Ví dụ: Xanh dương, Xanh dương-xanh lá, Xanh lá
- Phù hợp: Website thiên nhiên, sức khỏe, du lịch
3. Complementary (Bổ sung)
Sử dụng 2 màu đối diện trên bánh xe màu. Tạo contrast mạnh, nổi bật.
- Ví dụ: Xanh dương + Cam, Đỏ + Xanh lá
- Phù hợp: Nút CTA, banner, phần cần nổi bật
4. Triadic (Ba màu)
Sử dụng 3 màu cách đều nhau trên bánh xe màu. Tạo bảng màu sống động.
- Ví dụ: Đỏ + Vàng + Xanh dương
- Phù hợp: Website trẻ em, sự kiện, giải trí
5. Split-Complementary
Một màu chính + 2 màu liền kề với màu bổ sung. Ít contrast hơn complementary nhưng vẫn nổi bật.
Quy tắc phối màu 60-30-10
Đây là nguyên tắc vàng trong thiết kế nội thất và web:
- 60% - Màu nền (Background): Màu chủ đạo, thường là màu trung tính (trắng, xám nhạt, be)
- 30% - Màu phụ (Secondary): Hỗ trợ màu nền, tạo chiều sâu
- 10% - Màu nhấn (Accent): Màu nổi bật cho nút bấm, link, CTA
Cách chọn màu cho từng phần của website
| Phần website | Loại màu | Ví dụ |
|---|---|---|
| Background | Trung tính, nhẹ | #FFFFFF, #F8FAFC, #F1F5F9 |
| Text chính | Tương phản cao | #0F172A, #1E293B |
| Text phụ | Nhẹ hơn | #475569, #64748B |
| Primary color | Màu thương hiệu | #6366F1 (Indigo), #3B82F6 (Blue) |
| Nút bấm (CTA) | Nổi bật | Màu primary hoặc complementary |
| Link | Màu primary | Giống primary color |
| Border | Nhẹ | #E2E8F0, #D1D5DB |
| Success | Xanh lá | #10B981, #22C55E |
| Error | Đỏ | #EF4444, #DC2626 |
| Warning | Vàng/ Cam | #F59E0B, #F97316 |
Sử dụng Color Picker của ToolHub
Công cụ Color Picker của ToolHub giúp bạn chọn và tạo màu sắc dễ dàng:
- Truy cập ToolHub Color Picker
- Chọn màu bằng cách click trên bánh xe màu hoặc kéo thanh trượt
- Nhập mã màu trực tiếp: HEX (#FF5733), RGB (255, 87, 51), HSL (11, 100%, 60%)
- Xem màu ở nhiều định dạng khác nhau
- Sao chép mã màu để sử dụng trong CSS
Color Accessibility - Tính dễ tiếp cận
Đảm bảo mọi người, kể cả người khiếm thị, đều có thể đọc được nội dung website:
Tỷ lệ tương phản (Contrast Ratio)
| Cấp độ WCAG | Text thường | Text lớn (18px+) | Ghi chú |
|---|---|---|---|
| AA (tối thiểu) | 4.5:1 | 3:1 | Bắt buộc cho hầu hết website |
| AAA (khuyến nghị) | 7:1 | 4.5:1 | Tốt nhất cho accessibility |
Ví dụ về tương phản:
- Tốt: Text đen (#000000) trên nền trắng (#FFFFFF) - tỷ lệ 21:1
- Tốt: Text trắng (#FFFFFF) trên nền xanh đậm (#1E3A5F) - tỷ lệ 12:1
- Kém: Text xám nhạt (#999999) trên nền trắng (#FFFFFF) - tỷ lệ 2.8:1
- Kém: Text vàng (#FFFF00) trên nền trắng (#FFFFFF) - tỷ lệ 1.1:1
Bảng màu phổ biến cho website
1. Professional (Chuyên nghiệp)
- Primary: #2563EB (Blue)
- Secondary: #1E40AF (Dark Blue)
- Accent: #F59E0B (Amber)
- Background: #F8FAFC
- Text: #0F172A
2. Modern (Hiện đại)
- Primary: #6366F1 (Indigo)
- Secondary: #8B5CF6 (Purple)
- Accent: #EC4899 (Pink)
- Background: #FFFFFF
- Text: #111827
3. Nature (Thiên nhiên)
- Primary: #059669 (Emerald)
- Secondary: #0D9488 (Teal)
- Accent: #F97316 (Orange)
- Background: #F0FDF4
- Text: #14532D
4. Minimal (Tối giản)
- Primary: #111827 (Gray-900)
- Secondary: #6B7280 (Gray-500)
- Accent: #EF4444 (Red)
- Background: #FFFFFF
- Text: #111827
5. E-commerce (Thương mại điện tử)
- Primary: #DC2626 (Red)
- Secondary: #1F2937 (Gray-800)
- Accent: #059669 (Emerald - nút mua hàng)
- Background: #FFFFFF
- Text: #111827
Lỗi thường gặp khi chọn màu
- Quá nhiều màu: Sử dụng hơn 3-4 màu chính khiến thiết kế rối mắt. Nguyên tắc: 1 primary, 1 secondary, 1 accent
- Thiếu tương phản: Text trên nền không đủ contrast, khó đọc. Luôn kiểm tra tỷ lệ tương phản
- Bỏ qua accessibility: Người mù màu (8% nam giới) không phân biệt được đỏ-xanh lá. Không chỉ dựa vào màu sắc để truyền tải thông tin
- Màu quá chói: Màu saturation 100% gây mỏi mắt. Hãy giảm saturation xuống 70-80%
- Không nhất quán: Mỗi trang một màu khác nhau, không có hệ thống màu thống nhất
- Copy màu từ đối thủ: Nên tạo bảng màu riêng để xây dựng thương hiệu
Công cụ chọn màu hữu ích
- ToolHub Color Picker - Chọn và chuyển đổi màu sắc
- Coolors.co - Tạo bảng màu ngẫu nhiên
- Adobe Color - Tạo bảng màu từ bánh xe màu
- Contrast Checker (WebAIM) - Kiểm tra tỷ lệ tương phản
- Color Hunt - Thư viện bảng màu đẹp
- Realtime Colors - Xem màu trên mockup website
Dark Mode - Thiết kế cho chế độ tối
Nhiều người dùng prefer dark mode. Khi thiết kế dark mode:
- Không dùng đen thuần (#000000) làm nền, hãy dùng xám đậm (#111827, #1E293B)
- Giảm brightness của màu chính (primary) xuống khoảng 10-20%
- Tăng nhẹ saturation để màu vẫn nổi bật trên nền tối
- Giảm contrast của text (text trắng #FFFFFF trên nền tối gây mỏi mắt, hãy dùng #E2E8F0)
- Sử dụng CSS variables để dễ dàng chuyển đổi light/dark mode
Câu hỏi thường gặp
Color Picker là gì?
Color Picker là công cụ giúp bạn chọn, tạo, và chuyển đổi màu sắc. Hỗ trợ nhiều định dạng: HEX, RGB, HSL, CMYK. Giúp designer tạo bảng màu hài hòa cho dự án thiết kế web, app, hoặc đồ họa.
Làm sao chọn màu sắc đẹp cho website?
Sử dụng color wheel để tạo bảng màu hài hòa. Chọn 1 màu chính (primary), 1 màu phụ (secondary), và màu trung tính. Áp dụng quy tắc 60-30-10: 60% màu nền, 30% màu phụ, 10% màu nhấn. Đảm bảo độ tương contrast đủ cao cho accessibility.
Độ tương contrast bao nhiêu là đủ cho accessibility?
Theo WCAG 2.1, tỷ lệ tương contrast tối thiểu là 4.5:1 cho text thường và 3:1 cho text lớn (18px+ hoặc 14px+ bold). Cấp độ AAA khuyến nghị 7:1 cho text thường. Sử dụng công cụ Contrast Checker để kiểm tra.
Nên dùng HEX hay RGB trong CSS?
Cả hai đều hoạt động tốt. HEX phổ biến hơn (#FF5733), dễ sao chép từ design tool. RGB linh hoạt hơn khi cần opacity (rgba(255,87,51,0.5)). HSL trực quan nhất cho việc điều chỉnh (hsl(11, 100%, 60%)). Chọn format bạn thấy thoải mái nhất.
Làm sao tạo dark mode cho website?
Sử dụng CSS variables để định nghĩa màu sắc, sau đó tạo theme dark với giá trị màu khác. Dùng prefers-color-scheme media query để tự động phát hiện theme của hệ thống. Giảm brightness và tăng saturation nhẹ cho màu chính trên nền tối.
Chọn màu sắc ngay
Sử dụng Color Picker miễn phí của ToolHub để chọn và tạo bảng màu đẹp.
Mở Color Picker →