Socolor Designer by ThangTran

Mỗi ô màu đã tính contrast với nền đang chọn ở phần WCAG. Click để copy & xem chi tiết trong Color Inspector.

Dùng cho background hero, banner, cover… Các màu đều sinh từ màu thương hiệu để đảm bảo đồng bộ.

Analogous / Triadic / Monochromatic / Complementary sinh từ màu thương hiệu theo vòng màu (HSL).

1. Bảng màu thương hiệu

Primary: màu nhận diện chính của thương hiệu. Dùng cho heading, nút chính, vùng quan trọng.
Secondary: màu phụ hỗ trợ Primary. Dùng cho nút phụ, label, icon, chi tiết UI.
Background: màu nền rất nhạt để làm nền web / section. Giúp giữ cảm giác sạch và dễ đọc.
Accent: màu nhấn mạnh (CTA, icon quan trọng, highlight). Chỉ dùng ít để tạo điểm “bật”.
Gợi ý dùng màu (chuẩn UI): 60% Background – 30% Primary – 10% Accent → giữ brand rõ ràng mà vẫn dễ nhìn.

2. Bảng màu lý thuyết

Analogous: 3 màu hàng xóm trên vòng màu → mượt, êm, ít tương phản.
Triadic: 3 màu cách đều 120° → tươi, năng động, dùng cho layout nhiều khối.
Monochromatic: 1 hue, nhiều độ sáng → cực an toàn, khó sai, phù hợp UI & dashboard.
Complementary: 2 màu đối diện → tương phản mạnh, dùng khi cần nhấn rất rõ.

3. Chuẩn kỹ thuật WCAG

Text thường nên có contrast ≥ 4.5:1 (AA).
Text lớn (>= 18px đậm) có thể dùng từ 3:1 trở lên.
Pill trên từng màu cho biết contrast giữa màu đó và nền #FFFFFF (đỏ = fail, vàng = chỉ dùng cho text lớn, xanh = OK).

Kiểm tra độ tương phản giữa màu chữ và màu nền theo chuẩn WCAG 2.1 (AA / AAA).

Nền Chữ

Selected color

—

Color model

RGB: —

Nền để test contrast

#FFFFFF

Text đề xuất: #000000

Contrast: —

AA AAA

Socolor Designer

TĂNG TỐC THỜI GIAN THIẾT KẾ

Xoá bỏ rào cản thẩm mỹ trong sáng tạo nội dung.

1. Nội dung

2. Phong cách Font

Heading: Font

Sub: Font

by ThangTran

Bố cục

Xuất hình

Lưu khung text hiện tại thành ảnh.