Color Palette Generator
Generate color palettes
Generate color palettes Chạy cục bộ trong trình duyệt của bạn
Complementary
#4ecdc4
#cd4e57
Analogous
#4ecd85
#4ecdc4
#4e96cd
Triadic
#4ecdc4
#c44ecd
#cdc44e
Split complementary
#4ecdc4
#cd4e96
#cd854e
Tetradic
#4ecdc4
#844ecd
#cd4e57
#97cd4e
Tints (towards white)
c3eeeb
88ddd7
4cccc3
2d9f97
1c635e
Shades (towards black)
278b84
1f6f6a
18544f
103835
081c1a
#4ecdc4 #cd4e57 #4ecd85 #4e96cd #c44ecd #cdc44e #cd4e96 #cd854e #844ecd #97cd4e #c3eeeb #88ddd7 #4cccc3 #2d9f97 #1c635e #278b84 #1f6f6a #18544f #103835 #081c1a
About the
Trình tạo bảng màu lấy một màu cơ bản và rút ra các sơ đồ hài hòa tiêu chuẩn từ nó: bổ sung, tương tự, bộ ba, bổ sung tách và tứ giác, cộng với một loạt các sắc thái hướng tới màu trắng và các sắc thái hướng tới màu đen. Sự hài hòa được tính toán trong HSL bằng cách xoay màu sắc trong khi vẫn giữ độ bão hòa và độ sáng, đó là lý do tại sao kết quả vẫn liên quan đến lớp nền của bạn thay vì trôi đi. Đoạn đường nối là phần mà hầu hết các bảng màu thực sự cần, bởi vì một giao diện hoạt động cần một số giá trị có cùng màu sắc cho các trạng thái di chuột, hoạt động và vô hiệu hóa, chứ không chỉ một màu nhấn.
Where people use the
- Xây dựng bảng màu xung quanh một màu thương hiệu duy nhất.
- Tạo các biến thể di chuột, hoạt động và bị vô hiệu hóa từ một giọng.
- Khám phá các lựa chọn thay thế cho màu không đạt được kiểm tra độ tương phản.
- Tạo một đoạn đường nối trung tính cho các bề mặt và đường viền.
How to use the
- 1
Chọn màu cơ bản
Nhập giá trị hex chẳng hạn như 4ECDC4 hoặc sử dụng bộ chọn. Mọi thứ khác đều bắt nguồn từ một màu này.
- 2
Đọc các sơ đồ hòa âm
Mỗi sơ đồ là một vòng quay màu sắc khác nhau. Phần bù là 180 độ, bộ ba là 120 và 240, v.v.
- 3
Đi theo đoạn đường nối màu và bóng râm
Năm tông màu trắng và năm tông màu đen sẽ cung cấp cho bạn các trạng thái và độ cao mà bạn cần trong giao diện thực.
- 4
Sao chép các giá trị
Danh sách đầy đủ các giá trị hex được tạo nằm trong một khối, sẵn sàng để dán vào biểu định kiểu hoặc tệp mã thông báo thiết kế.
- 5
Kiểm tra độ tương phản trước khi vận chuyển
Chạy bất kỳ cặp văn bản và nền nào từ bảng màu thông qua Trình kiểm tra độ tương phản. Hài hòa không giống như có thể đọc được.
Lời khuyên và phương pháp hay nhất
- Chọn màu cơ bản từ thương hiệu, sau đó chỉ điều chỉnh độ sáng cho các trạng thái.
- Dành màu bổ sung cho một hành động bạn muốn được chú ý.
- Luôn thực hiện ghép nối cuối cùng thông qua kiểm tra độ tương phản trước khi vận chuyển.
Câu hỏi thường gặp
Sự khác biệt giữa các chương trình là gì?
Màu bổ sung sử dụng màu sắc đối lập, mang lại độ tương phản mạnh nhất và phù hợp với lời kêu gọi hành động. Tương tự sử dụng hàng xóm 30 độ mỗi bên, yên tĩnh và an toàn. Triadic trải đều ba màu, sống động và khó kiểm soát hơn. Sự bổ sung phân chia làm dịu đi sự xung đột bổ sung bằng cách sử dụng hai màu sắc ở hai bên đối diện. Tetradic sử dụng bốn màu ở các góc vuông, phù hợp với bảng điều khiển phức tạp.
Tại sao các màu được tạo ra có cùng độ bão hòa và độ sáng?
Bởi vì chỉ xoay màu sắc là điều khiến chúng có liên quan rõ ràng. Việc thay đổi độ sáng đồng thời tạo ra các màu trông không liên quan, làm mất điểm nhấn của bảng màu.
Có phải tông màu chỉ là màu trộn với màu trắng?
Thực tế là có, nhưng được tính toán trong HSL bằng cách tăng độ sáng trong khi vẫn giữ màu sắc và độ bão hòa. Điều đó giữ cho màu sắc ổn định, trong khi sự pha trộn đơn giản trong RGB sẽ chuyển sang màu xám.
Một bảng màu nên có bao nhiêu màu?
Đối với hầu hết các giao diện, hai hoặc ba màu cộng với một dải màu trung tính là đủ. Một sơ đồ có năm màu bão hòa khó sử dụng một cách nhất quán và thường trông có vẻ ngẫu nhiên.
Nó có kiểm tra khả năng tiếp cận không?
Không, nó chỉ tạo ra màu sắc. Sử dụng Bộ kiểm tra độ tương phản trên bất kỳ cặp đôi nào bạn định sử dụng cho văn bản.