Skip to main content
Penguin ToolsAlat Penguin
๐ŸŽจ

Alat Alat Desain

Generator CSS, alat warna, dan pembuatan SVG

26 alat
๐ŸŽจ

Konverter Kode Warna

Konversi antara kode warna HEX, RGB, dan HSL. Gunakan pemilih warna dan pratinjau waktu nyata untuk pemilihan warna yang intuitif.

๐ŸŽจ

Pemilih Warna

Pilih warna secara intuitif menggunakan roda warna dan slider. Dapatkan dan salin kode warna dalam format HEX, RGB, dan HSL.

๐ŸŽจ

Ekstraktor Warna Gambar

Deteksi warna dominan dari gambar secara otomatis dan hasilkan palet warna. Anda juga dapat mengklik di mana saja pada gambar untuk mengambil warna individual.

๐ŸŽฏ

Pengambil Warna Rata-rata Gambar

Hitung warna rata-rata dari seluruh gambar atau area yang dipilih. Berguna untuk memilih skema warna atau warna latar belakang thumbnail.

๐ŸŒˆ

Generator CSS Gradien

Buat gradien CSS secara visual dengan kontrol seret. Mendukung tipe gradien linear, radial, dan conic dengan preset.

๐Ÿ”ฒ

Generator CSS Box Shadow

Buat CSS box-shadow secara visual dengan slider. Mendukung beberapa bayangan dan bayangan inset.

โฌœ

Generator CSS Border Radius

Buat CSS border-radius dengan kontrol sudut individual. Termasuk opsi radius elips dan preset bentuk populer.

โœจ

Generator CSS Text Shadow

Buat CSS text-shadow dengan pratinjau langsung. Tumpuk beberapa bayangan dengan preset neon, emboss, dan lainnya.

๐Ÿ”บ

Generator CSS Segitiga

Buat segitiga CSS menggunakan properti border. Mendukung semua 8 arah dengan ukuran dan warna yang dapat disesuaikan.

โœ‚๏ธ

Generator CSS Clip Path

Buat bentuk CSS clip-path secara visual dengan seret dan lepas. Termasuk poligon, lingkaran, elips, dan preset seperti bintang dan hati.

๐ŸชŸ

Generator CSS Glassmorphism

Buat efek UI kaca buram dengan pratinjau langsung dan output CSS. Sesuaikan transparansi, blur, border, dan pengaturan bayangan.

โณ

Generator CSS Loader

Pilih dari berbagai animasi loading CSS dan dapatkan kodenya. Kustomisasi warna, ukuran, dan kecepatan untuk spinner, titik, bar, dan lainnya.

๐Ÿ“

Generator CSS Flexbox

Buat tata letak Flexbox secara visual dan hasilkan kode CSS. Sesuaikan semua properti dengan lembar contekan bawaan.

๐Ÿ“ˆ

Generator CSS Cubic Bezier

Buat kurva easing animasi CSS secara visual. Seret handle dan pratinjau animasi secara real-time.

๐ŸŽจ

Generator Variasi Warna

Buat variasi warna dari terang ke gelap untuk warna apa pun. Atur jumlah langkah dan ekspor sebagai palet Tailwind CSS.

๐ŸŽจ

Pencampur Warna

Campurkan dua warna atau lebih dengan rasio tertentu untuk membuat warna baru. Bandingkan hasil dalam berbagai ruang warna seperti RGB, HSL, dan LAB.

๐ŸŽจ

Generator Palet Warna

Buat palet warna dari warna dasar menggunakan teori warna. Termasuk skema warna komplementer, analog, triadik, dan lainnya.

๐Ÿ”ค

Pratinjau Font Web

Pratinjau font web dari Google Fonts secara real time. Bandingkan beberapa font sambil menyesuaikan ukuran dan warna.

๐ŸŽจ

Referensi Nama Warna HTML

Telusuri semua 148 nama warna HTML/CSS di satu tempat. Cari, pratinjau, dan salin kode HEX dengan mudah.

๐Ÿ”ฒ

Generator Pola Latar Belakang CSS

Hasilkan pola latar belakang menggunakan CSS murni. Sesuaikan garis, titik, kotak-kotak, dan lainnya dengan editor visual.

๐Ÿ“œ

Generator Scrollbar CSS

Sesuaikan desain scrollbar CSS dengan editor visual. Atur warna, lebar, radius sudut, dan salin kodenya langsung.

๐ŸŒˆ

Generator Teks Gradien CSS

Hasilkan kode CSS untuk menerapkan gradien pada teks. Pratinjau warna, arah, dan penyesuaian rentang secara real-time.

โ˜‘๏ธ

Generator Checkbox CSS

Buat checkbox CSS kustom dengan editor visual. Sesuaikan animasi, warna, dan bentuk secara bebas.

๐Ÿ”˜

Generator Toggle Switch CSS

Buat toggle switch CSS kustom dengan editor visual. Sesuaikan ukuran, warna, dan animasi, lalu ekspor kodenya.

๐Ÿซง

Generator Blob SVG

Hasilkan secara otomatis SVG berbentuk blob organik. Sesuaikan keacakan dan kompleksitas untuk dekorasi desain web.

๐Ÿ”ท

Generator Pola SVG

Hasilkan pola tile SVG yang dapat diulang. Sesuaikan jenis pola, warna, dan ukuran, lalu ekspor kodenya.