Generator skema warna

Cara menggunakan

1. Skema dan tangga kecerahan sudah tampil saat halaman dibuka, dibangun dari warna dasar bawaan #4F46E5 — hasil pertama tidak perlu diklik.
2. Jadikan warna Anda: tempel #4F46E5, rgb(79, 70, 229), hsl(243, 75%, 59%), atau nama warna CSS bahasa Inggris, gunakan pemilih sistem, atau tekan “Dasar acak”. Semuanya dihitung ulang saat Anda mengetik.
3. Pilih bagaimana hue-nya berhubungan. Analog (0°, ±30°, ±60°) tetap di sekitaran; Komplementer (0°, 180°) adalah lawan langsung; Triadik (0°, 120°, 240°) dan Tetradik (0°, 90°, 180°, 270°) melebarkan sebaran; Komplementer terbelah (0°, 150°, 210°) menjaga ketegangan tanpa benturan. Tangga selalu warna dasar pada kecerahan 88 / 70 / 52 / 34 / 18%, jadi “versi lebih terang/gelap dari warna utama saya” hanya berjarak satu ketukan.
4. Ketuk swatch mana pun untuk menyalin nilainya dalam format terpilih; “Salin CSS” memberi seluruh set sebagai properti kustom :root, “Salin nilai” memberi satu nilai per baris.

Cakupan, batasan, dan pertanyaan umum

• Lima aturan, tanpa sudut kustom dan tanpa roda warna: bila butuh hue yang persis, atur warna dasarnya atau gunakan konverter warna.
• Tangga memakai langkah kecerahan tetap (88 / 70 / 52 / 34 / 18%), bukan “25% lebih dekat ke putih/hitam dari warna Anda”. Itu membuat tangga dapat dibandingkan antar warna dasar, tetapi warna dasar yang sudah sangat terang atau sangat gelap akan mendapat langkah yang hampir tidak berbeda darinya.
• Warna dasar abu-abu, putih, atau hitam menghasilkan skema yang semuanya identik: rotasi hue pada warna yang sepenuhnya desaturasi tidak mengubah apa pun. Itu aritmetika yang jujur, bukan bug.
• Hanya warna opak: tanpa alpha, tanpa rgba(), tanpa HEX 8 digit. Transparansi adalah urusan konverter warna.
• Hanya nilai layar sRGB: tanpa CMYK, tanpa Lab, tanpa manajemen warna — HEX yang sama memang tampak berbeda di layar yang tidak terkalibrasi, dan alat ini tidak berpura-pura sebaliknya.
• Kontras hanya dipakai untuk memutuskan apakah nilai yang tercetak pada swatch berwarna hitam atau putih. Rasio kontras tidak dilaporkan; untuk pemeriksaan aksesibilitas gunakan konverter warna.
• Geometri menjamin hubungan hue, bukan estetika: pasangan komplementer dengan saturasi tinggi tetap bisa terasa mencolok. Itulah makna aturannya.
• “Dasar acak” mengambil dari crypto.getRandomValues peramban Anda — kuat secara kriptografis, bukan layanan entropi fisik — dan dinonaktifkan bila peramban tidak menyediakan sumber tersebut. Sisanya tetap berfungsi.
• Tidak ada yang diunggah, disimpan, atau dimasukkan ke URL: memuat ulang kembali ke #4F46E5 + Analog + HEX, dan tombol bagikan hanya membagikan tautan halaman. Bawa skema Anda keluar dengan “Salin CSS”.
• Nama warna CSS bahasa Inggris diterima sebagai masukan karena itulah sintaks CSS; tidak ada keluaran nama warna yang dilokalkan — warna yang sama tidak punya nama baku dalam bahasa Indonesia atau Arab untuk dicetak.
• Pembulatan hanya pada tampilan: kanal berupa bilangan bulat, jadi mengonversi warna yang sama antara HEX dan HSL dapat menggeser satu kanal sebesar 1.