Sử dụng màu trên website

Tôi sẽ giải thích chi tiết về ý nghĩa và cách sử dụng từng nhóm màu:

Primary (Màu chính):

main: Màu chủ đạo của thương hiệu/website
light: Phiên bản nhạt hơn, dùng cho hover, background, disabled states
dark: Phiên bản đậm hơn, dùng cho hover states, borders, text

Ví dụ sử dụng:
Main: Nút CTA chính, logo, header
Light: Background panels, hover states
Dark: Text, borders quan trọng

Secondary (Màu phụ):

main: Màu phụ trợ, bổ sung cho màu chính
light: Phiên bản nhạt của màu phụ
dark: Phiên bản đậm của màu phụ Ví dụ sử dụng:
Main: Nút thứ cấp, accents
Light: Backgrounds phụ
Dark: Text phụ

Accent (Màu nhấn):

main: Màu dùng để nhấn mạnh, tạo điểm nhìn
light: Dùng cho hover states của accent
dark: Dùng cho active states của accent Ví dụ sử dụng:
Main: Badges, tags, highlights
Light: Hover states của các elements accent
Dark: Active states hoặc text trên nền accent

Neutral (Màu trung tính):

white: Màu trắng thuần
light: Xám nhạt
medium: Xám trung bình
dark: Xám đậm
black: Màu đen thuần Ví dụ sử dụng:
White: Background chính
Light: Border nhẹ, dividers
Medium: Disabled text, placeholder
Dark: Text phụ
Black: Text chính

Semantic (Màu ngữ nghĩa):

success: Màu xanh lá – thành công/hoàn thành
warning: Màu cam – cảnh báo/chú ý
error: Màu đỏ – lỗi/thất bại
info: Màu xanh dương – thông tin Ví dụ sử dụng:
Success: Thông báo thành công, checkmarks
Warning: Alert cảnh báo
Error: Thông báo lỗi, validate forms
Info: Tips, tooltips

Nguyên tắc sử dụng:

Consistency (Nhất quán):

Primary: 60% thiết kế
Secondary: 30% thiết kế
Accent: 10% thiết kế

Contrast (Độ tương phản):

Text dark trên background light
Text light trên background dark
Đảm bảo độ tương phản đạt WCAG standards

Hierarchy (Thứ bậc):

Primary: Thu hút chú ý nhất
Secondary: Ít thu hút hơn
Neutral: Tạo cấu trúc và layering

Purpose (Mục đích):

Semantic colors: Chỉ dùng cho đúng mục đích
Accent: Dùng có chủ đích để tạo focal points

Accessibility (Khả năng tiếp cận):

Đảm bảo đủ contrast ratio
Không phụ thuộc vào màu sắc để truyền tải thông tin
Có các indicator phụ trợ (icons, text)

Tôi sẽ giải thích chi tiết từng loại màu và cách sử dụng chúng:

Đảm bảo đủ contrast ratio

Không phụ thuộc vào màu sắc để truyền tải thông tin

Primary (Màu chính):

Đây là màu quan trọng nhất, thể hiện bản sắc thương hiệu/website
Thường được sử dụng 60% trong thiết kế
Ví dụ thực tế:
- Facebook: Màu xanh dương
- Coca-Cola: Màu đỏ
- McDonald’s: Màu vàng
Áp dụng cho:
- Logo
- Header website
- Nút CTA (Call-to-action) chính
- Navigation menu
- Links chính
- Brand elements

Secondary (Màu phụ):

Là màu hỗ trợ cho màu chính, tạo sự cân bằng
Chiếm khoảng 30% thiết kế
Thường là màu bổ sung (complementary) hoặc tương đồng với màu chính
Áp dụng cho:
- Nút thứ cấp
- Sidebars
- Cards/Panels
- Secondary headings
- Decorative elements
- Backgrounds phụ

Accent (Màu nhấn):

Màu nổi bật để thu hút sự chú ý
Chỉ sử dụng 10% trong thiết kế
Tạo điểm nhấn và tương phản
Áp dụng cho:
- Badges/Labels
- Highlights
- Important notices
- Featured content
- Progress indicators
- Special offers

Neutral (Màu trung tính):

Là những màu không có sắc độ rõ ràng
Tạo nền tảng cho các màu khác
Gồm thang độ từ trắng đến đen
Áp dụng cho:
- Background chính
- Text
- Borders
- Dividers
- Shadows
- Form elements
- Disabled states

Semantic (Màu ngữ nghĩa):

Màu mang ý nghĩa thông điệp cụ thể
Được sử dụng nhất quán để người dùng dễ nhận biết
Gồm 4 màu cơ bản:
- Success (Xanh lá):
  - Thành công
  - Hoàn thành
  - Đã xác nhận
  - Positive feedback
- Warning (Cam/Vàng):
  - Cảnh báo
  - Chú ý
  - Đang xử lý
  - Cần xác nhận
- Error (Đỏ):
  - Lỗi
  - Thất bại
  - Nguy hiểm
  - Negative feedback
- Info (Xanh dương):
  - Thông tin
  - Hướng dẫn
  - Tips
  - Neutral notifications

Nguyên tắc kết hợp màu:

Quy tắc 60-30-10:

60% màu chính
30% màu phụ
10% màu nhấn

Đảm bảo tương phản:

Giữa text và background
Giữa các elements
Giữa foreground và background

Tính nhất quán:

Sử dụng màu đúng mục đích
Không lạm dụng màu nhấn
Giữ semantic colors cho đúng ngữ cảnh

Accessibility:

Đủ contrast ratio
Có alternatives cho colorblind users
Không chỉ dựa vào màu để truyền đạt thông tin

Ví dụ cụ thể về một bộ màu:

:root {
  /* Primary */
  --primary-main: #1976d2;    /* Nút CTA, Header */
  --primary-light: #42a5f5;   /* Hover states */
  --primary-dark: #1565c0;    /* Active states */

  /* Secondary */
  --secondary-main: #9c27b0;  /* Secondary buttons */
  --secondary-light: #ba68c8; /* Hover effects */
  --secondary-dark: #7b1fa2;  /* Active states */

  /* Accent */
  --accent-main: #ff4081;     /* Badges, highlights */
  --accent-light: #ff80ab;    /* Hover states */
  --accent-dark: #f50057;     /* Active states */

  /* Neutral */
  --neutral-white: #ffffff;   /* Background */
  --neutral-light: #f5f5f5;   /* Cards, panels */
  --neutral-medium: #9e9e9e;  /* Disabled text */
  --neutral-dark: #212121;    /* Text */
  --neutral-black: #000000;   /* Headings */

  /* Semantic */
  --success: #4caf50;         /* Success messages */
  --warning: #ff9800;         /* Warning alerts */
  --error: #f44336;          /* Error messages */
  --info: #2196f3;           /* Info alerts */
}

Design

Sử dụng màu trên website

Primary (Màu chính):

Ví dụ cụ thể về một bộ màu:

Leave a Reply Cancel reply