Color Palette Generator - Tạo Bảng Màu Hài Hòa Online

Tính năng nổi bật

• Chọn màu gốc bằng bảng chọn màu hoặc gõ thẳng mã hex sáu ký tự
• Sáu quy tắc phối màu: tương đồng, tương phản, tam giác, tứ giác, đơn sắc và tương phản tách đôi
• Luôn cho ra đúng năm màu, cập nhật ngay khi bạn đổi màu gốc hoặc đổi quy tắc
• Khóa từng ô màu để giữ lại màu ưng ý khi bốc lại bảng
• Nút bốc lại chọn một màu gốc ngẫu nhiên rồi dựng bảng mới quanh nó
• Sao chép mã hex của từng màu riêng lẻ
• Sao chép cả năm mã màu một lần, mỗi màu một dòng
• Xuất bảng màu thành khối biến CSS đặt trong bộ chọn gốc, dán thẳng vào tệp định kiểu

Công cụ này khác công cụ lấy màu từ ảnh thế nào

Hai cách dựng bảng màu phục vụ hai tình huống khác nhau. Nếu bạn đã có sẵn một hình ảnh làm điểm tựa, chẳng hạn ảnh sản phẩm, ảnh không gian cửa hàng hay một tấm ảnh gợi đúng cảm giác bạn muốn, thì cách nhanh nhất là rút màu ra từ chính ảnh đó bằng công cụ trích bảng màu từ ảnh; bảng màu thu được mang sẵn sự hài hòa vì các màu ấy vốn đã nằm cạnh nhau trong thực tế. Còn công cụ trên trang này đi hướng ngược lại: bạn không có ảnh, chỉ có một màu duy nhất phải giữ, thường là màu logo hoặc màu thương hiệu đã được duyệt, và cần dựng phần còn lại quanh nó. Việc dựng dựa trên quan hệ hình học trên vòng tròn màu chứ không dựa trên hình ảnh nào. Cách này cho kết quả nhất quán và giải thích được: khi ai đó hỏi vì sao chọn màu này, bạn trả lời được rằng nó nằm đối diện màu chính trên vòng tròn màu, chứ không phải vì trông có vẻ hợp.

Lợi ích khi sử dụng

• •Giữ được đúng màu thương hiệu mà vẫn có phần còn lại hài hòa với nó
• •Giải thích được lý do chọn từng màu thay vì chọn theo cảm tính
• •Khóa và bốc lại giúp duyệt qua hàng chục phương án trong một phút
• •Xuất thẳng ra biến CSS nên dùng được ngay trong dự án
• •Không cần tài khoản, không giới hạn số lần tạo bảng màu

Cách tạo một bảng màu

1. 1Nhập mã hex của màu bạn buộc phải giữ, thường là màu logo, hoặc bấm bảng chọn màu nếu chưa có màu nào cố định.
2. 2Chọn quy tắc phối màu: đơn sắc cho giao diện điềm đạm, tương đồng cho cảm giác liền mạch, tương phản khi cần một màu nhấn mạnh.
3. 3Nhìn năm ô màu và bấm biểu tượng ổ khóa ở những ô bạn muốn giữ lại.
4. 4Bấm nút bốc lại nhiều lần để duyệt qua nhiều phương án, các ô đã khóa sẽ giữ nguyên.
5. 5Bấm xuất CSS để lấy khối biến màu, rồi đổi tên biến theo vai trò trước khi đưa vào dự án.

Sáu quy tắc và góc lệch cụ thể của từng quy tắc

Mọi phép dựng đều làm trên hệ màu gồm ba thành phần là sắc màu, độ bão hòa và độ sáng, trong đó sắc màu là một góc từ 0 tới 360 độ trên vòng tròn màu. Quy tắc tương đồng lấy các màu lệch 30 và 60 độ về cả hai phía so với màu gốc, cho cảm giác liền mạch và êm, hợp với giao diện không cần điểm nhấn mạnh. Quy tắc tương phản lấy màu nằm đối diện, tức lệch đúng 180 độ, kèm hai biến thể sáng hơn và tối hơn của cặp đó, cho độ tương phản cao nhất và hợp khi cần một màu nhấn nổi bật trên nền màu chính. Quy tắc tam giác lấy hai màu cách đều ở 120 và 240 độ, cho bảng màu sống động và cân bằng nhưng khó dùng vì cả ba đều mạnh ngang nhau. Quy tắc tứ giác thêm các màu ở 90, 180 và 270 độ, tức hai cặp tương phản, cho nhiều lựa chọn nhất nhưng cũng dễ rối nhất. Quy tắc đơn sắc giữ nguyên sắc màu và độ bão hòa, chỉ đổi độ sáng qua năm mức 90, 70, mức của màu gốc, 30 và 10. Quy tắc tương phản tách đôi lấy hai màu ở 150 và 210 độ, tức hai màu nằm hai bên màu đối diện, giữ được độ tương phản mà bớt gay gắt hơn cặp đối diện thẳng.

Năm màu chưa phải một bộ màu giao diện hoàn chỉnh

Bảng năm màu là điểm khởi đầu chứ không phải sản phẩm cuối. Một bộ màu dùng được cho website hay ứng dụng còn thiếu ba nhóm. Nhóm thứ nhất là dải trung tính: ít nhất năm tới bảy mức xám từ gần trắng tới gần đen, dùng cho nền, đường kẻ, chữ phụ và chữ chính. Đây là nhóm chiếm diện tích lớn nhất trên màn hình thật, và bảng màu rực rỡ đến mấy cũng vô dụng nếu thiếu nó. Một mẹo giúp giao diện trông có chủ đích là pha một chút sắc màu chính vào dải xám thay vì dùng xám trung tính tuyệt đối. Nhóm thứ hai là màu trạng thái: xanh lá cho thành công, vàng cam cho cảnh báo, đỏ cho lỗi và xanh dương cho thông tin. Bốn màu này nên tuân theo quy ước chung mà người dùng đã quen chứ đừng sáng tạo, kể cả khi chúng không nằm trong bảng màu của bạn. Nhóm thứ ba là thang độ sáng cho mỗi màu chính, thường từ chín tới mười một bậc, để bạn có màu nhạt cho nền khối, màu đậm cho chữ và màu trung gian cho trạng thái di chuột. Về tỷ lệ sử dụng, quy tắc quen dùng là khoảng sáu phần màu nền, ba phần màu phụ và một phần màu nhấn.

Cùng độ sáng trong hệ HSL không có nghĩa là sáng bằng nhau

Đây là cái bẫy khiến nhiều bảng màu trông cân đối trên giấy nhưng hỏng khi đưa lên giao diện. Độ sáng trong hệ màu này là một con số hình học, tính từ giá trị lớn nhất và nhỏ nhất trong ba kênh màu, chứ không phản ánh độ sáng mà mắt người thật sự cảm nhận. Mắt người nhạy nhất với vùng xanh lá và vàng, kém nhạy nhất với vùng xanh lam và tím. Hệ quả rất cụ thể: một màu vàng và một màu xanh lam cùng đặt ở độ sáng 50 sẽ cho cảm giác chênh nhau rất xa, màu vàng chói còn màu lam gần như tối. Vì thế khi quy tắc tam giác hay tứ giác trả về ba bốn màu cùng độ sáng, đừng tin rằng chúng cân bằng về mặt thị giác. Cách kiểm tra nhanh nhất là chuyển bảng màu về thang xám và xem các ô có phân biệt được với nhau hay không. Cách kiểm tra đúng hơn là tính tỷ lệ tương phản theo công thức của tiêu chuẩn tiếp cận nội dung web, vốn dựa trên độ chói tương đối có tính tới độ nhạy khác nhau của ba kênh màu.

Kiểm tra bảng màu trước khi đưa vào dự án

Ba phép kiểm tra nên làm với mọi bảng màu. Thứ nhất là tương phản chữ và nền: tiêu chuẩn yêu cầu tỷ lệ tối thiểu 4,5 trên 1 cho chữ thường và 3 trên 1 cho chữ lớn, tức từ cỡ 24 pixel trở lên hoặc từ 18,66 pixel nếu in đậm; các thành phần giao diện như viền ô nhập và biểu tượng cũng cần tối thiểu 3 trên 1. Hãy kiểm tra mọi cặp mà bạn định dùng chung, đặc biệt là màu nhấn dùng làm nền nút bấm với chữ trắng đặt lên. Thứ hai là kiểm tra với người khó phân biệt màu: dạng phổ biến nhất là khó phân biệt đỏ với xanh lá, ảnh hưởng tới khoảng tám phần trăm nam giới, nên nếu bảng màu của bạn dùng cặp đỏ và xanh lá làm hai trạng thái đối lập thì một phần người dùng sẽ không phân biệt được; nguyên tắc an toàn là không bao giờ để màu sắc là dấu hiệu duy nhất, luôn kèm thêm biểu tượng hoặc chữ. Thứ ba là kiểm tra trên nhiều màn hình: màu hiển thị khác nhau đáng kể giữa các thiết bị, và nếu bảng màu còn dùng cho ấn phẩm in thì nhớ rằng nhiều màu rực trên màn hình không in ra được đúng vì hệ màu in có phạm vi hẹp hơn.

Từ bảng màu tới mã CSS: đặt tên theo vai trò, không theo số thứ tự

Nút xuất CSS cho ra một khối biến đặt tên theo số thứ tự, dạng biến màu một tới biến màu năm. Dùng thẳng như vậy là chuốc lấy rắc rối, vì sáu tháng sau không ai nhớ biến màu ba là gì và dùng cho việc gì, còn khi đổi bảng màu thì bạn phải dò lại toàn bộ nơi sử dụng. Cách làm bền hơn là hai tầng biến. Tầng thứ nhất giữ giá trị màu thô, đặt tên theo màu và mức độ sáng, ví dụ tên màu kèm số bậc. Tầng thứ hai đặt tên theo vai trò trong giao diện và trỏ vào tầng thứ nhất, ví dụ màu chính, màu nhấn, màu nền, màu nền khối nổi, màu chữ chính, màu chữ phụ, màu đường kẻ. Toàn bộ mã giao diện chỉ dùng tầng thứ hai. Nhờ vậy, khi cần đổi màu thương hiệu bạn chỉ sửa một chỗ, và khi cần làm chế độ nền tối bạn chỉ việc gán lại tầng thứ hai sang các bậc màu khác mà không phải sửa một dòng nào trong mã giao diện. Đây cũng là cách các hệ thống thiết kế lớn tổ chức màu, và nó đáng làm ngay từ dự án nhỏ.

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

Từ khóa liên quan

• tạo bảng màu online
• công cụ phối màu website
• color palette generator
• bảng màu hài hòa
• quy tắc phối màu tương phản
• màu tương đồng analogous
• phối màu đơn sắc
• vòng tròn màu sắc
• chọn màu cho thương hiệu
• bộ màu cho giao diện web
• xuất bảng màu ra css
• biến màu trong css
• độ tương phản chữ và nền
• màu cho người mù màu
• hệ màu hsl là gì
• thang độ sáng của một màu
• màu trạng thái thành công cảnh báo lỗi
• quy tắc 60 30 10 trong phối màu
• tạo bảng màu từ mã hex
• bảng màu cho chế độ nền tối