Gradien Acak

Geometri Dua Warna

Gradien linier CSS didefinisikan oleh tiga elemen: sudut arah, warna awal, dan warna akhir. Browser menghitung setiap nuansa perantara sepanjang sumbu sudut menggunakan interpolasi linier dalam ruang warna sRGB. Nol derajat mengarah ke atas, 90 derajat mengarah ke kanan, dan 180 derajat mengarah ke bawah. Setiap sudut antara 0 dan 359 adalah valid. Alat ini memilih ketiga nilai secara independen dari Web Cryptography API, menghasilkan 16,7 juta × 16,7 juta × 360 ≈ 100 kuadriliun gradien yang berbeda.

Mengapa Gradien Acak Mengejutkan

Josef Albers, maestro Bauhaus yang menghabiskan puluhan tahun mempelajari interaksi warna, mendemonstrasikan bahwa warna yang sama terlihat sangat berbeda tergantung pada tetangganya. Oranye hangat yang ditempatkan di samping biru tua tampak bersinar. Ditempatkan di samping merah, ia mundur. Pembuatan gradien acak menghasilkan kombinasi yang mungkin tidak pernah dicoba oleh desainer yang disengaja, dan beberapa pasangan tak terduga ini mengungkap keindahan yang menakjubkan. Gradien komplementer di bawah ini muncul dari sisi berlawanan roda warna, menciptakan energi visual maksimum melalui kontras rona saja.

Kombinasi analogus, di mana kedua warna memiliki wilayah rona yang serupa, menghasilkan gradien yang lebih lembut dan atmosferis. Ini muncul sekitar 25% dari waktu dalam pembuatan yang sepenuhnya acak.

Spektrum Harmoni

Panel statistik memberi label setiap gradien berdasarkan hubungan warnanya. Monokrom memiliki perbedaan kurang dari 15 derajat pada roda warna, menghasilkan pergeseran tonal yang halus. Pasangan Analogus (15 hingga 45 derajat) berbagi lingkungan warna. Gradien Kontras mencakup 90 hingga 150 derajat. Pasangan Komplementer berada di sisi berlawanan roda warna (150 hingga 180 derajat), menciptakan ketegangan visual terkuat. Label diperbarui setiap kali pembuatan, mengubah setiap klik menjadi pelajaran mikro teori warna.

CSS Praktis

Gradien yang dihasilkan dapat langsung disalin sebagai nilai CSS linear-gradient(). Gunakan sebagai properti background pada elemen apa pun. Lapisi di belakang teks dengan background-clip: text untuk tipografi gradien. Tumpangi pada gambar dengan varian semi-transparan. Terapkan pada tombol, kartu, bagian hero, atau layar pemuatan. Sudut dan warna adalah spesifikasi lengkap: tempel, sesuaikan opasitas jika perlu, kirim.

Privat Secara Arsitektur

Kedua warna dan sudut berasal dari Web Cryptography API browser Anda. Server mengirimkan halaman ini dan selesai. Gradien yang Anda hasilkan, riwayat Anda, dan jumlah pembuatan Anda tetap di browser Anda. Server tidak menyimpan apa pun. Membagikan URL berarti membagikan alat, bukan hasil yang dihasilkan. Setiap browser pengunjung menghasilkan hasil yang sepenuhnya independen.

Inspirasi Gradien dari Dunia Nyata

Pembuatan acak mengungkap kombinasi tak terduga, tetapi proyek dunia nyata menunjukkan bagaimana hubungan warna benar-benar bekerja dalam praktik. Sementara alat ini menghasilkan gradien CSS baru dari dua warna independen dan sudut acak, Color Discovery mengeksplorasi palet yang diambil dari karya kreatif yang telah selesai di bidang arsitektur, desain produk, kemasan, dan interior. Palet-palet ini mendemonstrasikan bagaimana rona berinteraksi dalam material nyata, kondisi pencahayaan, dan konteks visual. Jika gradien yang dihasilkan secara acak memicu ide, menjelajahi palet dunia nyata dapat membantu menyempurnakannya menjadi kombinasi yang terbukti dalam desain profesional. Baik Anda membangun latar belakang UI, memilih finishing material, atau mencari atmosfer kromatik yang tepat, temukan lebih lanjut di Color Discovery.