Dựng bảng màu từ một bức ảnh là mẹo thiết kế lâu đời: ảnh sản phẩm, phong cảnh hay logo vốn có những màu hợp nhau. Rắc rối bắt đầu khi các màu đó phải mang chữ. Bài này đi từ ảnh đến bảng màu dùng được bằng con số thật: lấy màu đáng tin cậy, tách các màu chủ đạo, và kiểm tra từng cặp chữ, nền theo WCAG. Mọi tỉ lệ được tính bằng chính đoạn mã tương phản mà công cụ lấy màu từ ảnh dùng.
Lấy một màu cho chuẩn
Phóng to bất kỳ ảnh chụp nào, một bề mặt trông phẳng hóa ra là bức tranh khảm. Bức tường "trắng" là nhiều sắc trắng hơi khác nhau, nén JPEG thêm các khối 8 × 8 có tông riêng, và mép vật thể hòa vào xung quanh. Bấm vào một điểm ảnh là lấy trúng một trong số đó, ngẫu nhiên.
Hai thói quen giúp sửa điều này:
- Lấy trung bình một ô nhỏ. Công cụ có thể đọc một điểm ảnh, trung bình 3 × 3 (9 điểm) hoặc 5 × 5 (25 điểm). Lấy trung bình triệt tiêu phần lớn nhiễu và cho đúng màu bề mặt.
- Nhìn kính lúp chứ đừng nhìn ảnh. Kính lúp hiện 11 × 11 điểm ảnh dưới dấu chữ thập, nên bạn thấy khi nào mình đang ở mép hay chỗ lóa để dời đi.
Trên điện thoại, kéo ngón tay rồi nhấc lên để lấy màu: kính lúp nằm bên cạnh ảnh nên đầu ngón tay không che điểm cần chọn.
Tách các màu chủ đạo
Để lấy cả bảng màu, công cụ dùng median cut. Nó đếm điểm ảnh vào một biểu đồ (32 mức mỗi kênh, 32.768 ô), đặt mọi màu vào một hộp, rồi liên tục cắt đôi hộp có độ phân tán lớn nhất tại trung vị của kênh màu rộng nhất. Mỗi hộp cuối cùng thành một màu, là trung bình chính xác các điểm ảnh của nó, kèm phần trăm diện tích ảnh mà nó đại diện.
Hai đặc điểm quan trọng trong thực tế:
- Kết quả cố định. k-means, cách phổ biến còn lại, bắt đầu từ các tâm ngẫu nhiên và có thể ra bảng màu khác nhau mỗi lần chạy. Median cut luôn trả về cùng các màu cho cùng một ảnh, nên bảng màu gửi hôm qua có thể tạo lại y hệt.
- Nó theo diện tích, không theo tầm quan trọng. Một logo đỏ nhỏ trên nền xám lớn có thể không xuất hiện trong bảng 4 màu, vì các sắc xám chiếm hết các hộp. Hãy xin nhiều màu hơn (10 đến 16), hoặc tự lấy màu logo bằng tay.
Một ví dụ cụ thể
Giả sử ảnh một bến cảng cho bảng màu sau, theo diện tích giảm dần: xanh hải quân đậm #143c8c (mặt nước), cam ấm #f08c1e (thuyền), kem #f6efe4 (cánh buồm) và xanh lá đậm #2f5d3a (đồi). Đây là điểm của các cặp màu với nhau (tỉ lệ tương phản WCAG 2):
| Chữ | Nền | Tỉ lệ | Chữ thường (4,5:1) | Chữ lớn (3:1) |
|---|---|---|---|---|
| #f6efe4 kem | #143c8c xanh đậm | 8,95:1 | Đạt | Đạt |
| #143c8c xanh đậm | #ffffff trắng | 10,22:1 | Đạt | Đạt |
| #2f5d3a xanh lá | #f6efe4 kem | 6,69:1 | Đạt | Đạt |
| #143c8c xanh đậm | #f08c1e cam | 4,12:1 | Không | Đạt |
| #2f5d3a xanh lá | #f08c1e cam | 3,08:1 | Không | Đạt |
| #f08c1e cam | #ffffff trắng | 2,48:1 | Không | Không |
| #f08c1e cam | #f6efe4 kem | 2,17:1 | Không | Không |
| #143c8c xanh đậm | #2f5d3a xanh lá | 1,34:1 | Không | Không |
Quy luật rất điển hình. Màu tối nhất và sáng nhất của ảnh đi với nhau tốt. Màu nhấn rực rỡ, thứ làm bức ảnh hấp dẫn, lại trượt khi làm chữ trên nền sáng, và hai màu tối vừa gần như không phân biệt được với người thị lực kém dù sắc độ trông khác nhau.
Sửa các cặp không đạt
Giữ sắc độ, đổi độ sáng. Với chữ cam trên nền trắng, phần kiểm tra tương phản của công cụ gợi ý #b1620c: cùng sắc độ (31° trong HSL), độ sáng giảm từ 53% xuống 37%, đạt 4,5:1. Trên nền kem, nó gợi ý #a25a0b, tối hơn chút nữa vì nền kem hơi tối hơn nền trắng.
Từ đó có quy tắc thực dụng cho bảng màu lấy từ ảnh:
- Dùng màu nhấn của ảnh làm nền tô (nút bấm, điểm nhấn, hình minh họa), đặt chữ tối lên trên: chữ đen trên #f08c1e đạt 8,48:1.
- Dùng sắc tối hơn của màu nhấn cho chữ và liên kết trên nền sáng.
- Đừng ghép hai màu trung tính cho bất cứ thứ gì cần đọc.
OKLCH giúp làm việc này bằng tay dễ hơn. Màu cam là oklch(73.2% 0.163 60.6); chỉ giảm giá trị L là làm tối mà vẫn giữ sắc độ và độ bão hòa cảm nhận, điều HSL không đảm bảo. Vì thế công cụ hiện OKLCH cho mọi màu.
Xuất ra mã
Khi các cặp đã ổn, hãy xuất bảng màu ra mã: biến CSS (\--palette-1: #143c8c;\), khối \@theme\ của Tailwind v4 hoặc cấu hình v3, biến SCSS, JSON có giá trị OKLCH và tỉ lệ diện tích, hoặc danh sách mã màu cho phần mềm thiết kế. Đổi tiền tố thành tên thương hiệu trước khi sao chép.
Những lỗi hay gặp
- Lấy một điểm ảnh từ ảnh JPEG. Hãy lấy trung bình ô 3 × 3 hoặc 5 × 5.
- Tin vào mắt để đánh giá tương phản. Cam rực trên nền trắng trông nổi bật nhưng chỉ đạt 2,48:1.
- Dùng bảng màu theo đúng thứ tự xuất ra. Màu chiếm diện tích lớn nhất thường là màu nền; màu nhấn có khi đứng thứ tư.
- Chỉ kiểm tra với nền trắng. Hãy thử với nền thật sẽ dùng, nền kem hay xám nhạt làm thay đổi con số.
- Quên biểu tượng và viền. WCAG yêu cầu 3:1 cho thành phần giao diện; cặp xanh lá trên cam chỉ vừa đủ mức đó.
Bước tiếp theo
Mở ảnh của bạn trong công cụ lấy màu từ ảnh, tách 5 đến 8 màu, và chạy từng cặp chữ, nền qua phần kiểm tra tương phản. Để tạo các sắc đậm nhạt và phối màu từ màu bạn giữ lại, hãy tiếp tục với bộ công cụ màu.