Bảng Màu / Trích Màu

Trích một bảng màu từ bất kỳ ảnh nào, hoặc tạo một dải tint và shade mượt mà từ một màu gốc duy nhất. Mọi thứ chạy ngay trong trình duyệt, nên ảnh của bạn không bao giờ rời khỏi thiết bị.

Các bước sử dụng

1. Chọn chế độ bằng công tắc phân đoạn ở trên cùng: Trích từ ảnh, Tạo từ màu hoặc Bộ sưu tập chọn lọc.
2. Ở chế độ Trích từ ảnh, nhấn Tải ảnh lên và chọn một tệp ảnh bất kỳ (PNG, JPG, v.v.). Công cụ sẽ thu nhỏ ảnh và trả về 8 màu phổ biến nhất dưới dạng các ô màu, kèm ảnh thu nhỏ để xem trước.
3. Ở chế độ Tạo từ màu, mở bộ chọn Màu gốc (Base color) và chọn một màu (hoặc nhập mã hex). Công cụ sẽ tạo dải 9 bậc gồm tint (ngả về trắng) và shade (ngả về đen) cùng tông màu và độ bão hòa.
4. Ở chế độ Bộ sưu tập chọn lọc, bạn có 284 bảng màu dựng sẵn. Lọc bớt bằng ô chọn nhóm — Tất cả nhóm, Classic, Nature, Keycaps, Vintage, Modern, Bold, Soft, Monochrome, Seasonal, Artistic — hoặc gõ vào ô Tìm bảng màu… để tìm theo tên. Bên cạnh các ô điều khiển có bộ đếm cho biết còn lại bao nhiêu bảng màu, và nút Xem thêm nạp tiếp đợt sau.
5. Bấm vào một thẻ bảng màu để mở nó ở khung bên dưới; bấm Dùng trong trình tạo (biểu tượng mũi tên trên thẻ, hoặc nút ở tiêu đề khung) để đưa nó sang trình tạo, nơi màu đầu tiên của bảng trở thành màu gốc cho dải tint/shade.
6. Nhấn vào bất kỳ ô màu nào để sao chép mã hex của nó vào clipboard, hoặc dùng biểu tượng sao chép trên thẻ để lấy toàn bộ màu của bảng đó cùng lúc.
7. Dùng nút Copy CSS vars ở tiêu đề bảng màu để sao chép toàn bộ dưới dạng khối :root { --color-1 … }, sẵn sàng dán vào tệp stylesheet.

Mẹo

• Việc trích màu dựa trên tần suất xuất hiện của từng màu, nên nền chủ đạo và các vùng màu phẳng lớn sẽ nổi lên trước — hãy cắt ảnh trước nếu bạn muốn lấy màu từ một vùng cụ thể.
• Chế độ tạo màu giữ nguyên tông màu và độ bão hòa của màu gốc, chỉ thay đổi độ sáng, rất phù hợp để dựng các thang màu giao diện đồng nhất.
• Mã hex hiển thị dưới mỗi ô màu dùng phông monospace nên dễ đọc và sao chép chính xác.
• Ba chế độ nối tiếp nhau rất tự nhiên: bắt đầu ở Bộ sưu tập chọn lọc để tìm hướng màu bạn thích, đưa nó sang trình tạo bằng Dùng trong trình tạo, rồi rút ra một dải độ sáng đầy đủ từ màu chủ đạo của nó.
• Khi bạn chọn một nhóm, công cụ hiển thị luôn một dòng mô tả nhóm đó dùng cho việc gì — nhanh hơn là mở từng bảng màu ra xem.
• Ô tìm kiếm khớp theo tên bảng màu, nên hãy thử gõ một địa danh hoặc một tâm trạng — bộ sưu tập được đặt tên chứ không đánh số.

Câu hỏi thường gặp

Ảnh tôi tải lên có bị gửi lên máy chủ không?

Không. Việc giải mã ảnh, thu nhỏ và trích màu đều diễn ra cục bộ trong trình duyệt của bạn thông qua canvas — không có gì được tải lên.

Vì sao ảnh cho ra đúng 8 màu nhưng màu gốc lại cho ra 9 màu?

Trích màu trả về 8 nhóm màu xuất hiện nhiều nhất, trong khi bộ tạo màu tạo dải độ sáng cố định gồm 9 bậc (từ 95% xuống 15%).

Nút "Sao chép biến CSS" tạo ra định dạng gì?

Một khối :root với mỗi ô màu được gán vào một biến (--color-1, --color-2, …) chứa giá trị hex tương ứng, để bạn dán thẳng vào CSS.

Bộ sưu tập chọn lọc có những gì?

284 bảng màu được chọn tay, chia thành 10 nhóm: Classic, Nature, Keycaps, Vintage, Modern, Bold, Soft, Monochrome, Seasonal và Artistic. Gần như tất cả đều gồm năm màu, và chúng được đặt tên theo một địa danh, một mùa hay một phong cách chứ không đánh số.

Vì sao lần đầu mở bộ sưu tập lại hơi chậm?

Vì dữ liệu của nó được nạp thành một gói riêng ngay lần đầu bạn mở thẻ đó, để những ai chỉ trích màu từ ảnh không phải tải về. Những lần sau thì mở tức thì.

Bấm "Dùng trong trình tạo" thì chuyện gì xảy ra?

Màu đục đầu tiên của bảng màu được đặt làm màu gốc của trình tạo và công cụ chuyển sang chế độ Tạo từ màu, cho bạn một dải 9 bậc độ sáng dựng từ màu đó. Bảng màu gốc không bị thay đổi và bạn có thể quay lại nó.