Studio Màu sắc
Bảng màu, gradient, bánh xe màu và mọi cách để tìm màu hoàn hảo.
Trình tạo bảng màu AI
Mô tả một tâm trạng và nhận bảng màu phù hợp — vận hành bởi mạng nơ-ron thực chạy hoàn toàn trong trình duyệt của bạn. Không máy chủ, không chờ đợi, dữ liệu không rời thiết bị.
AI · Nơ-ronCẩm nang phong cách AI
Mô tả thương hiệu và nhận hệ thống thiết kế hoàn chỉnh — bảng màu, cặp phông, thang typography, khoảng cách, bo góc và đổ bóng — được mạng nơ-ron ghép nối và lắp ráp thành khối CSS sẵn sao chép.
AI · Hệ thống thiết kếChuyển đổi màu sắc
Chuyển đổi giữa HEX, RGB, HSL, CMYK và OKLCH với khả năng chuyển đổi hai chiều tức thì.
Trình chuyển đổi · Tất cả các định dạngPhối màu hài hòa
Tạo bảng màu bổ túc, tam giác, tương đồng và bổ túc phân chia từ bất kỳ màu nền nào. Nhấp vào bất kỳ ô màu nào để sao chép mã hex.
Màu sắc · Lý thuyếtĐặt tên màu AI
Nhập bất kỳ mã màu nào và tìm tên gần nhất — màu chuẩn CSS, màu truyền thống Trung Hoa, wagairo Nhật Bản và 12 nền văn hóa khác. Khoa học màu sắc cảm thụ tìm kết quả khớp thật sự, và mô hình AI gợi ý chủ đề bảng màu liên quan.
AI · Khoa học màu sắcVòng tròn màu sắc
Bánh xe màu tương tác để khám phá màu sắc, độ bão hòa và mối quan hệ màu sắc. Bấm để chọn và khóa màu.
Tương tác · Trực quanTạo gradient
Thiết kế các gradient tuyến tính và xuyên tâm đẹp mắt với bản xem trước Canvas theo thời gian thực. Sao chép mã CSS ngay lập tức.
Độ dốc · Xuất CSSCài đặt trước gradient
Duyệt và sao chép 15 cài đặt trước gradient đẹp.
Cài đặt trước · Một cú nhấp chuộtBảng màu từ ảnh
Trích xuất các bảng màu đẹp từ bất kỳ hình ảnh nào bằng cách sử dụng lượng tử hóa màu thông minh.
Khai thác · Thông minhTạo bảng màu
Tạo cách phối màu hài hòa với các chế độ đơn sắc, bổ sung, tương tự và bộ ba. Xem trước thời gian thực với xuất CSS.
Màu sắc · Tương tácTrình tạo sắc độ đậm nhạt
Tạo dải sắc độ đậm nhạt đầy đủ từ bất kỳ màu nào — 20 cấp độ với xuất HEX và SCSS.
tint và shade, thang màuHiệu ứng và Chiều sâu
Bóng đổ, kính và bo góc — những chi tiết tinh tế làm UI trở nên chân thực.
Trình tạo Blob
Tạo hình dạng hữu cơ mượt mà cho nền, ảnh đại diện và dải phân cách. Ngẫu nhiên hóa bằng một cú nhấp, tinh chỉnh độ cong và sao chép mã border-radius hoặc SVG.
CSS · Hữu cơTạo góc bo tròn
Trình chỉnh sửa bán kính đường viền trực quan với bản xem trước thời gian thực. Sao chép mã CSS với điều khiển góc riêng lẻ.
CSS · Trình soạn thảo trực quanTạo bóng đổ
Trình tạo bóng hộp tương tác với tính năng xem trước Canvas nhiều lớp, thời gian thực và đầu ra CSS.
CSS · Phân lớpTrình tạo nút CSS
Thiết kế nút đẹp trong vài giây — 6 kiểu, màu tùy chỉnh, bo góc và đệm, CSS sẵn sàng để sao chép.
tạo nút, nút CSS, thiết kế nútTrình tạo bộ lọc CSS
Tạo hiệu ứng hình ảnh với CSS filter() — làm mờ, độ sáng, tương phản, xoay sắc độ, nâu đỏ và hơn thế. Xem trước trực tiếp trên ảnh mẫu, sao chép chuỗi bộ lọc hoàn chỉnh ngay lập tức.
CSS · Hiệu ứng ảnhTrình tạo Glassmorphism
Tạo thẻ kính mờ với hiệu ứng làm mờ nền, độ trong suốt và viền tinh tế. Xem trước thời gian thực và sao chép CSS.
UI · Kính mờTrình tạo chữ gradient
Làm chữ nổi bật với hiệu ứng chuyển màu và hoạt ảnh — chỉnh góc và màu, sao chép CSS ngay.
chữ gradientTrình tạo bóng văn bản
Thiết kế bóng văn bản nhiều lớp với bản xem trước thời gian thực. Điều chỉnh độ lệch, độ mờ, màu sắc và độ trong suốt — sao chép CSS ngay lập tức.
CSS · Kiểu chữBộ công cụ thực dụng
Kiểm tra, chuyển đổi và hệ thống giữ cho thiết kế của bạn dễ tiếp cận và nhất quán.
Đoạn mã CSS AI
Mô tả hiệu ứng bạn muốn — nút phát sáng, vòng xoay tải, thẻ kính — và mạng nơ-ron tìm đoạn CSS phù hợp. Xem kết xuất trực tiếp, sao chép mã sẵn dùng.
AI · Thư viện mãTrình mô phỏng mù màu
Mô phỏng màu sắc xuất hiện như thế nào đối với người dùng mù màu.
Khả năng tiếp cận · Mô phỏngKiểm tra độ tương phản
Xác minh sự tuân thủ WCAG AA/AAA đối với màu văn bản và màu nền. Nhận xếp hạng khả năng tiếp cận ngay lập tức.
Khả năng tiếp cận · AA/AAATrình tạo Cubic Bezier
Thiết kế đường cong easing CSS tùy chỉnh với bản xem trước trực tiếp và hoạt ảnh. Kéo điểm điều khiển, chọn từ cài đặt sẵn và sao chép hàm cubic-bezier() ngay lập tức.
CSS · Chuyển độngBộ chuyển đổi PX sang REM
Chuyển đổi pixel sang REM và ngược lại ngay lập tức, với kích thước phông chữ gốc có thể điều chỉnh và bảng chuyển đổi đầy đủ. Thiết yếu cho CSS dễ tiếp cận và co giãn.
CSS · Đơn vịTrình tạo CSS Transform
Trực quan hóa và tạo CSS transform — xoay, chia tỷ lệ, dịch chuyển và nghiêng với bản xem trước tương tác trực tiếp. Sao chép thuộc tính transform hoàn chỉnh ngay lập tức.
CSS · Hoạt hìnhHệ thống màu UI
Tạo bảng mã thông báo thiết kế hoàn chỉnh từ một màu hạt giống duy nhất. Xuất sang Tailwind, CSS hoặc SCSS.
Mã thông báo thiết kế · TailwindBố cục và Lưới
Lưới và tỷ lệ — xương sống cấu trúc của mọi giao diện.
Máy tính tỷ lệ khung hình
Tính toán và chia tỷ lệ bất kỳ tỷ lệ khung hình nào — 16:9, 4:3, 1:1, 9:16 và tùy chỉnh. Thay đổi kích thước giữ nguyên tỷ lệ, kèm cài đặt sẵn độ phân giải phổ biến.
Tiện ích · Tỷ lệTrình tạo CSS Grid
Tạo bố cục CSS Grid trực quan với xem trước thời gian thực.
CSS·Trình chỉnh sửa trực quanMáy tính tỷ lệ vàng
Tính toán kích thước tỷ lệ vàng (1:1.618) cho bố cục, kiểu chữ và logo. Nhận ngay giá trị vàng lớn hơn và nhỏ hơn, kèm bản xem trước trực quan.
Bố cục · Tỷ lệTrình tạo sóng SVG
Tạo đường phân cách sóng SVG mượt mà cho website — chỉnh biên độ, bước sóng và lớp, sao chép SVG.
sóng SVG, phân cách sóngXưởng chữ
Kết hợp phông chữ và thang tỷ lệ — giọng nói của thiết kế.
Ghép cặp phông chữ AI
Mô tả dự án và nhận các cặp phông Google chuyên nghiệp được ghép bởi mạng nơ-ron thực chạy trong trình duyệt. Xem kết xuất trực tiếp và sao chép CSS sẵn dùng.
AI · Phông chữMáy tính Clamp
Tạo kiểu chữ linh hoạt với CSS clamp(). Đặt kích thước tối thiểu, ưu tiên và tối đa — nhận công thức clamp() hoàn hảo và bản xem trước thang tỷ lệ trực quan.
CSS · Kiểu chữ linh hoạtKết hợp phông chữ
Khám phá các cặp phông chữ hài hòa cho tiêu đề và nội dung văn bản từ các bộ sưu tập được tuyển chọn.
Kiểu chữ · Hơn 300 phông chữTrình tạo thang tỷ lệ chữ
Tạo thang tỷ lệ chữ mô-đun hài hòa với tỷ lệ vàng, quãng ba trưởng và các tỷ lệ cổ điển khác. Xem trước kích thước trực quan và sao chép CSS đầy đủ.
Kiểu chữ · Thang tỷ lệ14 ngôn ngữ
Mọi công cụ, mọi nhãn hiệu, mọi hướng dẫn — được dịch đầy đủ.
Khả năng tiếp cận đầu tiên
Mỗi bảng màu đều bao gồm điểm tương phản WCAG. Thiết kế toàn diện ngay từ đầu.
Xuất khẩu thân thiện với nhà phát triển
CSS, Tailwind, SCSS, JSON — sao chép định dạng mà dự án của bạn cần.