Tạo bảng màu năm sắc: kiểu ngẫu nhiên, tương đồng và tương phản theo vòng tròn màu
Công cụ sinh bảng màu gồm năm sắc theo ba kiểu phối. Kiểu ngẫu nhiên cho năm màu độc lập, kiểu tương đồng lấy các màu nằm sát nhau trên vòng tròn màu, kiểu tương phản lấy các màu cách xa nhau. Mỗi màu hiện kèm mã HEX và giá trị RGB, bấm vào là sao chép ngay.
Tính năng nổi bật
- Ba kiểu phối màu: ngẫu nhiên hoàn toàn, tương đồng và tương phản
- Mỗi lần tạo cho ra đúng năm màu, hiển thị thành dải lớn và thành năm thẻ riêng
- Kiểu tương đồng lấy năm góc màu cách nhau 15 độ quanh một góc gốc ngẫu nhiên
- Kiểu tương phản lấy các góc lệch 0, 60, 120, 180 và 240 độ từ góc gốc
- Bấm vào ô màu lớn hoặc vào dòng mã là sao chép ngay giá trị tương ứng
- Mỗi thẻ màu cho cả mã HEX và chuỗi rgb đầy đủ, sao chép riêng từng dạng
- Nút sao chép toàn bộ năm mã HEX thành một dòng ngăn cách bằng dấu phẩy
- Chạy trong trình duyệt, bấm tạo lại bao nhiêu lần cũng được, không cần đăng nhập
Bảng màu sinh tự động dùng vào việc gì
Ít ai lấy nguyên một bảng màu ngẫu nhiên đưa thẳng vào sản phẩm, và cũng không nên làm vậy. Giá trị thật của công cụ này nằm ở giai đoạn trước đó: lúc bạn còn chưa biết mình muốn tông gì. Bấm tạo vài chục lần trong một phút, bạn sẽ thấy mắt mình dừng lại ở một vài dải nhất định, và đó là thông tin hữu ích hơn nhiều so với ngồi nhìn màn hình trắng. Kiểu tương đồng và tương phản còn có tác dụng dạy nghề: nhìn cùng lúc năm màu được sinh theo đúng quy tắc góc trên vòng tròn màu là cách nhanh nhất để cảm nhận vì sao hai kiểu phối này cho hiệu ứng khác nhau. Sau khi có một hướng, bạn lấy một hoặc hai màu làm điểm khởi đầu rồi tự tinh chỉnh độ bão hòa và độ sáng cho phù hợp với yêu cầu thật của dự án.
Lợi ích khi sử dụng
- Thoát khỏi thế bí khi bắt đầu một thiết kế mà chưa có hướng màu nào
- Hiểu trực quan sự khác nhau giữa phối tương đồng và phối tương phản
- Lấy được mã ngay ở hai định dạng thông dụng mà không phải tự chuyển đổi
- Sao chép cả bảng trong một thao tác để dán vào phần khai báo biến màu
- Không cần cài phần mềm thiết kế chỉ để thử vài phương án màu
Cách tạo và chọn bảng màu
- 1Chọn kiểu phối: ngẫu nhiên khi bạn muốn tìm ý tưởng thoải mái, tương đồng khi cần dải màu hài hòa, tương phản khi cần màu nhấn nổi bật.
- 2Bấm nút tạo, năm màu hiện ngay ở dải lớn phía trên và ở năm thẻ chi tiết bên dưới.
- 3Bấm tạo lại nhiều lần cho tới khi gặp dải màu bạn thấy hợp, mỗi lần bấm cho một góc gốc mới.
- 4Bấm vào ô màu để sao chép nhanh mã HEX, hoặc bấm vào dòng rgb trong thẻ nếu bạn cần định dạng đó.
- 5Bấm sao chép toàn bộ mã HEX để lấy cả năm màu cùng lúc, rồi dán vào tệp thiết kế hoặc vào phần khai báo biến màu trong dự án.
Ba kiểu phối màu được tạo theo công thức nào
Hiểu công thức giúp bạn biết mong đợi gì ở mỗi kiểu. Kiểu ngẫu nhiên sinh năm số nguyên bất kỳ trong khoảng từ 0 tới hơn 16,7 triệu rồi đổi sang thập lục phân, nghĩa là cả góc màu, độ bão hòa lẫn độ sáng đều ngẫu nhiên; bạn sẽ gặp cả những màu rất nhạt lẫn những màu gần đen trong cùng một dải. Kiểu tương đồng chọn một góc màu gốc ngẫu nhiên từ 0 tới 359 độ rồi lấy năm góc lệch lần lượt âm 30, âm 15, 0, 15 và 30 độ, tất cả đều cố định độ bão hòa ở 70 phần trăm và độ sáng ở 50 phần trăm. Vì thế dải tương đồng luôn có độ đậm nhạt đồng đều và chỉ khác nhau ở sắc, tạo cảm giác liền mạch. Kiểu tương phản cũng bắt đầu từ một góc gốc ngẫu nhiên nhưng lấy năm góc lệch 0, 180, 60, 240 và 120 độ với cùng mức bão hòa và độ sáng; cặp lệch 180 độ là cặp đối nhau qua tâm vòng tròn màu, còn ba góc còn lại chia đều phần còn lại, nên dải này giống một phối tam giác mở rộng hơn là phối đối xứng thuần túy.
Vì sao dải tương đồng và tương phản luôn có cùng độ đậm
Đây là điểm cần biết để không hiểu nhầm kết quả. Hai kiểu tương đồng và tương phản cố định độ bão hòa ở 70 phần trăm và độ sáng ở 50 phần trăm cho cả năm màu, chỉ thay đổi góc màu. Cách làm này cho ra dải sạch và dễ nhìn, nhưng nó cũng có nghĩa là bảng màu sinh ra chưa dùng ngay được cho một giao diện thật, vì giao diện cần cả những sắc rất nhạt để làm nền và những sắc rất đậm để làm chữ. Cách xử lý thông thường là lấy màu chính từ dải này rồi tự dựng một thang từ nó: giữ nguyên góc màu và độ bão hòa, chỉ thay đổi độ sáng theo các mức chẳng hạn 95, 85, 70, 50, 35 và 20 phần trăm, bạn sẽ có một thang sáu bậc dùng được cho nền, viền, chữ phụ và chữ chính. Có một lưu ý nhỏ: ở cùng mức độ sáng, màu vàng luôn trông sáng hơn màu xanh dương rất nhiều do cách mắt cảm nhận, nên khi dựng thang cho các góc màu khác nhau bạn phải điều chỉnh bằng mắt chứ không thể dùng đúng một bộ số.
Từ bảng màu tới hệ màu dùng được trong sản phẩm
Một hệ màu thực tế không phải năm màu ngang hàng mà là các vai trò rõ ràng. Màu chính dùng cho nút chính, liên kết và các điểm nhấn thương hiệu, thường chỉ một màu. Màu phụ dùng cho các thành phần thứ cấp, có thể lấy màu tương đồng nằm cạnh màu chính. Màu nhấn dùng rất tiết chế cho những chỗ cần hút mắt, đây là nơi màu tương phản phát huy tác dụng. Nhóm màu trung tính gồm các sắc xám hoặc xám ngả nhẹ theo tông màu chính, chiếm phần lớn diện tích giao diện. Cuối cùng là nhóm màu trạng thái: xanh lá cho thành công, đỏ cho lỗi, vàng cho cảnh báo, xanh dương cho thông tin; nhóm này nên giữ gần quy ước chung vì người dùng đã quen. Một tỷ lệ thường được nhắc tới khi phân bổ diện tích là 60 phần trăm cho màu nền chủ đạo, 30 phần trăm cho màu phụ và 10 phần trăm cho màu nhấn. Bảng năm màu sinh ở đây là nguyên liệu cho bước đầu, còn việc gán vai trò và dựng thang là việc bạn phải làm tiếp.
Kiểm tra độ tương phản trước khi chốt màu
Đây là bước hay bị bỏ qua và cũng là nguyên nhân của rất nhiều giao diện đẹp nhưng khó đọc. Chỉ số tương phản giữa màu chữ và màu nền được tính từ độ chói tương đối của hai màu, cho giá trị từ 1 trên 1 khi hai màu giống hệt nhau tới 21 trên 1 giữa đen tuyền và trắng tinh. Mức thường được lấy làm chuẩn là tối thiểu 4,5 trên 1 cho chữ cỡ thường và 3 trên 1 cho chữ cỡ lớn từ khoảng 18 điểm trở lên hoặc chữ đậm từ 14 điểm. Vấn đề với các dải sinh tự động là những màu đặt ở độ sáng 50 phần trăm hầu như không đạt mức 4,5 trên 1 khi làm nền cho chữ trắng lẫn chữ đen, nên chúng chỉ hợp làm màu khối, viền hoặc biểu đồ chứ không hợp làm nền văn bản. Ngoài ra khoảng 8 phần trăm nam giới có dạng rối loạn phân biệt màu đỏ và xanh lá, vì vậy đừng bao giờ để thông tin quan trọng chỉ được phân biệt bằng màu; luôn kèm thêm nhãn chữ, biểu tượng hoặc kiểu nét.
Giới hạn của công cụ và những gì bạn phải tự làm
Bốn giới hạn cần biết. Thứ nhất, không khóa được màu: mỗi lần bấm tạo là cả năm màu đổi hết, không giữ lại được màu bạn thích để chỉ sinh lại bốn màu còn lại; cách xử lý là sao chép mã màu ưng ý ra ngoài trước khi bấm tiếp. Thứ hai, không nhập được màu gốc, tức bạn không thể đưa vào mã màu thương hiệu rồi yêu cầu công cụ dựng dải quanh nó; góc gốc luôn ngẫu nhiên. Thứ ba, không có tùy chọn xuất ra tệp, chỉ có sao chép dạng văn bản; muốn đưa vào phần mềm thiết kế thì bạn dán từng mã hoặc dán cả dòng rồi tách ra. Thứ tư, không có sẵn chỉ số tương phản hay công cụ dựng thang độ sáng, hai việc đó bạn phải làm bằng công cụ khác. Bù lại, ưu điểm là tốc độ: bấm ba lần trong một giây và duyệt hàng chục phương án, đây đúng là thứ cần ở giai đoạn tìm ý tưởng, còn giai đoạn hoàn thiện thì luôn cần công cụ chuyên sâu hơn.
Câu hỏi thường gặp (FAQ)
Ba kiểu phối màu khác nhau thế nào?
Ngẫu nhiên sinh năm màu độc lập nên cả sắc, độ đậm lẫn độ sáng đều khác nhau. Tương đồng lấy năm góc màu cách nhau 15 độ quanh một góc gốc nên dải rất liền mạch. Tương phản lấy các góc lệch 0, 180, 60, 240 và 120 độ nên các màu cách xa nhau và nổi bật khi đặt cạnh nhau.
Vì sao dải tương đồng luôn có độ đậm giống nhau?
Vì hai kiểu tương đồng và tương phản cố định độ bão hòa ở 70 phần trăm và độ sáng ở 50 phần trăm, chỉ thay đổi góc màu. Điều đó cho dải sạch và dễ nhìn, nhưng cũng có nghĩa bạn phải tự dựng thêm các bậc sáng và tối trước khi dùng cho giao diện thật.
Có thể giữ lại một màu và chỉ tạo lại các màu còn lại không?
Không, mỗi lần bấm tạo là cả năm màu đổi hết. Cách xử lý đơn giản là sao chép mã màu bạn ưng ý ra một chỗ khác trước khi bấm tiếp, rồi tự ghép lại thành bảng cuối cùng theo ý mình.
Có nhập được màu thương hiệu để dựng dải quanh nó không?
Không, góc màu gốc luôn được sinh ngẫu nhiên. Muốn dựng dải quanh một màu có sẵn, bạn cần công cụ cho phép nhập màu gốc, hoặc tự tính: giữ nguyên góc màu và độ bão hòa của màu thương hiệu rồi thay đổi độ sáng theo từng bậc.
Bảng màu sinh ra dùng thẳng cho website được không?
Không nên dùng thẳng. Giao diện thật cần cả sắc rất nhạt để làm nền lẫn sắc rất đậm để làm chữ, trong khi dải ở đây đều nằm ở độ sáng 50 phần trăm. Hãy lấy một hoặc hai màu làm điểm khởi đầu rồi tự dựng thang độ sáng quanh chúng.
Nên dùng bao nhiêu màu trong một giao diện?
Thường là một màu chính, một màu phụ, một màu nhấn dùng rất tiết chế, một nhóm màu trung tính chiếm phần lớn diện tích, cộng bốn màu trạng thái cho thành công, lỗi, cảnh báo và thông tin. Nhiều màu hơn thế thường khiến giao diện rối và khó giữ nhất quán.
Quy tắc 60, 30, 10 trong phối màu là gì?
Là cách phân bổ diện tích: khoảng 60 phần trăm cho màu nền chủ đạo, 30 phần trăm cho màu phụ và 10 phần trăm cho màu nhấn. Nó không phải luật cứng nhưng là điểm khởi đầu tốt, giúp tránh lỗi phổ biến là dùng màu nhấn trên quá nhiều diện tích khiến nó hết tác dụng nhấn.
Độ tương phản giữa chữ và nền cần đạt mức nào?
Mức thường được lấy làm chuẩn là tối thiểu 4,5 trên 1 cho chữ cỡ thường và 3 trên 1 cho chữ cỡ lớn từ khoảng 18 điểm hoặc chữ đậm từ 14 điểm. Các màu ở độ sáng 50 phần trăm hầu như không đạt mức này với cả chữ trắng lẫn chữ đen, nên chúng chỉ hợp làm khối màu.
Vì sao cùng độ sáng mà màu vàng trông sáng hơn màu xanh dương?
Vì mắt người nhạy với ánh sáng ở vùng vàng lục hơn nhiều so với vùng lam. Giá trị độ sáng trong hệ HSL là con số hình học chứ không phản ánh độ chói cảm nhận được, nên khi dựng thang màu cho các góc khác nhau bạn phải điều chỉnh bằng mắt chứ không dùng chung một bộ số.
Có cần tính tới người khó phân biệt màu không?
Có. Khoảng 8 phần trăm nam giới có dạng rối loạn phân biệt đỏ và xanh lá. Nguyên tắc là không để thông tin quan trọng chỉ được phân biệt bằng màu: biểu đồ nên có thêm kiểu nét hoặc nhãn, trạng thái nên có thêm biểu tượng, và bảng dữ liệu nên có chữ chứ không chỉ ô màu.
Sao chép toàn bộ cho ra định dạng gì?
Một dòng gồm năm mã HEX ngăn cách bằng dấu phẩy và khoảng trắng. Dạng này dán vào ghi chú hoặc tin nhắn thì đọc được ngay, còn muốn đưa vào mã nguồn thì bạn tách ra và gán cho từng biến màu theo vai trò sử dụng.
Màu sinh ra có bị trùng giữa các lần bấm không?
Với kiểu ngẫu nhiên thì xác suất trùng gần như bằng không vì không gian có hơn 16,7 triệu giá trị. Với hai kiểu còn lại, góc màu chỉ có 360 giá trị nên bấm nhiều lần bạn sẽ gặp lại những dải gần giống nhau, đó là chuyện bình thường.
Từ khóa liên quan
- tạo bảng màu online
- công cụ phối màu miễn phí
- color palette generator tiếng việt
- bảng màu cho website
- phối màu tương đồng
- phối màu tương phản
- vòng tròn màu sắc
- chọn màu cho thương hiệu
- quy tắc 60 30 10 phối màu
- thang màu cho giao diện
- độ tương phản chữ và nền
- màu chính màu phụ màu nhấn
- hsl là gì trong css
- chuyển hex sang rgb
- bảng màu cho ứng dụng di động
- thiết kế cho người mù màu
- biến css cho hệ màu
- tạo màu ngẫu nhiên online
- ý tưởng phối màu thiết kế
- mã màu hex đẹp
