Bảng Màu Pro

Bảng Màu Pro - Công Cụ Màu Chuyên Nghiệp

Bộ chọn màu nâng cao với tính năng chuyên nghiệp dành cho designers, developers và artists. Tạo phối màu hài hòa, tạo shades và tints, xem trước gradients, lưu màu yêu thích và nhận thông tin chi tiết về màu. Tất cả tính năng hoạt động offline với cập nhật tức thì. Xem thêm Trộn Màu và Kiểm Tra Độ Tương Phản.

Khác biệt giữa HEX, RGB, HSL và CMYK là gì?

Đây là bốn cách mô tả cùng một màu, mỗi cách phù hợp với một quy trình khác nhau. HEX là viết tắt hệ thập lục phân 6 chữ số của RGB (#FF5733); là chuẩn trong HTML và CSS vì gọn và dễ dán. RGB diễn đạt cùng giá trị thành ba kênh 0-255 (rgb(255,87,51)) và là định dạng bạn thao tác trong JavaScript hoặc canvas. HSL tham số hóa lại cùng màu thành Tông (Hue), Độ Bão Hòa, và Độ Sáng (hsl(9,100%,60%)); là mô hình thân thiện nhất với con người khi làm theme vì bạn có thể giữ tông và chỉ chỉnh độ sáng để tạo tông nhạt và tông đậm. CMYK dùng phần trăm Lục Lam, Hồng Sẫm, Vàng và Đen, tồn tại cho in ấn — màn hình không thể hiển thị CMYK thực, nên giá trị bạn thấy ở đây chỉ là xấp xỉ toán học.

Làm sao chọn màu và sao chép chỉ với một click?

Bấm vào ô màu chính để mở bộ chọn màu mặc định của trình duyệt, kéo trong dải gradient và trên thanh trượt tông cho đến khi tìm thấy màu mong muốn, rồi đóng hộp thoại. Bốn trường định dạng (HEX, RGB, HSL, CMYK) cập nhật theo thời gian thực. Bấm vào trường bất kỳ — hoặc biểu tượng sao chép của nó — để sao chép biểu diễn đó vào clipboard; một thông báo xác nhận. Để lấy màu bạn thấy trên màn hình, dùng cây nhỏ giọt cấp hệ thống mà Chrome cung cấp (biểu tượng nhỏ trong bộ chọn mặc định trên trình duyệt Chromium). Để thử nhanh, bấm Ngẫu Nhiên liên tục cho đến khi có gì đó hợp ý rồi tinh chỉnh bằng cách nắn giá trị HSL. Lưu kết quả bằng nút Lưu để giữ trong thư viện localStorage cho phiên sau.

Hài hòa màu là gì và khi nào dùng từng loại?

Hài hòa màu là các nhóm tông có liên hệ toán học mà mắt đọc là dễ chịu khi đặt cạnh nhau. Bổ Túc (đối diện trên vòng tròn, xanh dương + cam) cho tương phản mạnh nhất — dùng cho một điểm nhấn trên nền trung tính. Tương Tự (ba tông cách nhau 30 độ) cảm giác tự nhiên, thanh thản — dùng cho trang biên tập và chủ đề thiên nhiên. Tam Giác (ba tông cách nhau 120 độ) táo bạo và cân bằng — dùng cho thương hiệu vui nhộn và infographic. Tứ Giác (hai cặp bổ túc tạo hình vuông) phong phú nhất và khó nhất — để một tông chiếm ưu thế còn các tông khác hỗ trợ. Đơn Sắc (một tông, nhiều độ sáng) là lựa chọn an toàn nhất — dùng cho UI tối giản tinh tế. Áp dụng quy tắc 60-30-10: 60% chủ đạo, 30% phụ, 10% điểm nhấn, bất kể bạn chọn hài hòa nào.

Khác biệt giữa tông đậm (shade), tông nhạt (tint) và tông xám (tone) là gì?

Theo lý thuyết màu cổ điển, tông đậm là màu gốc trộn với đen (đậm hơn, thường kịch tính hơn); tông nhạt là màu gốc trộn với trắng (sáng hơn, thường mềm hơn); tông xám là màu gốc trộn với xám (trầm hơn, thường tinh tế hơn). Theo thuật ngữ kỹ thuật số, tất cả đều là chỉnh sửa HSL: tông đậm giảm độ sáng, tông nhạt tăng độ sáng, và tông xám giảm độ bão hòa. Các hệ thống thiết kế thường tạo dải 9 mốc từ 50 (tông nhạt nhất) đến 900 (tông đậm nhất) cho mỗi màu thương hiệu, để mọi thành phần UI — nút, cảnh báo, nền, viền — đều có thể lấy giá trị nhất quán từ cùng một tông. Công cụ này sinh tông đậm và tông nhạt tự động; sao chép cả dải làm điểm khởi đầu cho design tokens.

Làm sao tạo gradient CSS tuyến tính hoặc tỏa tròn từ bộ chọn này?

Chọn màu chính, rồi dùng hài hòa như Tương Tự hoặc Bổ Túc để có màu thứ hai mà mắt chấp nhận như pha trộn mượt. Chuyển xem trước gradient giữa Tuyến Tính và Tỏa Tròn. Gradient tuyến tính chảy theo đường thẳng với góc cho trước (linear-gradient(135deg, #A 0%, #B 100%)) và tốt nhất cho nền, phần hero và nút; 135deg là mặc định an toàn nhất vì đọc như ánh sáng tự nhiên từ trên-trái. Gradient tỏa tròn phát ra từ điểm tiêu (radial-gradient(circle at center, #A, #B)) và tốt nhất cho hiệu ứng phát sáng, đèn chiếu và avatar hình quả cầu. Sao chép chuỗi CSS sinh ra trực tiếp vào stylesheet. Để tương phản tốt nhất, đặt chữ trên lớp phủ đặc chứ không trực tiếp trên gradient.

Công cụ quyết định đề xuất chữ trắng hay đen trên màu tôi chọn thế nào?

Nó tính luminance tương đối WCAG của nền: chuyển mỗi kênh RGB thành giá trị tuyến tính, rồi cộng có trọng số L = 0.2126 R + 0.7152 G + 0.0722 B (xanh lá chiếm ưu thế vì mắt người nhạy nhất với nó). Sau đó nó đo tỷ lệ tương phản thực của màu so với trắng tinh và đen tuyền, rồi đề xuất bên nào cho tỷ lệ cao hơn. Đây là quyết định WCAG đích thực, không phải lối tắt độ sáng NTSC, nên nó không bao giờ chọn phương án tương phản thấp hơn kể cả với tông trung bão hòa. Màu đề xuất cập nhật ngay khi bạn đổi màu chính, và bảng Tương Phản & Khả Năng Tiếp Cận hiển thị tỷ lệ chính xác.

Tôi cần tỷ lệ tương phản bao nhiêu để đạt chuẩn WCAG?

WCAG 2.1 quy định tỷ lệ tương phản tối thiểu giữa chữ và nền tùy theo cỡ chữ và mức tuân thủ. Với Mức AA — nền tảng pháp lý của ADA tại Mỹ và EN 301 549 tại EU — chữ thân thường phải đạt ít nhất 4.5:1, còn chữ lớn (18pt / 24px thường, hoặc 14pt / 18.66px đậm) chỉ cần 3:1 vì chữ to dễ đọc hơn. Với Mức AAA nghiêm ngặt hơn, chữ thường phải đạt 7:1 và chữ lớn 4.5:1. Các thành phần giao diện và đối tượng đồ họa (biểu tượng, viền form, vòng focus) cần 3:1 so với màu liền kề. Công cụ này lấy màu bạn chọn làm nền và hiển thị tương phản so với chữ trắng và đen, gắn nhãn AAA, AA, AA Lớn hoặc Không Đạt để bạn xác nhận tuân thủ trước khi phát hành — nhưng luôn kiểm tra cặp tiền cảnh/nền thực bạn định dùng, vì chữ hiếm khi là trắng hoặc đen tuyệt đối.

Làm sao lưu màu thương hiệu và xây lại bảng màu sau này?

Chọn hoặc dán màu, rồi bấm Lưu. Công cụ lưu mỗi ô vào localStorage của trình duyệt, nên nó sống sót qua tải lại trang và đóng tab nhưng chỉ ở thiết bị này. Lưu toàn bộ phổ thương hiệu ngay từ đầu — chính, phụ, ba bốn điểm nhấn, một trung tính và các màu ngữ nghĩa (thành công, cảnh báo, nguy hiểm) — và bạn có thư viện cá nhân tải tức thì mỗi lần ghé. Bấm bất kỳ ô đã lưu để đẩy nó về vị trí màu chính, rồi rút ra hài hòa, gradient hoặc dải tông từ đó. Để chia sẻ nhóm, xuất giá trị HEX sang JSON design token hoặc dán vào tài liệu styles Figma; localStorage không tự đồng bộ giữa thiết bị. Dùng Xóa Tất Cả để dọn thư viện khi bắt đầu dự án khách mới.

Có hệ lụy gì về mù màu khi thiết kế với bảng năm màu?

Khoảng 8% nam giới và 0.5% nữ giới có dạng khiếm khuyết thị giác màu nào đó, phổ biến nhất là nhầm đỏ-xanh lá (deuteranopia và protanopia). Bảng màu phụ thuộc vào đỏ so với xanh lá để truyền tải ý nghĩa (biểu tượng lỗi đỏ kế bên biểu tượng thành công xanh) sẽ trông y hệt với người dùng này. Ba phòng thủ: (1) đừng bao giờ chỉ dùng màu để truyền trạng thái — thêm hình biểu tượng, nhãn hoặc hoa văn; (2) kiểm tra bảng màu qua trình mô phỏng mù màu (Trình Mô Phỏng Mù Màu trên site này là một); (3) ưu tiên khác biệt tông trên trục xanh dương-vàng khi buộc phải dựa vào màu, vì những phân biệt đó sống sót qua hầu hết loại mù màu. Chạy cặp tiền cảnh/nền cuối cùng qua cả công cụ kiểm tra tương phản WCAG và trình mô phỏng CVD trước khi phát hành.

Tính Năng Chuyên Nghiệp

• Bộ chọn màu nâng cao với xem trước lớn
• 5 chế độ phối màu hài hòa (Bổ sung, Tương tự, Tam giác, Tứ giác, Đơn sắc)
• Tạo shades (tối hơn) và tints (sáng hơn) tự động
• Tạo gradients tuyến tính và hướng tâm với xem trước
• Lưu màu yêu thích không giới hạn vào trình duyệt
• Copy tất cả định dạng màu (HEX, RGB, HSL, CMYK, CSS gradients)
• Thông tin màu real-time (độ sáng, độ chiếu sáng)
• Gợi ý màu text tốt nhất (trắng/đen trên màu)
• Click bất kỳ màu nào để dùng làm màu chính
• Cập nhật tức thì - không cần nút convert
• Xử lý 100% phía client
• Hoạt động offline sau lần load đầu
• Hỗ trợ chế độ tối
• Thiết kế responsive thân thiện mobile
• Export bảng màu
• Công cụ màu cấp chuyên nghiệp