Trình tạo bảng màu phối tự động (Color Palette Generator)

Trình tạo bảng màu phối tự động là gì?

Trình tạo bảng màu phối tự động là công cụ tạo một nhóm gồm 5 màu, giúp bạn tìm phương án màu ban đầu và lấy mã màu để sử dụng trong thiết kế. Kết quả là các ô màu kèm mã HEX, không phải một trang web, hình ảnh hay bản thiết kế đã hoàn thiện. Công cụ phù hợp khi bạn muốn khám phá màu mới hoặc tìm các biến thể quanh một màu định hướng.

Theo mã nguồn được cung cấp, công cụ có ba cách tạo bảng: sinh màu ngẫu nhiên, tính màu từ một màu gốc theo bốn quy luật, hoặc áp dụng một trong 20 bảng đặt sẵn. Bạn có thể khóa riêng từng ô để giữ màu khi tạo lại bằng hai cách đầu. Kết quả cũng có thể được sao chép dưới dạng từng mã HEX, khai báo biến CSS hoặc mảng mã màu.

Trong kiến thức thiết kế nói chung, phối màu còn liên quan đến diện tích sử dụng, nội dung, chất liệu và quan hệ giữa chữ với nền. Công cụ không tự phân vai màu chủ đạo, màu chữ hay màu nhấn. Năm ô đặt cạnh nhau chỉ là cơ sở để lựa chọn, chưa chứng minh chúng phù hợp với mọi bố cục.

Cụm phối màu tự động ở đây mô tả việc sinh và tính toán màu. Mã nguồn không thể hiện chức năng AI, nhận diện màu từ ảnh hoặc tích hợp Canva. Không nên hiểu những khả năng đó là một phần của công cụ chỉ từ tên gọi.

Các thuật ngữ cần hiểu khi đọc bảng màu

Mã màu HEX

HEX là cách biểu diễn màu bằng sáu chữ số thập lục phân sau dấu #, tương ứng ba kênh đỏ, lục và lam. Ví dụ, #FF0000 biểu diễn màu đỏ với kênh đỏ ở mức tối đa, hai kênh còn lại bằng không. Đây là định dạng hiển thị và sao chép chính của công cụ. Chữ cái viết hoa hay thường không đổi giá trị màu; HEX cũng không phải tên màu hoặc một tệp hình ảnh. Dạng mã được xử lý ở đây không có kênh trong suốt.

HSL

HSL mô tả màu bằng sắc độ, độ bão hòa và độ sáng. Sắc độ là vị trí theo góc trên vòng màu: thay đổi góc giúp chuyển giữa các họ màu. Hai thành phần còn lại được biểu diễn bằng phần trăm. Công cụ dùng HSL để tạo biến thể rồi chuyển kết quả về HEX. Vì vậy, HSL là cơ sở tính toán, còn HEX là cách thể hiện kết quả; chúng không phải hai loại màu độc lập hoặc hai chế độ xuất khác nhau.

Độ bão hòa

Độ bão hòa mô tả mức đậm sắc so với màu vô sắc tại cùng độ sáng HSL. Giá trị thấp khiến màu gần xám hơn; giá trị cao thường làm sắc màu rõ hơn. Các biến thể theo quy luật giữ độ bão hòa đã làm tròn của màu gốc, còn màu ngẫu nhiên dùng khoảng 50–99%. Dễ nhầm độ bão hòa với độ sáng: một màu đậm sắc vẫn có thể tối. Độ bão hòa cao cũng không tự bảo đảm chữ dễ đọc trên màu đó.

Độ sáng HSL

Độ sáng HSL chạy từ 0% là đen đến 100% là trắng. Công cụ thay đổi thành phần này để tạo các phiên bản tối hoặc sáng trong một số quy luật. Khi tăng 20 điểm phần trăm từ 50%, kết quả là 70%, không phải 60%. Điểm cần phân biệt là độ sáng HSL không đồng nghĩa độ chói tương đối dùng để tính tương phản. Hai màu có cùng độ sáng HSL vẫn có thể mang lại cảm nhận sáng và khả năng đọc khác nhau.

Hòa sắc

Hòa sắc là quan hệ phối màu dựa trên vị trí sắc độ hoặc các biến thể của một màu. Tương đồng, đơn sắc, tam giác và bổ túc là những hướng phối quen thuộc trong kiến thức nền về thiết kế. Công cụ triển khai từng hướng bằng công thức cụ thể để tạo năm vị trí. Hòa sắc giúp định hướng lựa chọn, nhưng không phải chứng nhận thẩm mỹ. Một bảng tuân theo quan hệ màu vẫn cần được đánh giá trên nội dung, diện tích và mục đích sử dụng thực tế.

Đầu vào và kết quả của bảng màu gồm những gì?

Những lựa chọn ảnh hưởng đến kết quả

Khi phối theo quy luật, đầu vào chính là màu gốc và lựa chọn tương đồng, đơn sắc, tam giác hoặc bổ túc. Bộ chọn màu cung cấp mã RGB dạng HEX sáu chữ số. Màu gốc mặc định trên giao diện là #ffb7b2, nhưng bảng ban đầu vẫn được sinh ngẫu nhiên; công cụ không tự dùng màu mặc định này để phối ngay khi mở.

Trạng thái khóa quyết định ô nào được phép nhận màu mới. Với tạo ngẫu nhiên hoặc theo quy luật, ô đã khóa giữ nguyên giá trị hiện có. Khi chọn bảng đặt sẵn, toàn bộ màu được thay thế và cả năm ô được mở khóa. Màu gốc trong bộ chọn không phải một ô trong bảng, nên chọn màu gốc không đồng nghĩa đã khóa hoặc giữ màu đó.

Kết quả luôn gồm năm màu theo thứ tự vị trí. Mã nguồn không có điều khiển thêm, bớt hay đổi thứ tự các ô. Thứ tự hiện tại cũng được giữ khi sao chép toàn bộ bảng, giúp bạn đối chiếu dữ liệu với từng màu đang hiển thị.

Ba dạng dữ liệu có thể sao chép

• Một mã HEX: thích hợp khi chỉ cần đưa một màu vào ô nhập màu của phần mềm thiết kế.
• Khai báo biến CSS: chứa năm màu trong phạm vi gốc, được đánh số theo thứ tự ô, thuận tiện để dùng làm dữ liệu màu cho giao diện web.
• Mảng HEX: chứa năm chuỗi mã màu theo thứ tự hiện tại, dành cho môi trường nhận có hỗ trợ kiểu dữ liệu này.

Đây đều là văn bản được đưa vào bộ nhớ tạm, không phải tệp tải xuống. Các biến CSS chỉ đại diện cho vị trí, chưa mang ý nghĩa màu nền, màu chính hay màu chữ. Bạn vẫn cần tự gán vai trò phù hợp trong thiết kế sử dụng chúng.

Công cụ tạo màu ngẫu nhiên và phối theo quy luật như thế nào?

Phạm vi màu ngẫu nhiên

Mỗi ô chưa khóa được sinh màu độc lập với sắc độ nguyên từ 0 đến 359°, độ bão hòa nguyên từ 50 đến 99% và độ sáng HSL nguyên từ 40 đến 79%. Các khoảng này định hướng màu ngẫu nhiên về nhóm có sắc màu rõ, tránh hai cực đen và trắng trong bước chọn HSL.

Tuy nhiên, không có bước so sánh giữa các ô hoặc chấm điểm độ hài hòa của cả bảng. Một ô mới không được lựa chọn dựa trên màu của ô bên cạnh. Vì vậy, kết quả ngẫu nhiên nên được hiểu là nguồn gợi ý để sàng lọc, không phải bảng đã được tối ưu cho một mục đích thiết kế cụ thể.

Bốn quy luật phối từ màu gốc

Với cách phối theo quy luật, màu gốc được chuyển sang HSL. Gọi sắc độ là H và độ sáng là L, các vị trí được tính như sau:

Các góc được đưa về vòng màu bằng phép chia lấy dư cho 360°. Chẳng hạn, vượt qua cuối vòng màu sẽ quay về đầu vòng, không tạo một sắc độ nằm ngoài vòng. Độ sáng sau điều chỉnh được chặn ở 0–100%. Những mức cộng, trừ của L là điểm phần trăm, không phải tỷ lệ nhân với độ sáng ban đầu.

Đây là cách triển khai cụ thể của công cụ. Khái niệm hòa sắc tổng quát không bắt buộc mọi bảng tương đồng phải có đúng năm góc lệch như trên, hoặc mọi bảng tam giác phải bổ sung đúng hai biến thể tối.

Làm tròn và ảnh hưởng của ô khóa

Sắc độ, độ bão hòa và độ sáng của màu gốc được làm tròn về số nguyên trước khi tính biến thể. Khi chuyển ngược sang HEX, từng kênh RGB được làm tròn trên thang 0–255. Riêng màu gốc được chèn trực tiếp vào vị trí quy định, nên cách viết hoa hoặc thường có thể khác các mã được sinh mà không làm đổi màu.

Công cụ tính đủ năm vị trí rồi chỉ thay ô chưa khóa; nó không chuyển một màu dự kiến sang chỗ khác để bù cho ô khóa. Chọn bảng đặt sẵn là ngoại lệ: thao tác này mở khóa và thay cả năm ô.

Ví dụ đọc kết quả và giữ màu theo từng tình huống

Các ví dụ dưới đây được suy ra từ công thức trong mã nguồn, không phải kết quả chạy thử. Mỗi tình huống nêu rõ màu đầu vào và trạng thái khóa để tránh nhầm giữa bảng được tính với bảng thực sự được giữ lại.

Tạo dải đơn sắc từ màu đỏ

Giả định màu gốc là #FF0000, chọn đơn sắc và mở khóa cả năm ô. Màu này có sắc độ 0°, độ bão hòa 100% và độ sáng HSL 50%. Năm mức độ sáng lần lượt là 10%, 30%, 50%, 70% và 90%.

Kết quả theo thứ tự là #330000, #990000, #FF0000, #FF6666, #FFCCCC. Bạn có thể đọc bảng như một dải từ đỏ tối đến đỏ nhạt. Các mã này minh họa biến thể sáng tối, không chứng minh bất kỳ cặp chữ và nền nào trong bảng đạt mức tương phản cần thiết.

Đổi sang quy luật tam giác

Giữ màu gốc đỏ và mở khóa cả năm ô, nhưng đổi sang tam giác. Kết quả là #FF0000, #00FF00, #0000FF, #009900, #000099. Ba màu đầu tương ứng các sắc độ 0°, 120° và 240° ở độ sáng HSL 50%.

Hai màu cuối là biến thể lục và lam ở độ sáng 30%. Chúng không phải hai đỉnh mới của quan hệ tam giác. So với ví dụ đơn sắc, bảng này mở rộng sang các họ màu khác, nhưng người thiết kế vẫn phải tự quyết định màu nào chiếm diện tích lớn và màu nào chỉ dùng làm điểm nhấn.

Khi ô chứa màu gốc bị khóa

Giả định ô thứ ba đang có #123456 và được khóa, bốn ô còn lại mở. Với màu gốc đỏ và quy luật đơn sắc, kết quả trở thành #330000, #990000, #123456, #FF6666, #FFCCCC.

Màu đỏ gốc không xuất hiện vì vị trí dành cho nó bị khóa. Công cụ không đưa đỏ sang ô khác. Bảng cuối vì vậy không còn hoàn toàn đơn sắc, dù bốn ô được thay vẫn là các biến thể tính từ màu đỏ.

Khi chuyển sang bảng màu đặt sẵn

Giả định một hoặc nhiều ô đang khóa, sau đó chọn Pastel Dream. Cả năm ô sẽ mở khóa và lần lượt nhận #FFB7B2, #FFDAC1, #E2F0CB, #B5EAD7, #CBAACB.

Đây là thay bảng hoàn toàn, không phải chỉ điền vào những chỗ còn mở. Nếu có màu đang dùng mà bạn muốn giữ để đối chiếu, hãy ghi lại mã trước khi chuyển sang bảng đặt sẵn.

Ứng dụng bảng màu vào thiết kế web và nội dung hình ảnh

Từ bảng màu đến vai trò trong bố cục

Bảng màu có thể làm phương án khởi đầu cho trang web, slide hoặc ấn phẩm hình ảnh. Đây là các cách ứng dụng kết quả, không phải chế độ riêng của công cụ. Bạn cần tự chọn màu chủ đạo, màu hỗ trợ và màu nhấn, đồng thời xác định màu nào phù hợp cho chữ hoặc nền.

Hãy đánh giá màu trên một bố cục đại diện thay vì chỉ nhìn năm ô cạnh nhau. Một màu nổi bật ở ô mẫu có thể quá mạnh khi phủ toàn bộ trang; ngược lại, màu nhạt có thể phù hợp cho vùng nền nhưng không rõ khi dùng cho chữ nhỏ. Diện tích và vị trí sử dụng ảnh hưởng đáng kể đến cảm nhận chung.

Nếu đã có một màu thích hợp trong bảng, bạn có thể khóa ô đó rồi khám phá các ô còn lại. Cần phân biệt việc này với chọn màu gốc: bộ chọn màu chỉ cung cấp đầu vào cho phép phối, không tự khóa một ô đang hiển thị.

Chuyển mã màu sang môi trường thiết kế

Mã HEX có thể được chuyển thủ công sang phần mềm có ô nhập mã màu, kể cả Canva khi phần nhập tương ứng hỗ trợ. Dữ liệu CSS phù hợp hơn với công việc xây dựng giao diện web. Không có cơ chế đồng bộ bảng màu hoặc chuyển thiết kế tự động được xác nhận trong mã nguồn.

Nếu điểm xuất phát là ảnh tham chiếu, bạn có thể cân nhắc công cụ trích xuất bảng màu từ ảnh như một hướng khác. Đây là nhu cầu lấy màu từ hình ảnh, khác với sinh màu từ quy luật; không có căn cứ để khẳng định hai công cụ tự trao đổi dữ liệu.

Nên tạo ngẫu nhiên, phối theo quy luật hay chọn bảng có sẵn?

Ba cách tạo bảng khác nhau chủ yếu ở điểm xuất phát và mức kiểm soát, không có cách nào luôn đẹp hơn. Bạn nên chọn theo câu hỏi đang cần giải quyết: muốn tìm hướng mới, phát triển từ màu đã có, hay bắt đầu bằng một tổ hợp xác định?

• Tạo ngẫu nhiên: phù hợp khi chưa có màu gốc hoặc muốn thoát khỏi phương án quen thuộc. Mỗi màu được sinh độc lập nên bạn phải tự sàng lọc quan hệ giữa chúng. Khóa màu đã thích giúp thu hẹp phần cần khám phá tiếp.
• Phối theo quy luật: phù hợp khi đã có màu định hướng và muốn xem biến thể có quan hệ rõ ràng với nó. Cách này dễ đối chiếu giữa các hướng phối, nhưng màu đang khóa có thể làm bảng cuối lệch khỏi quy luật đã chọn.
• Chọn bảng đặt sẵn: phù hợp khi muốn một tổ hợp xác định để thử ngay trên bố cục. Cùng một lựa chọn cho cùng năm mã màu, nhưng thao tác sẽ thay toàn bộ bảng và mở khóa mọi ô.

Nếu cần giữ liên tục một màu đang có, hai cách đầu phù hợp hơn về cơ chế giữ ô khóa. Nếu muốn đổi hẳn hướng hình ảnh, bảng đặt sẵn là điểm bắt đầu dễ đối chiếu. Dù chọn cách nào, quyết định cuối vẫn nên dựa vào bố cục thực tế và khả năng đọc nội dung.

Giới hạn cần biết trước khi dùng bảng màu

Độ hài hòa không thay thế độ tương phản

Công cụ không đo tỷ lệ tương phản hoặc kiểm tra khả năng đọc chữ. Bạn cần đánh giá từng cặp chữ và nền sẽ sử dụng, thay vì suy ra từ quy luật phối hoặc độ sáng HSL. Một bảng có quan hệ sắc độ hợp lý vẫn có thể chứa hai màu quá gần nhau để dùng cho nội dung nhỏ.

Năm ô cũng không được bảo đảm là năm màu khác biệt. Độ sáng chạm biên có thể khiến nhiều biến thể thành đen hoặc trắng. Với màu vô sắc, đổi sắc độ có thể không làm đổi màu; sinh ngẫu nhiên cũng không có bước loại trùng. Công cụ không cung cấp lịch sử hoàn tác hay xuất ảnh trong phần triển khai được cung cấp.

Bảng đặt sẵn và thao tác sao chép

Hai mươi bảng mang nhãn xu hướng là dữ liệu cố định trong mã nguồn. Không có thông tin xác nhận nguồn tuyển chọn, tiêu chí xếp hạng hoặc cập nhật theo thời gian thực. Nên xem chúng là bộ mẫu tham khảo, không phải thống kê các màu phổ biến mới nhất.

Sao chép phụ thuộc khả năng hỗ trợ của trình duyệt. Thông báo thành công chưa bảo đảm văn bản đã thực sự vào bộ nhớ tạm, nên cần dán thử trước khi sử dụng tiếp. Phạm vi mã được cung cấp cũng không đủ để kết luận toàn bộ website không gửi, lưu hoặc theo dõi dữ liệu.

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

Vì sao tạo lại mà cả 5 màu vẫn giữ nguyên?

Trường hợp có căn cứ rõ nhất là cả năm ô đều đang khóa. Lệnh tạo ngẫu nhiên và lệnh phối theo quy luật chỉ cập nhật các ô chưa khóa, nên khi không còn ô nào mở, bảng sẽ giữ nguyên. Bạn có thể kiểm tra trạng thái từng ô và mở những vị trí muốn thay. Nếu còn ô mở nhưng không thấy thay đổi, mã nguồn được cung cấp chưa đủ để xác định nguyên nhân trên thiết bị của bạn; các thành phần khác của trang có thể cần được kiểm tra riêng.

Vì sao màu gốc đã chọn không xuất hiện trong bảng?

Màu gốc không tự xuất hiện chỉ vì bạn đã thay lựa chọn trong bộ chọn màu; nó được đưa vào bảng khi tạo theo quy luật. Vị trí dành cho màu gốc là ô thứ ba với tương đồng hoặc đơn sắc, ô thứ nhất với tam giác và ô thứ hai với bổ túc. Nếu vị trí đó đang khóa, màu cũ được giữ và màu gốc không được chuyển sang ô khác. Bảng sinh ngẫu nhiên cũng không có yêu cầu phải chứa màu gốc đang chọn.

Chọn bảng màu có sẵn có giữ các ô đang khóa không?

Không. Chọn một bảng có sẵn sẽ mở khóa cả năm ô rồi thay màu theo đúng thứ tự của bảng được chọn. Cơ chế này khác với tạo ngẫu nhiên và phối theo quy luật, vốn tôn trọng trạng thái khóa. Vì vậy, không nên dùng lựa chọn bảng đặt sẵn như một cách tìm màu chỉ cho các ô còn trống. Nếu đang giữ một mã quan trọng, hãy lưu lại mã đó trước khi chuyển bảng để vẫn có dữ liệu đối chiếu sau thao tác.

Vì sao phím Space không tạo màu khi tôi đang chọn màu hoặc quy luật?

Đó là điều kiện được đặt trong cơ chế xử lý phím tắt: sự kiện bàn phím xuất phát từ ô nhập hoặc danh sách chọn sẽ không kích hoạt tạo ngẫu nhiên. Bộ chọn màu thuộc nhóm ô nhập, còn danh sách quy luật thuộc nhóm lựa chọn. Cách xử lý này tách phím tắt tạo bảng khỏi thao tác với các điều khiển đó. Khi không còn thao tác trong hai nhóm này, Space có thể kích hoạt theo logic đã cung cấp; hành vi thực tế còn phụ thuộc các thành phần khác trên trang.

Có thể dùng bảng màu này để phối màu trong Canva không?

Có thể dùng các mã HEX làm dữ liệu màu nếu vị trí nhập màu trong Canva hỗ trợ, nhưng đó là chuyển mã thủ công. Mã nguồn không xác nhận tính năng kết nối tài khoản, đồng bộ bảng hoặc áp dụng màu trực tiếp vào thiết kế Canva. Bạn cần tự đưa màu vào các thành phần như nền, chữ và hình trang trí. Sau khi áp dụng, hãy xem lại toàn bộ bố cục vì cùng một bảng màu có thể tạo cảm nhận khác nhau tùy diện tích và cách phân vai.

Vì sao bảng mới có các màu giống hoặc trùng nhau?

Công cụ không kiểm tra để bảo đảm năm màu luôn khác nhau. Trong phối đơn sắc, các mức độ sáng vượt biên đều bị chặn về 0% hoặc 100%, nên có thể tạo mã trùng. Với màu vô sắc, thay góc sắc độ cũng không nhất thiết tạo màu mới. Ngoài ra, bước làm tròn và cách sinh ngẫu nhiên có thể dẫn đến màu gần nhau hoặc trùng nhau. Hãy đối chiếu mã HEX để phân biệt trùng giá trị thật với những màu chỉ trông tương tự trên màn hình.

Tôi thấy thông báo đã sao chép nhưng không dán được mã màu thì làm gì?

Hãy thử dán vào một ô văn bản đơn giản để kiểm tra nội dung bộ nhớ tạm trước. Thông báo xuất hiện sau lệnh sao chép không phải bằng chứng chắc chắn rằng trình duyệt đã ghi được dữ liệu, vì cơ chế hiện tại không xác nhận mọi trường hợp thất bại. Nếu chưa có nội dung, bạn có thể thử lại hoặc ghi mã HEX đang hiển thị để dùng thủ công. Nếu dán được văn bản nhưng nơi nhận từ chối, hãy kiểm tra nơi đó cần một mã riêng, mảng màu hay khai báo CSS.