🎨 Các Mã Màu CSS Chuẩn Hay Dùng Trong Thiết Kế Web

Trong thiết kế web, việc chọn đúng màu sắc là cực kỳ quan trọng để tạo nên trải nghiệm người dùng tốt. Dưới đây là danh sách những màu CSS chuẩn thường dùng, đi kèm mã màu (HEX, RGB, hoặc tên màu), và ứng dụng cụ thể.

🔵 1. Màu Xanh (#007BFF)

• Tên màu: Primary Blue
• Mã màu: #007BFF (Bootstrap)
• Công dụng: Nút chính, liên kết nổi bật

🟢 2. Màu Xanh Lá (#28A745)

• Tên màu: Success Green
• Mã màu: #28A745
• Công dụng: Hiển thị trạng thái thành công (success)

🟡 3. Màu Vàng Cảnh Báo (#FFC107)

• Tên màu: Warning Yellow
• Mã màu: #FFC107
• Công dụng: Hiển thị thông báo cảnh báo

🔴 4. Màu Đỏ Báo Lỗi (#DC3545)

• Tên màu: Danger Red
• Mã màu: #DC3545
• Công dụng: Báo lỗi, nút xóa

⚪ 5. Màu Trắng (#FFFFFF) & ⚫ Đen (#000000)

• Tên màu: Basic White & Black
• Mã màu: #FFFFFF và #000000
• Công dụng: Nền, chữ chính

🌫️ 6. Màu Xám (#6C757D, #F8F9FA)

• Mã màu:
  
  • #6C757D – chữ phụ, icon
  • #F8F9FA – nền nhẹ nhàng
• Công dụng: Nền phụ, viền, phân biệt thành phần

🟣 7. Màu Tím (#6F42C1)

• Tên màu: Secondary Purple
• Mã màu: #6F42C1
• Công dụng: Thẻ phụ, nhấn mạnh nhẹ nhàng

📘 Bảng Màu CSS Chuẩn Bootstrap (Thường Dùng)

Tên màu	Mã màu HEX	Mô tả
Primary	#007BFF	Màu chính
Success	#28A745	Thành công
Danger	#DC3545	Báo lỗi
Warning	#FFC107	Cảnh báo
Info	#17A2B8	Thông tin nhẹ nhàng
Light	#F8F9FA	Nền sáng
Dark	#343A40	Nền tối, chữ đậm

📸 Hình Minh Họa Màu CSS

Dưới đây là hình ảnh minh họa các màu được dùng phổ biến:

(Nếu bạn cần hình minh họa gốc để nhúng vào website mà không phụ thuộc vào bên ngoài, mình có thể tạo file SVG hoặc PNG tùy ý.)

✅ Mẹo Chọn Màu

• Dùng các bộ màu chuẩn như Bootstrap, Tailwind, hoặc Material Design để dễ quản lý.
• Luôn kiểm tra độ tương phản giữa màu nền và chữ: https://webaim.org/resources/contrastchecker/
• Kết hợp màu sắc hợp lý bằng các công cụ như coolors.co hoặc colormind.io