Cách phối màu online miễn phí: lấy màu từ ảnh, tạo bảng màu bằng bánh xe màu

Cách phối màu online miễn phí với công cụ của ColorME: lấy bảng màu từ ảnh, nhập màu gốc vào bánh xe màu, chọn 1 trong 8 quy tắc phối màu, kiểm tra tương phản chuẩn WCAG, xuất CSS, Tailwind, file ASE, PNG. Không cần đăng nhập.

Trả lời nhanh: để phối màu online miễn phí, lấy màu chủ đạo từ một bức ảnh bạn thích bằng công cụ Trích xuất bảng màu, rồi đưa một màu vào Bánh xe màu của ColorME: nhập mã HEX làm màu gốc, chọn một trong 8 quy tắc phối màu (tương đồng, đơn sắc, bộ ba, bổ sung…), kiểm tra độ tương phản giữa chữ và nền, rồi xuất bảng 5 màu ra CSS, Tailwind, file ASE cho Photoshop hoặc ảnh PNG. Cả hai công cụ đều miễn phí, không cần đăng nhập.

Xem nhanh: nhập một mã màu, bấm đổi quy tắc, bảng 5 màu đổi ngay. Ảnh chụp màn hình: ColorME.

Trước khi phối màu: cần biết gì?

• Chi phí, tài khoản: cả Trích xuất bảng màu và Bánh xe màu đều miễn phí, không cần đăng nhập. Chúng tôi làm toàn bộ các bước trong bài khi chưa đăng nhập.
• Ảnh mở được: JPG, PNG, WebP, GIF (ghi trên khung tải ảnh); có thể dán ảnh chụp màn hình bằng Ctrl/Cmd + V. Theo trang công cụ, màu được phân tích ngay trên trình duyệt, ảnh không bị tải lên máy chủ.
• Bánh xe màu cho ra gì: bảng 5 màu, 8 quy tắc phối, hai kiểu bánh xe (Màu hoạ sĩ RYB và Màu RGB), nhập mã theo HEX, RGB, HSB, LAB hoặc CMYK.
• Xuất ra: mã CSS, SCSS, Tailwind, JSON; tải PNG, SVG hoặc ASE (Adobe). Nút Chia sẻ lưu cả bảng màu vào đường link.
• Kiểm tra tương phản: có sẵn theo chuẩn WCAG 2.1 ngay trong bánh xe màu, và trong công cụ riêng Kiểm tra tương phản.
• Điện thoại: theo trang công cụ, bánh xe màu dùng được trên điện thoại bằng cách chạm và kéo các chấm màu (ảnh chụp ở cuối bài).

Video quay màn hình (khoảng 40 giây, không tiếng): lấy màu từ ảnh, đổi quy tắc trên bánh xe màu, kiểm tra và sửa tương phản. Ảnh chụp màn hình: ColorME.

Cách phối màu online: 6 bước

Ví dụ trong bài: phối màu cho một poster từ ảnh hoa súng.

Bước 1. Lấy màu từ một bức ảnh

Mở colorme.vn/tools/color-palette, bấm Tải ảnh lên hoặc thả ảnh vào khung.

Màn hình bắt đầu của công cụ Trích xuất bảng màu. Ảnh chụp màn hình: ColorME.

Ảnh vừa tải lên là có ngay bảng màu chủ đạo kèm mã HEX và tỉ lệ phần trăm. Chọn Số màu 4, 6, 8 hoặc 10; bấm vào một điểm trên ảnh để lấy màu đúng điểm đó; bấm một ô màu để sao chép mã.

Tải ảnh, đổi số màu, bấm lên ảnh để lấy màu tại điểm. Ảnh chụp màn hình: ColorME.

Với 8 màu, ảnh hoa súng cho: xanh rêu #2D3904 (48%), gần đen #0F1202 (24%), cam gạch #9C4406 (10%), trắng xám #E0E1E0 (9%), hai màu xám, và vàng nhuỵ hoa #F9CF0B chỉ chiếm 1%. Màu chiếm ít nhưng nổi bật như vậy thường là màu nhấn đẹp nhất.

8 màu chủ đạo của ảnh; bấm vào lá súng lấy được #243803. Ảnh chụp màn hình: ColorME. Ảnh gốc: PublicDomainPictures, Wikimedia Commons, CC0.

Bước 2. Nhập màu gốc vào bánh xe màu

Mở colorme.vn/tools/color-wheel. Ô có nhãn GỐC là màu gốc, các màu còn lại được tính theo nó. Nhập mã vào ô HEX (ở đây là vàng #F9D113, gần màu nhuỵ hoa) và nhấn Enter: cả bảng đổi theo quy tắc đang chọn. Có màu thương hiệu sẵn thì nhập mã đó.

Màu gốc #F9D113 với quy tắc Tương đồng: cam, vàng cam, vàng, vàng chanh, xanh lá mạ. Ảnh chụp màn hình: ColorME.

Bước 3. Chọn quy tắc phối màu

8 nút trên bánh xe là 8 quy tắc: Tương đồng, Đơn sắc, Bộ ba, Bổ sung, Bổ sung chia tách, Ghép đôi, Sắc độ và Tuỳ chỉnh (kéo từng chấm tự do). Mỗi quy tắc có một dòng giải thích ngay dưới bánh xe. Muốn hiểu kỹ lý thuyết, đọc bài Tìm hiểu về vòng tròn màu sắc. Nếu bạn quen dùng Adobe Color, bài Adobe Color là gì có bảng đối chiếu từng tính năng của Adobe với công cụ ColorME tương ứng.

Cùng màu gốc #F9D113, mỗi quy tắc cho một bảng màu khác. Ảnh chụp màn hình: ColorME.

Với quy tắc Bổ sung trên bánh xe RYB, màu đối diện của vàng là tím (#8313F9): tương phản mạnh, hợp cho nút kêu gọi hoặc điểm nhấn. Các cặp màu kiểu này được phân tích kỹ trong bài Các cặp màu tương phản phổ biến.

Bổ sung: vàng và tím đối diện nhau trên bánh xe. Ảnh chụp màn hình: ColorME.

6 bảng màu PNG tải từ nút Tải PNG, cùng một màu gốc. Ảnh: ColorME.

Bước 4. Kiểm tra tương phản chữ và nền

Màu đẹp chưa chắc dễ đọc. Ở lần thử của chúng tôi, chữ cam gạch #9C4406 lấy từ ảnh đặt trên nền xanh rêu #2D3904 chỉ đạt 1.90:1, công cụ Kiểm tra tương phản báo "Không đạt, khó đọc" và gợi ý màu chữ gần nhất đạt chuẩn: #E28452 (AA) hoặc #FFB591 (AAA).

Trước: chữ cam gạch trên nền xanh rêu, 1.90:1. Ảnh chụp màn hình: ColorME.

Sau: bấm màu gợi ý #E28452, tỉ lệ lên 4.50:1, đạt AA cho chữ thường. Ảnh chụp màn hình: ColorME.

Nhập mã, xem kết quả, bấm màu gợi ý. Ảnh chụp màn hình: ColorME.

Theo WCAG 2.1 (trang công cụ trích): chữ thường cần ít nhất 4.5:1, chữ lớn 3:1, mức AAA là 7:1. Vàng #F9D113 trên xanh rêu #2D3904 đạt 8.33:1, nên tiêu đề vàng trên nền rêu đọc rất rõ.

Bước 5. Xuất bảng màu

Bấm Xuất trên thanh công cụ của bánh xe màu: chọn CSS, SCSS, Tailwind hoặc JSON rồi bấm Sao chép, hoặc tải PNG, SVG, ASE (Adobe). Các file chúng tôi tải về có tên dạng colorme-banh-xe-mau-e57a11-….ase.

Xuất mã CSS hoặc tải file cho Photoshop, Illustrator. Ảnh chụp màn hình: ColorME.

Bước 6. Áp bảng màu vào thiết kế

Chúng tôi dùng bảng màu trên cho một poster ví dụ: nền xanh rêu từ lá, tiêu đề vàng từ nhuỵ hoa, chữ nhỏ màu #E28452 đã chỉnh cho đủ tương phản.

Trước: ảnh gốc. PublicDomainPictures, Wikimedia Commons, CC0.

Sau: poster ví dụ dùng bảng màu lấy từ ảnh. Thiết kế: ColorME.

Mẹo phối màu đẹp

• Một màu chủ đạo, một màu nhấn, vài màu trung tính: trang công cụ cũng gợi ý cách chia này. Màu nhấn chỉ nên chiếm một phần nhỏ, như vàng nhuỵ hoa trong ảnh.
• Kiểm tra tương phản trước khi chốt chữ, nhất là chữ nhỏ trên ảnh nền.
• Thử chế độ người mù màu: mục "Xem như người mù màu" (Mù màu đỏ, lục, lam, Không màu) chỉ đổi cách hiển thị, giúp xem hai màu có còn phân biệt được không.

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

Màu vàng phối với màu gì?

Trên bánh xe RYB của công cụ, vàng #F9D113 theo quy tắc Tương đồng đi với cam và xanh lá mạ; theo Bổ sung đi với tím; theo Bộ ba đi với xanh dương #13B3F9 và hồng #F91377. Nhập màu khác vào ô HEX để xem câu trả lời cho màu của bạn.

Phối màu quần áo dùng được không?

Được, để thử cặp màu trước khi chọn đồ: bánh xe màu không phân biệt màu áo hay màu poster. Nếu muốn biết nhóm màu hợp với da, tóc, mắt, thử công cụ Kiểm tra màu cá nhân; theo trang công cụ, 5 màu chủ đạo của bạn mở được thẳng trong Bánh xe màu để phối tiếp.

Có phải app phối màu sơn nhà không?

Không. Công cụ cho màu trên màn hình (HEX, RGB, CMYK), không gắn với mã sơn của hãng nào. Màu sơn thật còn phụ thuộc bề mặt và ánh sáng, nên hãy đối chiếu với bảng màu của hãng sơn.

Tổng kết

Lấy màu từ ảnh, nhập màu gốc vào bánh xe, chọn quy tắc, kiểm tra tương phản, rồi xuất mã hoặc file. Mọi bước miễn phí, không cần đăng nhập. Muốn học phối màu bài bản cùng bố cục và chữ trong thiết kế đồ hoạ, xem khoá học thiết kế đồ hoạ 6 tháng của ColorME. Bắt đầu ngay với Bánh xe màu của ColorME.

Bánh xe màu trên màn hình điện thoại (390px). Ảnh chụp màn hình: ColorME.