Tạo Bảng Màu

Tạo Bảng Màu - Tạo Phối Màu Đẹp Mắt

Công cụ tạo bảng màu mạnh mẽ với hai chế độ: tạo thủ công với quy tắc hài hòa màu (đơn sắc, tương tự, bổ sung, tam giác, tứ giác) và trích xuất tự động từ hình ảnh sử dụng thuật toán lượng tử hóa màu nâng cao. Tính năng bao gồm 12 bảng màu có sẵn, nhiều định dạng xuất (CSS, SCSS, JSON, Array), và khả năng tải xuống bảng màu dưới dạng hình ảnh. Hoàn hảo cho designers, developers và bất kỳ ai làm việc với màu sắc. Xem thêm Tạo Gradient và Trộn Màu.

Làm sao tạo nhanh một bảng màu cho dự án mới?

Hãy bắt đầu với màu mà bạn đã tin tưởng — thường là màu chính của thương hiệu, một điểm nhấn từ ảnh hero, hoặc cảm xúc bạn muốn truyền tải. Dán mã HEX vào bộ chọn màu gốc, rồi bấm một nút hài hòa: Tương Tự cho phối màu nhẹ nhàng, ít xung đột (tốt cho website nội dung); Bổ Túc cho tương phản mạnh hai màu (tốt cho nút kêu gọi hành động); Tam Giác phân phối ba điểm nhấn cân bằng (tốt cho thiết kế biên tập). Nếu chưa có màu khởi đầu, thả ảnh cảm hứng vào chế độ Từ Hình Ảnh và để thuật toán k-means rút ra năm màu chủ đạo. Tinh chỉnh từng ô màu rồi xuất ra. Bảng màu nháp đầu tiên chỉ mất dưới hai phút, sau đó bạn có thể mở rộng bằng Tông Đậm và Tông Nhạt để thành một dải đầy đủ cho hệ thống thiết kế.

Khác biệt giữa hài hòa đơn sắc, tương tự, bổ túc, tam giác và tứ giác là gì?

Đây là năm vị trí kinh điển trên vòng tròn màu HSL. Đơn sắc giữ một tông duy nhất và chỉ thay đổi độ sáng và độ bão hòa — yên tĩnh nhất, khó dùng sai. Tương Tự chọn các tông kề nhau trong khoảng 30 độ (xanh dương, xanh ngọc, xanh lá) — tự nhiên và liền mạch. Bổ Túc chọn tông đối diện 180 độ (xanh dương cộng cam) — căng thẳng thị giác tối đa, lý tưởng cho một điểm nhấn trên một nền. Tam Giác chọn ba tông cách nhau 120 độ (đỏ, vàng, xanh dương) — cân bằng nhưng sinh động, thường thấy ở thương hiệu vui nhộn. Tứ Giác chọn hai cặp bổ túc tạo thành hình chữ nhật trên vòng — phong phú nhất và khó kiểm soát nhất; thường một màu chiếm ưu thế còn ba màu kia đóng vai trò hỗ trợ. Hãy chọn quy tắc khớp với âm lượng cảm xúc của trang.

Trích xuất màu từ hình ảnh hoạt động thế nào?

Khi bạn tải ảnh lên, công cụ giảm mẫu xuống số pixel quản lý được, rồi chạy phân cụm k-means trong không gian RGB. Mỗi pixel được xem như một điểm 3D; thuật toán chọn k tâm cụm ngẫu nhiên (k là số màu bạn chọn), gán mỗi pixel cho tâm gần nhất, tính lại tâm là trung bình các pixel thuộc cụm, và lặp đến khi tâm ổn định. Kết quả là k màu tối thiểu hóa tổng khoảng cách đến mọi pixel — chính là những tông đại diện nhất trong ảnh. Công cụ xử lý JPEG, PNG, WebP, BMP và GIF tới 10MB ngay trên trình duyệt; không gì gửi lên máy chủ. Cho công việc thương hiệu, hãy thử logo, ảnh sản phẩm và moodboard; thuật toán tự nhiên rút ra màu chủ đạo chứ không phải pixel nổi bật hiếm gặp.

Làm sao xuất bảng màu sang Figma, Adobe XD hoặc dự án code?

Dùng đúng định dạng cho mỗi đích đến. Với Figma và Adobe XD, sao chép danh sách HEX và dán từng ô màu, hoặc xuất JSON và nhập qua plugin đồng bộ token như Tokens Studio. Với CSS thuần, dùng CSS Variables — sinh ra :root { --color-1: #...; } mà bạn tham chiếu bằng var(--color-1) khắp stylesheet, cho phép ghi đè theme chỉ một dòng. Với pipeline Sass/SCSS, SCSS Variables sinh $color-1: #...; biên dịch lúc build. Với ứng dụng JavaScript (React, Vue, cấu hình Tailwind), dùng Array hoặc JSON và đưa vào đối tượng theme. Cho buổi thuyết trình khách hàng, tải ảnh PNG bảng màu. Luôn đổi tên --color-1 thành tên ngữ nghĩa như --brand-primary hoặc --surface-elevated trước khi lên production.

Bảng màu của một hệ thống thiết kế thực sự cần bao nhiêu màu?

Một hệ thống thiết kế thực dụng cần nhiều hơn năm sáu màu một hài hòa tạo ra. Mô hình phổ biến là: một màu chính thương hiệu cộng 9 tông sáng/đậm của nó (mốc 50, 100, 200 ... 900); một hoặc hai màu phụ với cùng dải; một dải xám trung tính 9-12 mốc cho chữ, viền và bề mặt; cộng năm màu ngữ nghĩa (xanh thành công, vàng cảnh báo, đỏ nguy hiểm, xanh thông tin, vòng focus) mỗi màu có cặp sáng/tối riêng. Tổng cộng khoảng 50-70 token. Hãy dùng công cụ này khóa năm tông gốc, rồi dùng nút Tông Đậm và Tông Nhạt mở rộng mỗi tông thành dải đầy đủ. Material Design, Tailwind và Radix đều theo các phiên bản của cấu trúc này.

Bảng màu của tôi có đạt chuẩn WCAG không, và đọc bảng kiểm tra tương phản tích hợp thế nào?

Một bảng màu đẹp vô dụng nếu người dùng không đọc được chữ, nên công cụ nay đã tích hợp sẵn bảng Kiểm Tra Tương Phản WCAG ngay dưới phần tùy chọn xuất. Với mỗi ô màu, nó tính tỷ lệ tương phản so với trắng (#FFF) và đen (#000) bằng công thức độ chói tương đối tiêu chuẩn của WCAG 2.1, rồi cho biết màu chữ tốt nhất để đặt lên ô đó. Đọc các huy hiệu như sau: AAA nghĩa là tỷ lệ từ 7:1 trở lên; AA nghĩa là ít nhất 4.5:1, đạt cho chữ thường; AA Lớn nghĩa là từ 3:1 đến 4.5:1, chỉ an toàn cho chữ lớn (18pt, hoặc 14pt đậm); huy hiệu đỏ Không Đạt nghĩa là dưới 3:1, không dùng được cho chữ. Các tông trung gian thường thất bại — một màu xanh ngọc rực rỡ trông đẹp nhưng hiếm khi đạt trên nền trắng, nên bảng kiểm tra sẽ hướng bạn dùng chữ đen. Để sửa một cặp không đạt, hãy làm tối tiền cảnh hoặc chỉ ghép màu thương hiệu với màu trắng hay đen mà bảng đề xuất.

Làm sao tinh chỉnh kết quả hài hòa khi nó quá lòe loẹt hoặc quá nhạt?

Hài hòa thô từ vòng tròn màu thường cho kết quả bão hòa quá đáng như hoạt hình vì giữ nguyên độ bão hòa và độ sáng của màu gốc cho mọi mẫu. Cách sửa là chuyển từng mẫu sang HSL và điều chỉnh độc lập. Để làm dịu bảng màu lòe loẹt: giảm độ bão hòa các màu hỗ trợ xuống 30-50% trong khi giữ màu thương hiệu bão hòa cao; đây là nguyên tắc chính-với-nhạt đứng sau hầu như mọi bảng màu thương hiệu cao cấp. Để đánh thức bảng màu nhạt: đẩy mạnh tương phản độ sáng — đặt một mẫu gần 95% (bề mặt gần trắng) và một mẫu gần 15% (chữ gần đen). Quy tắc 60-30-10 là mặc định đã được chứng minh: 60% trung tính chủ đạo, 30% phụ, 10% điểm nhấn. Dùng công cụ này tạo phép toán, rồi nắn HSL theo gu.

Tại sao màu trích xuất từ ảnh của tôi trông nhạt hơn ảnh gốc?

Hai chuyện đang xảy ra. Thứ nhất, k-means trả về trung bình của mỗi cụm, mà trung bình của một điểm sáng bão hòa cộng một tông trung gian tối luôn là tông ít bão hòa hơn — lấy trung bình đương nhiên giảm bão hòa. Thứ hai, ảnh dựa nhiều vào tương phản vi mô và chuyển tiếp gradient sẽ mất khi bạn giảm hàng nghìn pixel xuống năm mẫu phẳng. Sửa: trích xuất lại với số màu cao hơn (10 thay vì 5) và bạn sẽ lấy lại các điểm nhấn rực rỡ đang bị trung bình hóa. Sau đó xóa thủ công các màu trung gian đục và chỉ giữ các điểm sáng bão hòa và bóng tối nhất. Cách khác, lấy mẫu trực tiếp bằng cây nhỏ giọt trên pixel sống động nhất thay vì dựa trung bình cụm — hữu ích khi bạn muốn một màu phát sáng cụ thể, không phải trung bình.

Tính Năng Chính

• Hai chế độ tạo: Thủ Công và Từ Hình Ảnh
• Trích xuất màu chủ đạo từ hình ảnh
• 8 phương pháp tạo hài hòa màu
• Tạo bảng màu đơn sắc
• Phối màu tương tự
• Cặp màu bổ sung
• Hài hòa tam giác và tứ giác
• Tạo sắc tối và sáng
• Tạo bảng màu ngẫu nhiên
• Thuật toán phân cụm K-means cho trích xuất ảnh
• Thêm/xóa màu (2-10 màu)
• 12 bảng màu có sẵn đẹp mắt
• Xem trước màu trực tiếp với tên
• Nhấp màu để sao chép mã hex
• Xáo trộn và đảo ngược bảng màu
• Xuất sang CSS Variables
• Xuất sang SCSS Variables
• Xuất sang định dạng JSON
• Xuất sang JavaScript Array
• Tải xuống bảng màu dưới dạng PNG
• Kéo thả để tải ảnh lên
• Hỗ trợ JPEG, PNG, WebP, BMP, GIF
• Điều chỉnh số lượng màu (3-10)
• Thiết kế responsive cho mobile
• Hỗ trợ chế độ tối
• Xử lý 100% phía client
• Không gửi dữ liệu lên server