Đồ họa / Màu sắc
Trình tạo bảng màu: Phối màu hài hòa chỉ với một cú nhấp
Tạo bảng màu theo lý thuyết màu: tương đồng, bổ sung, bộ ba, bổ sung phân tách, đơn sắc hoặc ngẫu nhiên, với từ ba đến tám màu. Khóa những màu bạn thích và tạo lại các màu còn lại, kiểm tra độ tương phản của từng màu với màu trắng, rồi xuất bảng màu dưới dạng biến CSS, cấu hình Tailwind, JSON, mã hex hoặc PNG.
Trình tạo bảng màu: Phối màu hài hòa chỉ với một cú nhấp: Mỗi bảng màu bắt đầu từ một sắc độ cơ sở, lấy từ màu đã khóa nếu bạn đã khóa màu, rồi đặt các sắc độ còn lại theo quy tắc đã chọn: các bước 30° cho màu tương đồng, sắc độ đối diện cho màu bổ sung, các bước 120° cho bộ ba, 150° về mỗi phía cho màu bổ sung phân tách, hoặc một sắc độ từ tối đến sáng cho bảng màu đơn sắc. Độ sáng và độ bão hòa thay đổi để tập hợp có màu sáng, màu trung gian và màu tối; mỗi màu cũng hiển thị tỷ lệ tương phản WCAG với màu trắng. Chạy 100% cục bộ trong trình duyệt của bạn, không có tệp nào được tải lên máy chủ.
- Danh mục
- Công cụ lập trình viên
- Lượt chạy
- Trong trình duyệt của bạn
- Chi phí
- Miễn phí · không cần đăng ký
- Trạng thái khả dụng
- Sẵn sàng sử dụng
Chạy hoàn toàn trong trình duyệt của bạn
Hoặc nhấn phím cách. Hãy khóa những màu bạn muốn giữ lại.
#64A6F5Tỷ lệ 2.5:1 trên nền trắng#382B9DTỷ lệ 10.5:1 trên nền trắng#772BB7Tỷ lệ 7.5:1 trên nền trắng#BE4BBATỷ lệ 4.3:1 trên nền trắng#E0367BTỷ lệ 4.2:1 trên nền trắng:root {
--color-1: #64a6f5;
--color-2: #382b9d;
--color-3: #772bb7;
--color-4: #be4bba;
--color-5: #e0367b;
}
Sử dụng bảng màu
Một cách phân chia phổ biến là khoảng 60% cho một màu trung tính, 30% cho màu trung tính thứ hai và 10% cho màu nhấn, để màu nổi bật nhất được dùng tiết chế cho nút và phần cần làm nổi bật.
Độ tương phản
Tỷ lệ 4,5:1 là mức tối thiểu WCAG AA cho văn bản thông thường và 3:1 cho văn bản lớn; 7:1 đáp ứng mức AAA.
Cách sử dụng
- Chọn kiểu phối màu và số lượng màu.
- Nhấn nút tạo hoặc phím cách cho đến khi bạn ưng ý; khóa các màu muốn giữ lại.
- Sao chép bảng màu dưới dạng mã hoặc tải xuống dưới dạng PNG.
Quyền riêng tư và giới hạn
Mọi thứ được tạo trong trình duyệt của bạn.
Công cụ liên quan
Câu hỏi thường gặp
Làm cách nào để giữ lại một màu tôi thích?
Nhấp vào nút khóa trên màu đó. Các màu đã khóa sẽ được giữ nguyên; màu đầu tiên cũng xác định sắc độ cơ sở để tạo các màu còn lại.
Tôi có thể sử dụng màu thương hiệu của mình không?
Có. Nhấp vào một ô màu để đặt màu bất kỳ, khóa màu đó rồi tạo các màu còn lại dựa trên màu này.
Văn bản trên bảng màu có dễ đọc không?
Mỗi ô màu hiển thị tỷ lệ tương phản với màu trắng. WCAG yêu cầu tỷ lệ tối thiểu 4,5:1 cho văn bản thông thường, vì vậy màu có tỷ lệ thấp hơn mức này cần dùng văn bản tối.
Công cụ miễn phí · trong trình duyệt của bạn lượt chạy · không cần tài khoản