Cara Praktis Memilih Gradient untuk Website

Erwin Nurhaq
purwadhikaconnect
Published in
3 min readJan 22, 2020

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.

Contoh Gradient dari webgradient.com

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 dasar

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.

Bentuk Lingkaran

Ganti mode warna ke linear gradient

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.

Uncheck Border dan Apply Mode Gradient

Pilih warna yang sama pada kedua ujung gradient

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.

Warna Hex #7EBAFF Pada Kedua Ujung

Ganti mode pemilihan warna dengan HSB

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? 😊

Ganti Mode Hex ke HSB
Contoh Ketika Nilai H (Hue) DInaikkan
Contoh Ketika Nilai H (Hue) Diturunkan

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.

Contoh Ketika Nilai B (Brightness) Diturunkan

Arah kemiringan gradient

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

Contoh Kemiringan Gradient 45 Derajat

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. 😊

Contoh Gradient dari Warna Dasar Lain

Thanks for reading, keep experimenting!

--

--

Erwin Nurhaq
purwadhikaconnect

A random human, architecture graduate and IT enthusiast.