Studio Warna
Palet, gradien, roda warna, dan semua cara menemukan warna sempurna.
Generator Palet AI
Deskripsikan suasana dan dapatkan palet yang cocok — didukung jaringan saraf sungguhan yang berjalan sepenuhnya di browser Anda. Tanpa server, tanpa menunggu, data tidak meninggalkan perangkat.
AI · NeuralPanduan Gaya AI
Deskripsikan merek Anda dan dapatkan sistem desain lengkap — palet, pasangan font, skala tipografi, spasi, radius, dan bayangan — dicocokkan jaringan saraf dan dirakit menjadi satu blok CSS siap salin.
AI · Sistem DesainKonverter Warna
Konversi antara HEX, RGB, HSL, CMYK, dan OKLCH dengan konversi dua arah instan.
Konverter · Semua formatHarmoni Warna
Buat palet komplementer, triadik, analog, dan komplementer terpisah dari warna dasar apa pun. Klik swatch mana pun untuk menyalin kode hex-nya.
Warna · TeoriPenamaan Warna AI
Masukkan warna hex apa pun dan temukan nama terdekatnya — warna standar CSS, warna tradisional Tiongkok, wagairo Jepang, dan 12 budaya lainnya. Ilmu warna perseptual menemukan kecocokan sejati, dan model AI menyarankan tema palet terkait.
AI · Ilmu WarnaRoda Warna
Roda warna interaktif untuk mengeksplorasi rona, saturasi, dan hubungan warna. Klik untuk memilih dan mengunci warna.
Interaktif · VisualPembuat Gradien
Rancang gradien linier dan radial yang indah dengan pratinjau Canvas real-time. Salin kode CSS secara instan.
Gradien · Ekspor CSSPraset gradien
Jelajahi dan salin 15 praset gradien yang indah.
Praset · Satu klikPalet dari Gambar
Ekstrak palet warna yang indah dari gambar apa pun menggunakan kuantisasi warna cerdas.
Ekstraksi · CerdasPembuat Palet Warna
Ciptakan skema warna yang harmonis dengan mode monokromatik, komplementer, analog, dan triadik. Pratinjau waktu nyata dengan ekspor CSS.
Warna · InteraktifGenerator Tint & Shade
Buat skala tint dan shade lengkap dari warna apa pun — 20 langkah dengan ekspor HEX dan SCSS.
tint shade, skala warnaEfek dan Kedalaman
Bayangan, kaca, dan radius — detail halus yang membuat UI terasa nyata.
Pembuat Blob
Buat bentuk organik halus untuk latar, avatar, dan pemisah bagian. Acak dengan satu klik, sesuaikan kelengkungan, dan salin kode border-radius atau SVG.
CSS · OrganikPembuat Sudut Bulat
Editor radius batas visual dengan pratinjau waktu nyata. Salin kode CSS dengan kontrol sudut individual.
CSS · Penyunting visualPembuat Bayangan
Pembuat bayangan kotak interaktif dengan pratinjau Canvas real-time multi-lapisan, dan keluaran CSS.
CSS · BerlapisGenerator Tombol CSS
Desain tombol cantik dalam hitungan detik — 6 gaya, warna kustom, radius dan padding, CSS siap salin.
generator tombol, tombol CSS, desain tombolGenerator Filter CSS
Buat efek visual dengan CSS filter() — blur, kecerahan, kontras, rotasi hue, sepia, dan lainnya. Pratinjau langsung pada gambar sampel, salin seluruh rantai filter secara instan.
CSS · Efek GambarGenerator Glassmorphism
Buat kartu kaca buram dengan blur latar, transparansi, dan border halus. Pratinjau real-time dan CSS siap salin.
UI · Kaca buramGenerator Teks Gradien
Buat teks menonjol dengan isian gradien dan animasi — atur sudut dan warna, salin CSS langsung.
teks gradienGenerator Bayangan Teks
Desain bayangan teks berlapis dengan pratinjau real-time. Sesuaikan offset, blur, warna, dan opasitas — salin CSS secara instan.
CSS · TipografiPerangkat Praktis
Pemeriksaan, konversi, dan sistem yang menjaga desain Anda tetap aksesibel dan konsisten.
Cuplikan CSS AI
Deskripsikan efek yang Anda inginkan — tombol menyala, spinner loading, kartu kaca — dan jaringan saraf menemukan cuplikan CSS yang cocok. Lihat render langsung, salin kode siap pakai.
AI · Pustaka KodeSimulator buta warna
Mensimulasikan bagaimana warna tampak bagi pengguna buta warna.
Aksesibilitas · SimulasiPemeriksa Kontras
Verifikasi kepatuhan WCAG AA/AAA untuk teks dan warna latar belakang. Dapatkan peringkat aksesibilitas instan.
Aksesibilitas · AA/AAAGenerator Cubic Bezier
Desain kurva easing CSS kustom dengan pratinjau langsung dan animasi. Seret titik kontrol, pilih dari preset, dan salin fungsi cubic-bezier() secara instan.
CSS · GerakKonverter PX ke REM
Konversi piksel ke REM dan sebaliknya secara instan, dengan ukuran font dasar yang dapat disesuaikan dan tabel konversi lengkap. Penting untuk CSS yang aksesibel dan skalabel.
CSS · SatuanGenerator CSS Transform
Visualisasikan dan hasilkan CSS transform — rotate, scale, translate, dan skew dengan pratinjau interaktif langsung. Salin properti transform lengkap secara instan.
CSS · AnimasiSistem Warna UI
Hasilkan palet token desain lengkap dari satu warna benih. Ekspor ke Tailwind, CSS, atau SCSS.
Token desain · TailwindTata Letak dan Grid
Grid dan proporsi — tulang punggung struktural setiap antarmuka.
Kalkulator Rasio Aspek
Hitung dan skala rasio aspek apa pun — 16:9, 4:3, 1:1, 9:16, dan kustom. Ubah dimensi dengan mempertahankan proporsi, lengkap dengan preset resolusi umum.
Utilitas · RasioPembuat CSS Grid
Buat tata letak CSS Grid secara visual dengan pratinjau waktu nyata.
CSS·Editor visualKalkulator Rasio Emas
Hitung dimensi rasio emas (1:1.618) untuk tata letak, tipografi, dan logo. Dapatkan nilai emas lebih besar dan lebih kecil secara instan, dengan pratinjau visual.
Tata Letak · ProporsiGenerator Gelombang SVG
Buat pembatas gelombang SVG halus untuk situs web — atur amplitudo, panjang gelombang dan lapisan, salin SVG.
gelombang SVG, pembatas gelombangAtelier Tipografi
Pasangan font dan skala — suara desain Anda.
Paduan Font AI
Deskripsikan proyek Anda dan dapatkan pasangan Google Fonts profesional yang dicocokkan jaringan saraf sungguhan di browser Anda. Lihat render langsung, salin CSS siap pakai.
AI · FontKalkulator Clamp
Buat tipografi fluid dengan CSS clamp(). Atur ukuran minimum, preferensi, dan maksimum — dapatkan rumus clamp() sempurna dan pratinjau skala visual.
CSS · Tipe FluidPasangan Font
Temukan pasangan font yang harmonis untuk judul dan teks isi dari koleksi yang dikurasi.
Tipografi · 300+ fontGenerator Skala Tipografi
Buat skala tipografi modular yang harmonis dengan rasio emas, major third, dan rasio klasik lainnya. Pratinjau ukuran secara visual dan salin CSS lengkap.
Tipografi · Skala14 Bahasa
Setiap alat, setiap label, setiap panduan — diterjemahkan sepenuhnya.
Aksesibilitas Pertama
Setiap palet menyertakan skor kontras WCAG. Desain secara inklusif sejak awal.
Ekspor Ramah Pengembang
CSS, Tailwind, SCSS, JSON — salin format yang dibutuhkan proyek Anda.