Trình trích xuất bảng màu miễn phí

Cách Trích Xuất Màu Sắc Thực Sự Hoạt Động

Bảng màu được máy tính trích xuất từ ảnh xuất phát từ một trong hai thuật toán cổ điển:

• Phân cụm K-means (Lloyd 1982; ý tưởng cơ bản xuất phát từ MacQueen 1967 và Forgy 1965). Chọn K centroid màu ngẫu nhiên trong khối màu, gán mỗi pixel cho centroid gần nhất, tính lại centroid là giá trị trung bình của các pixel được gán, và lặp lại cho đến khi các centroid ngừng di chuyển. K centroid cuối cùng chính là các màu chiếm ưu thế của bạn.
• Lượng tử hóa median-cut (Heckbert, SIGGRAPH 1982). Đệ quy chia khối màu dọc theo chiều rộng nhất, chia dân số pixel thành hai nửa bằng nhau mỗi lần. Sau K lần chia bạn có K hộp, và màu trung bình của mỗi hộp là một mục trong bảng màu. Đây là thuật toán được dùng bởi thư viện JavaScript Color Thief phổ biến, và lịch sử là cách ảnh màu được lập chỉ mục (bảng màu GIF, PNG) được giảm từ hàng triệu màu xuống còn 256.

Cả hai phương pháp tạo ra một tập hợp nhỏ các màu đại diện từ dân số pixel lớn hơn nhiều, nhưng chúng có những sự đánh đổi khác nhau. K-means linh hoạt hơn nhưng nhạy cảm với hạt giống ngẫu nhiên và các giá trị ngoại lai. Median-cut mang tính xác định và cân bằng vùng phủ không gian màu nhưng có thể đại diện quá mức cho các vùng hẹp nơi ảnh tình cờ dành nhiều pixel.

Tại Sao Khoảng Cách RGB Nói Dối

Một cảnh báo tinh tế nhưng quan trọng: phân cụm trong không gian RGB thuần túy cho kết quả không phải lúc nào cũng khớp với nhận thức của con người. RGB là hệ tọa độ do phần cứng định hướng, khoảng cách trong đó tương ứng với sự khác biệt điện tử giữa các màu cơ bản, không phải sự khác biệt được nhận thức giữa các màu. Hai màu xanh lá trông giống hệt nhau với bạn có thể có khoảng cách RGB lớn hơn nhiều so với màu xanh lá và màu đỏ trông rõ ràng khác nhau.

Phân cụm chính xác hơn xảy ra trong CIELAB (CIE 1976 L*a*b*), một không gian màu được thiết kế đặc biệt để khoảng cách Euclidean trong không gian xấp xỉ sự khác biệt được nhận thức bởi con người giữa hai màu. Các công cụ bảng màu hiện đại như Adobe Color và nhiều bộ tạo mẫu màu design-system phân cụm trong CIELAB hoặc CIELCH. CSS Color Module Level 4 (W3C, 2022) đã thêm các hàm lab(), lch(), oklab() và oklch() để hiển thị các không gian này trực tiếp cho web designer, hữu ích khi bạn muốn nội suy bảng màu đồng đều về mặt nhận thức. Đặc tả CSS nằm tại w3.org/TR/css-color-4.

HEX, RGB, HSL, Chọn Định Dạng Phù Hợp

Cả ba ký hiệu mô tả cùng một màu sắc; chúng chỉ là các cách viết khác nhau.

• HEX: #RRGGBB. Sáu chữ số hex, hai chữ số mỗi kênh, phạm vi 00-FF (0-255). Định dạng phổ biến nhất trên web. Gọn, dễ copy, được hỗ trợ ở khắp nơi.
• RGB: rgb(255, 128, 0). Các số giống nhau, ký hiệu khác nhau. CSS thêm rgba(255, 128, 0, 0.5) cho alpha.
• HSL: hsl(30, 100%, 50%). Hue (0-360°), saturation (0-100%), lightness (0-100%). Dễ lý giải hơn cho designer; «cùng hue, thêm saturation» chỉ cần điều chỉnh một con số trong HSL nhưng phải điều chỉnh nhiều kênh trong RGB.
• OKLCH: oklch(70% 0.15 30). Lựa chọn thay thế hiện đại, đồng đều về mặt nhận thức so với HSL. Cùng một con số lightness có nghĩa là cùng độ sáng được cảm nhận trên các hue, điều mà HSL nổi tiếng là làm sai (vàng ở 50% lightness trông sáng hơn nhiều so với xanh ở 50% lightness).

Đối với hầu hết công việc web, hãy copy HEX. Để thao tác bảng màu theo chương trình (làm sáng 10%, dịch chuyển hue 30°), hãy dùng HSL hoặc OKLCH khi thao tác đó gọn hơn.

Tại Sao Màu Chiếm Ưu Thế ≠ Màu Hữu Ích

Việc trích xuất «màu phổ biến nhất» đơn giản thường gây thất vọng. Chân dung người trên nền trời xanh bị thống trị về mặt thống kê bởi các pixel bầu trời và tông màu da, mặc dù câu chuyện màu sắc thú vị về mặt thị giác có thể nằm ở quần áo của chủ thể. Ảnh có nền trung tính lớn sẽ bị đặt màu trung tính là màu «chiếm ưu thế». Nén JPEG nặng tạo ra các màu artefact phân cụm như thể chúng là thật.

Các công cụ bảng màu tinh vi cân nhắc theo saturation, độ tương phản so với nền chiếm ưu thế, «độ thú vị» được cảm nhận, hoặc theo việc một màu có xuất hiện trong các vùng nổi bật được phát hiện bởi các mô hình saliency Itti-Koch lấy cảm hứng từ thị giác con người hay không. Hầu hết các công cụ trực tuyến, kể cả công cụ này, sử dụng phân cụm dựa trên tần suất đơn giản: nhanh, có thể dự đoán và đủ tốt cho trường hợp phổ biến là lấy bảng màu từ ảnh, minh họa hoặc tác phẩm nghệ thuật.

Các Trường Hợp Sử Dụng Phổ Biến

• Khớp thương hiệu: designer lấy bảng màu từ logo hoặc ảnh hero của khách hàng để giữ phần còn lại của trang web nhất quán về mặt thị giác.
• Bảng ý tưởng: trích xuất bảng màu từ các ảnh cảm hứng (cảnh phim, ảnh chụp, tranh vẽ) là cách nhanh nhất để bắt đầu khám phá màu sắc.
• Cấu hình Tailwind / design-token: biến bảng màu đã trích xuất thành CSS custom properties hoặc map colors Tailwind.
• Khớp màu sắc slide: chọn màu nhấn từ logo công ty để bộ slide không bị xung đột màu sắc.
• Ảnh sản phẩm thương mại điện tử: dùng màu chiếm ưu thế của từng sản phẩm làm mẫu màu trong thẻ sản phẩm.
• Nghệ thuật tạo sinh & trực quan hóa dữ liệu: nạp các bảng màu đã trích xuất vào code shader, biểu đồ D3 hoặc sketch Processing.
• Thiết kế in ấn: lấy tập hợp màu ban đầu từ ảnh cảm hứng, sau đó khớp chúng với Pantone hoặc CMYK trong phần mềm thiết kế in.

Tại Sao Chỉ Chạy Trên Trình Duyệt Lại Quan Trọng

Ảnh thường mang theo nhiều hơn chỉ hình ảnh. Metadata EXIF có thể bao gồm tọa độ GPS nơi chụp ảnh, số serial máy ảnh, tên người chụp và dấu vân tay phần mềm. Ảnh chụp màn hình có thể chứa giao diện người dùng bảo mật, văn bản nháp hoặc thương hiệu chưa phát hành. Ảnh cá nhân có thể chứa khuôn mặt của những người chưa đồng ý được tải lên đâu đó. Việc trích xuất bảng màu thực ra không cần bất kỳ thứ nào trong số đó (nó chỉ cần dữ liệu pixel) và không có lý do chính đáng nào để gửi toàn bộ ảnh đến máy chủ khi trình duyệt có thể phân tích cục bộ.

Công cụ này vẽ ảnh lên Canvas ngoài màn hình, lấy mẫu dữ liệu pixel qua getImageData(), chạy phân cụm và hiển thị kết quả. Không có gì rời khỏi trang; ảnh không được giữ lại sau khi tab đóng. Các công cụ bảng màu phía máy chủ (Adobe Color, công cụ chọn ảnh của Coolors và nhiều công cụ khác) tải lên toàn bộ tệp. Quyền riêng tư là sự đánh đổi bạn đang thực hiện với mỗi lựa chọn.

Làm Việc Với Kết Quả Đầu Ra

Khi đã có bảng màu trích xuất, bạn thường:

1. Chắt lọc. Việc trích xuất tự động 5 màu thường có 3 màu hữu ích, 1 bản sao gần giống dư thừa và 1 tông trung gian mờ đục. Loại bỏ màu mờ đục và loại bỏ trùng lặp.
2. Phân công vai trò. Chỉ định một màu làm màu thương hiệu chính, một màu phụ, một hoặc hai màu nhấn và một màu trung tính. Các hệ thống thương hiệu hiện đại thường cần nền trung tính, hai màu neo và một màu nhấn; tối đa năm màu.
3. Tạo thang màu sáng/tối. Từ mỗi màu neo, dẫn xuất 9-11 sắc thái cho trạng thái hover, nền và các biến thể có tông màu. Các công cụ như bộ tạo thang màu của Tailwind hoặc phần bảng màu của Refactoring UI có công thức nổi tiếng.
4. Kiểm tra độ tương phản. Chạy các cặp văn bản-nền qua bộ kiểm tra độ tương phản WCAG; Cấp AA yêu cầu 4,5:1 cho văn bản nội dung thông thường, 3:1 cho các thành phần UI lớn hoặc đậm.
5. Kiểm tra thiếu hụt thị giác màu sắc. Khoảng 1 trong 12 nam giới có một dạng mù màu nào đó. Chạy bảng màu qua bộ mô phỏng CVD trước khi xác nhận.

Những Sai Lầm Phổ Biến

1. Dùng tất cả năm màu đã trích xuất chưa chỉnh sửa làm bảng màu thương hiệu. Trích xuất tự động là điểm khởi đầu, không phải bảng màu hoàn chỉnh. Hãy chắt lọc.
2. Chọn màu từ JPEG bị nén nặng. Các artefact nén tạo ra các mục bảng màu sai. Hãy bắt đầu từ nguồn chất lượng cao nếu có thể.
3. Tin vào lần chạy đầu tiên trên ảnh phức tạp. Các giá trị K khác nhau (số màu) tạo ra kết quả khác nhau đáng kể; hãy thử 5, 8 và 12 để xem kích thước nào phù hợp với ảnh của bạn.
4. Xây dựng bảng màu từ ảnh mà không cân nhắc đến trang mà nó sẽ nằm trên đó. Bảng màu mờ nhạt lấy từ ảnh có thể trông đẹp khi đứng riêng nhưng biến mất trên nền trang web trắng. Hãy kiểm tra trong ngữ cảnh.
5. Bỏ qua độ tương phản. Bảng màu đẹp đôi khi ghép văn bản với nền ở độ tương phản 2:1 và không đạt WCAG. Luôn kiểm tra.
6. Quên rằng «chiếm ưu thế» có thể nghĩa là «nền.» Màu phổ biến nhất trong chân dung thường là bức tường phía sau chủ thể, không phải quần áo của chủ thể.

Câu Hỏi Thường Gặp Thêm

Có hoạt động với PNG trong suốt không?

Có. Các pixel trong suốt thường được bỏ qua trong quá trình lấy mẫu để bảng màu chỉ phản ánh nội dung hiển thị. Nếu bạn tải lên PNG có nền trong suốt và logo có màu, bảng màu trích xuất sẽ là màu của logo, không bị pha tạp với màu trung tính.

Còn GIF động thì sao?

Bộ giải mã ảnh của trình duyệt thường cung cấp khung đầu tiên cho Canvas API, do đó bảng màu được trích xuất từ khung không. Để có bảng màu trải rộng tất cả các khung, bạn cần trích xuất từng khung riêng biệt và kết hợp kết quả; điều đó vượt ngoài tầm của công cụ ảnh tĩnh.

Ảnh gốc có được tải lên đâu không?

Không. Ảnh được tải vào phần tử Canvas trong trình duyệt của bạn, dữ liệu pixel được đọc qua getImageData(), và phân cụm chạy trong JavaScript trên thiết bị của bạn. Các byte ảnh không bao giờ được truyền đến bất kỳ máy chủ nào. Điều này quan trọng khi nguồn chứa GPS EXIF, khuôn mặt, ảnh chụp màn hình giao diện bảo mật hoặc ảnh sản phẩm chưa phát hành.

Tại sao bảng màu của tôi thay đổi giữa các lần chạy?

K-means phụ thuộc vào vị trí centroid ngẫu nhiên ban đầu, do đó hai lần chạy trên cùng một ảnh có thể dừng ở các cực tiểu cục bộ hơi khác nhau. Sự khác biệt thường tinh tế (một bản sao gần giống được thay thế bằng sắc thái tương tự) nhưng có thể thấy được. Median-cut mang tính xác định: cùng đầu vào, cùng đầu ra mỗi lần. Nếu công cụ này đôi khi cho bảng màu rõ ràng khác nhau cho cùng một ảnh, nó đang dùng thuật toán ngẫu nhiên và đó là hành vi bình thường.

Tôi có thể sử dụng các màu đã trích xuất cho mục đích thương mại không?

Bản thân màu sắc không có bản quyền; các giá trị HEX là sự thật về pixel. Nhưng ảnh mà bạn trích xuất từ đó có thể có: lấy bảng màu từ ảnh của người khác để lấy cảm hứng là ổn, nhưng tái tạo ảnh hoặc các yếu tố nhãn hiệu của nó là câu hỏi riêng biệt. Khớp màu sắc, không phải hình ảnh.

Công cụ này khác gì so với công cụ chọn màu?

Công cụ chọn màu đọc màu tại một vị trí pixel cụ thể mà bạn trỏ vào. Công cụ này phân tích toàn bộ ảnh và trả về bảng màu đại diện nhất. Các công việc khác nhau: công cụ chọn màu dùng cho «màu chính xác này là gì?», công cụ trích xuất bảng màu dùng cho «các màu chiếm ưu thế tổng thể là gì?». Cả hai đều có vị trí trong quy trình làm việc của designer.