Cara Praktis Memilih Gradient untuk Website

Ada kalanya ketika kita sedang membuat desain website kita merasa kebingungan dalam hal pemilihan warna, baik itu untuk background, komponen button dan lain-lain. Mungkin biasanya kita memulai dari hal yang lebih umum yaitu memilih tema / skema warna website kita, entah itu bernuansa dark, light, atau malah colorful. Dalam proses pemilihan warna tersebut, salah satu pemilihan warna yang dapat kita terapkan untuk mempercantik tampilan website kita adalah dengan menerapkan Gradient atau gradasi warna.

Gradient atau gradasi warna merupakan pola warna yang bisa dikembangkan dari dua atau lebih warna, sehingga membuat tingkatan warna tertentu dengan tidak merusak dan mengubah warna itu sendiri. Akan tetapi membuat kombinasi warna pada gradient-pun seringkali membingungkan. Bukannya mempercantik, kombinasi warna yang tidak tepat malah dapat membuat kesan kumuh ataupun norak. But behold ladies and gentlemen! as always! Hal berikut ini adalah salah satu langkah untuk membuat gradient sederhana dan tetap menarik.

Buat bentuk apapun terserah anda untuk simulasi pewarnaan gradient. Disini saya memakai aplikasi Adobe XD yang biasa dipakai untuk prototyping desain untuk website ataupun mobile app. Anda juga bisa mencoba simulasi ini pada software lain seperti Photoshop, Illustrator, CorelDraw dan lain-lain.

Saya uncheck border untuk menghilangkan border dan ganti fill solid dengan linear gradient. Sekarang warna pada bentuk yang kita buat tadi menjadi gradient putih ke abu secara default.

Pada kedua ujung warna gradient pilih warna yang sama, sebagai patokan warna dasar untuk gradient yang kita kehendaki sesuai selera. Disini saya pilih warna yang agak kebiruan.

Pada mode Hex, ganti mode pemilihan warna dengan HSB. Kemudian akan ada 3 parameter secara berurutan yaitu H (Hue), S (Saturation) dan B (Brightness). Disinilah kita mulai eksperimen secara sederhana. Pilih salah satu ujung warna pada gradient tersebut, kemudian cobalah naikkan ataupun turunkan H (Hue) sebanyak sekitar 10 sampai 25. Dengan mengubah nilai H (Hue) tersebut, gradient yang warna yang dihasilkan akan tetap natural dan halus. Sudah terlihat bedanya? 😊

Anda juga dapat bereksperimen dengan menaikkan atau menurunkan nilai B (Brightness) sebanyak sekitar 5 sampai 15. Dengan ini dapat mempertegas ataupun memperhalus warna gradient yang dihasilkan.

Kemiringan gradient juga dapat kita coba eksperimen untuk menghasilkan gradient yang keren. Biasanya saya akan miringkan 20–45 degree sudah cukup.

Demikian cara singkat untuk menghasilkan paduan warna gradient yang sederhana tapi keren dan enak dilihat. Anda juga bisa bereksperimen dengan warna dasar yang lain sesuai selera. Dibawah ini contoh eksperimen warna dasar lain yang dibuat gradient dengan metode yang sama. 😊

Thanks for reading, keep experimenting!

Related posts:

Protocon signed a strategic partnership with Regtank, a Singapore-based one-stop Software-as-a-service compliance solution provider. Our partnership is based on the exchange of values and common…

If you have installed lower MySQL version I recommend remove it and made a clean installation of MySQL 8. Always backup your databases. I know one guy who hoped that everything will be fine. It…

You are the admin over a large amount of EC2 instances. You need to ensure that you have EBS Snapshots available for disaster recovery. To save time you want to automate this practice along with…