chèn html 2

BB

Ban biên tập

Đội ngũ Nghiên cứu Trải nghiệm • Cập nhật: 29/09/2026

```html

Editorial Design Journal Color System / 2026

Website Color Guide

Thiết kế màu sắc website để đẹp hơn, rõ ràng hơn và có cá tính hơn

Một website tốt không cần thật nhiều màu. Điều quan trọng là biết màu nào dùng để dẫn mắt, màu nào tạo nhận diện và màu nào nên lùi lại để nội dung được nổi bật.

01 / Color System

Hãy bắt đầu từ một hệ thống màu, không phải từ vài mã HEX ngẫu nhiên

Nhiều giao diện trở nên rối mắt vì mỗi thành phần lại sử dụng một màu khác nhau. Thay vì chọn màu theo cảm tính, hãy xác định trước vai trò cho từng nhóm màu: màu thương hiệu, màu phụ, màu nhấn, màu nền và màu chữ.

Khi mỗi màu có một nhiệm vụ rõ ràng, việc thiết kế button, card, banner, form hay các trạng thái hover sẽ trở nên nhất quán hơn rất nhiều.

Primary#6F61FF

Secondary#17B9AA

Accent#FF8B5B

Surface#F1EEE7

Text#14151A

Editorial Note

“Một bảng màu tốt không khiến người dùng chú ý đến màu sắc. Nó khiến họ tự nhiên biết nên nhìn vào đâu trước.”

02 / Balance

Dùng tỷ lệ màu để giao diện có điểm nhấn nhưng không bị quá tải

Có thể tham khảo nguyên tắc 60–30–10. Phần lớn diện tích dành cho màu nền trung tính, tiếp đến là màu thương hiệu và chỉ một phần nhỏ cho màu nhấn.

60%

Background

Tạo khoảng thở và giúp nội dung dễ đọc trong thời gian dài.

30%

Brand

Mang nhận diện thương hiệu vào heading, card, icon hoặc section.

10%

Accent

Dành cho CTA, trạng thái quan trọng hoặc thông tin cần chú ý.

03 / Gradient

Gradient nên tạo cảm xúc và chiều sâu, không nên trở thành hiệu ứng trang trí dư thừa

Với phong cách editorial hoặc Awwwards, gradient có thể trở thành một phần của nhận diện thị giác. Hãy dùng nó ở hero, block showcase hoặc vùng chuyển tiếp, nhưng tránh đặt gradient mạnh phía sau đoạn văn dài.

04 / Accessibility

Màu đẹp nhưng khó đọc vẫn là một thiết kế không tốt

Độ tương phản giữa chữ và nền cần được ưu tiên trước hiệu ứng thị giác. Những nội dung dài nên dùng nền trung tính và text tối thay vì các cặp màu quá chói.

Với button và CTA, hãy kiểm tra cả trạng thái mặc định, hover, focus, active và disabled. Đừng chỉ thiết kế một màu cho trạng thái ban đầu.

05 / Final Check