Generator Warna Tint & Shade Pilih warna hex atau RGB dan segera dapatkan 10 tint (warna Anda dicampur dengan putih) dan 10 shade (dicampur dengan hitam) sebagai sampel visual. Klik salah satu sampel untuk menyalin kode hex-nya, atau ekspor seluruh set sebagai properti CSS, variabel SCSS, JSON, atau daftar hex sederhana...
Coba Alat »Generator Skala Warna Tailwind CSS Tempel satu warna hex dan segera dapatkan skala penuh berdasarkan Tailwind dengan langkah yang merata secara persepsi. Skala ini dibangun dalam ruang warna OKLCH, sehingga setiap tahap terasa seperti peningkatan kecerahan yang merata bagi mata manusia — bukan hanya penurunan linear pada RGB atau HSL. ...
Coba Alat »Kanvas Seni Pixel & Ekspor CSS Impor sprite ber gaya 8-bit yang tajam secara langsung di browser Anda dan ekspor sebagai seni CSS box-shadow, SVG yang dapat diperbesar, PNG raster, atau JSON portabel. Kanvas ini dapat diatur dari ukuran 8×8 hingga 64×64, dilengkapi dengan palet klasik (NES, Game Boy, PICO-8, CGA, Commodore 64, Sweetie 16), serta memberikan fitur menggambar, penghapus, ...
Coba Alat »Pengvisualisasi & Editor Path SVG Tempel atribut path apa saja dari SVG dan lihat hasilnya secara langsung. Alat ini memecah setiap perintah menjadi parameter dan titik akhir absolut, menggambar tangan kontrol Bezier di atas tampilan pratinjau, dan menulis ulang path antara koordinat absolut dan relatif dengan presisi yang dapat dikonfigurasi. Alat ini dibangun khusus untuk penulis SVG ...
Coba Alat »Generator CSS Flexbox (Visual) Desain tata letak Flexbox secara visual dan salin CSS siap digunakan. Sesuaikan arah, penyesuaian, penggabungan, jarak, dan peraturan per-item sambil pratinjau langsung diperbarui secara instan. Tidak perlu menebak, tidak perlu pergi ke Chrome DevTools — cukup pilih perilaku container yang dibutuhkan, lihat hasilnya, dan ambil aturan yang dihasilkan. Cara Penggunaan Pilih arah flex (baris, ...
Coba Alat »Penghasil Logo README Generator Penghasil Logo README Generator membuat badge berukuran piksel-ke-piksel seperti Shields.io secara langsung di browser Anda. Pilih preset atau buat label dan pesan Anda sendiri, pilih warna dan gaya (flat, flat-square, for-the-badge, atau plastic), serta dapatkan output Markdown, HTML, SVG, dan URL data yang siap digunakan. Tidak ada panggilan API eksternal, tidak ada ketergantungan jaringan, tidak ada badge yang rusak...
Coba Alat »Generator Animasi Keyframe CSS Buat animasi @keyframes CSS secara visual dengan pratinjau langsung. Pilih dari 10 preset populer seperti bounce, shake, pulse, fade in, slide in, spin, swing, rubber band, flash, dan wobble — atau buat animasi keyframe kustom dari awal. Sesuaikan waktu, easing, jumlah iterasi, arah, dan mode pengisian, lalu salin ...
Coba Alat »Kalkulator Khususitas CSS Kalkulator Khususitas CSS membantu Anda menentukan skor khususitas tepat dari setiap pilihan CSS. Memahami khususitas sangat penting untuk memperbaiki konflik CSS dan menulis stylesheet yang dapat dipelihara. Masukkan satu atau lebih pilihan CSS dan segera lihat skor (a,b,c) mereka dibandingkan secara bersamaan. Cara Penggunaan Masukkan satu pilihan CSS per baris di ...
Coba Alat »Generator Filter CSS Generator Filter CSS memungkinkan Anda membuat efek filter CSS secara visual dengan pratinjau gambar langsung. Sesuaikan properti filter individual menggunakan penggeser intuitif dan lihat hasilnya secara instan — tanpa tebak-tebak. Setelah Anda puas dengan tampilannya, salin kode CSS yang dihasilkan dan tempelkan langsung ke stylesheet Anda. Cara Penggunaan ...
Coba Alat »Simulator & Pencatat Buta Warna Lihat bagaimana gambar dan palet warna Anda terlihat oleh orang-orang dengan defisiensi penglihatan warna. Simulasikan 8 jenis CVD dan uji desain Anda untuk kepatuhan kontras WCAG untuk memastikan aksesibilitas bagi semua pengguna. Cara Menggunakan Unggah gambar atau masukkan nilai warna untuk disimulasikan. Pilih defisiensi penglihatan warna ...
Coba Alat »Generator CSS Clip-Path Buat bentuk clip-path CSS secara visual dengan editor drag-and-drop yang intuitif. Buat poligon, lingkaran, elips, dan bentuk inset, lalu salin CSS yang dihasilkan langsung ke stylesheet Anda. Cara Menggunakan Pilih jenis bentuk atau mulai dari templat preset. Seret titik kontrol untuk menyesuaikan bentuk secara visual pada kanvas pratinjau. ...
Coba Alat »Ekstraktor Palet Warna Unggah gambar apa pun dan segera ekstrak palet warna dominannya. Menggunakan kuantisasi median cut untuk mengidentifikasi warna yang paling menonjol, memberi Anda nilai HEX, RGB, dan HSL yang akurat dengan persentase penggunaan. Cara Menggunakan Unggah gambar dengan menyeret dan melepaskan atau mengklik area unggah. Alat ini secara otomatis menganalisis gambar ...
Coba Alat »Konverter Warna HEX ke Nama Warna Konversi kode warna HEX apa pun ke nama warna CSS/HTML terdekat secara instan. Masukkan nilai heksadesimal atau gunakan pemilih warna visual untuk menemukan nama warna yang paling cocok dari 140 nama warna CSS3 standar, lengkap dengan skor kesamaan dan perbandingan swatch berdampingan. Cara Menggunakan Masukkan ...
Coba Alat »Kalkulator Jarak Warna Hitung perbedaan perseptual antara dua warna menggunakan formula deltaE CIE standar industri. Masukkan warna melalui kode HEX atau pemilih warna dan segera lihat seberapa berbeda warnanya tampak di mata manusia, dengan hasil dari tiga algoritma deltaE dan interpretasi bahasa awam. Cara Menggunakan Masukkan dua warna menggunakan kode HEX atau ...
Coba Alat »Konverter HSV ke RGB Konversi antara ruang warna HSV (Hue, Saturation, Value) dan RGB secara instan dengan pratinjau visual langsung. Sesuaikan hue, saturation, dan value menggunakan penggeser intuitif dan lihat nilai RGB dan HEX yang sesuai diperbarui secara real time. Cara Menggunakan Sesuaikan penggeser HSV — Hue (0-360°), Saturation (0-100%), dan Value (0-100%) — ...
Coba Alat »Konverter LAB ke RGB Konversi nilai warna CIE L*a*b* ke format RGB dan HEX dengan akurasi ilmiah. Alat ini melakukan pipeline transformasi LAB ke XYZ ke RGB penuh menggunakan iluminan standar D65 dan koreksi gamma sRGB yang tepat, dengan pratinjau warna visual dan deteksi di luar gam. Cara Menggunakan Masukkan nilai LAB Anda — L ...
Coba Alat »Desain Pembuat Bayangan Kotak CSS Buat bayangan kotak yang indah secara visual dengan pratinjau langsung. Tambahkan beberapa lapisan bayangan, sesuaikan offset, blur, spread, dan warna, lalu salin CSS — tanpa perlu pengkodean manual. Cara Menggunakan Sesuaikan penggeser untuk offset horizontal dan vertikal, radius blur, spread, dan opacity. Alihkan inset untuk bayangan dalam. Tambahkan...
Coba Alat »Konverter RGB ke CMYK Konversi warna antara ruang warna RGB (layar) dan CMYK (cetak) secara instan. Penting bagi desainer yang menyiapkan file untuk produksi cetak yang memerlukan terjemahan ruang warna yang akurat. Cara Menggunakan Masukkan warna Anda menggunakan nilai RGB (0-255), kode hex, atau pemilih warna. Alat ini secara instan mengonversi ke persentase CMYK. Beralih ke CMYK→RGB ...
Coba Alat »Generator CSS Border Radius Rancang sudut membulat untuk elemen CSS Anda secara visual. Sesuaikan setiap sudut secara independen, gunakan radius elips, pilih dari preset, dan salin kode CSS — semuanya dengan pratinjau langsung. Cara Menggunakan Pilih mode sederhana untuk mengatur semua sudut sekaligus, atau beralih ke mode lanjutan untuk kontrol sudut individual. Aktifkan ...
Coba Alat »Pemeriksa Kontras WCAG Periksa rasio kontras warna untuk kepatuhan aksesibilitas web. Verifikasi kombinasi warna teks dan latar belakang Anda memenuhi standar WCAG AA dan AAA untuk memastikan konten Anda dapat dibaca oleh semua pengguna, termasuk mereka yang memiliki gangguan penglihatan. Cara Menggunakan Masukkan warna latar depan (teks) dan warna latar belakang menggunakan pemilih warna atau ...
Coba Alat »Tambahkan alat IO ke browser favorit Anda untuk akses instan dan pencarian lebih cepat
Papan Skor adalah cara yang menyenangkan untuk melacak permainan Anda, semua data disimpan di browser Anda. Lebih banyak fitur akan segera hadir!
Memperbarui: Kita alat terbaru was added on Mei 8, 2026
Bantu kami untuk terus menyediakan alat gratis yang berharga
