Công cụ thiết kế cho website
Lấy bảng màu, kiểm tra tương phản, tạo CSS gradient, shadow, favicon và icon ứng dụng.
Các công cụ bạn có thể dùng
Lấy bảng màu từ ảnh
Lấy các màu phổ biến trong ảnh bằng lượng tử hóa RGB và hiển thị mã HEX.
Đổi màu HEX, RGB và HSL
Nhập màu HEX, RGB hoặc HSL để xem giá trị tương đương và mẫu màu.
Kiểm tra độ tương phản màu chữ và nền
Tính tỉ lệ tương phản WCAG và ngưỡng AA, AAA cho chữ thường và chữ lớn.
Tạo CSS gradient hai màu
Chọn hai màu và góc để xem gradient tuyến tính và sao chép CSS.
Tạo CSS box-shadow
Điều chỉnh độ lệch, độ nhòe, độ lan và màu để xem bóng đổ và lấy CSS.
Tạo CSS bo góc
Chọn bán kính bốn góc riêng để xem hình dạng hộp và sao chép border-radius.
Tạo thang kích thước chữ
Tính thang chữ từ cỡ nền và tỉ lệ, xuất biến CSS để dùng nhất quán.
Tạo CSS clamp cho kích thước linh hoạt
Tính biểu thức clamp() từ cỡ nhỏ/lớn và hai chiều rộng màn hình.
Làm sạch và tối ưu SVG
Giữ các thành phần hình học SVG an toàn, bỏ script, liên kết và tài nguyên ngoài rồi tối ưu mã.
Tạo favicon ICO và PNG
Tạo bộ favicon 16, 32 và 48 pixel cùng tệp ICO từ ảnh vuông hoặc ảnh có nền đệm.
Tạo bộ icon ứng dụng web
Xuất PNG 192, 512, Apple touch 180 và mẫu web manifest trong một ZIP.
Tạo CSS clip-path polygon
Nhập các điểm phần trăm để xem hình cắt đa giác và lấy CSS.
Chọn công cụ phù hợp
Xem trước màu sắc và hình dạng trước khi tải mã. Kiểm tra thiết kế trong bố cục thật, trên nền sáng và tối; icon đầu ra được tạo từ ảnh của bạn.
Khám phá tất cả công cụ