Membuat skema warna HSL untuk desain UI

Pendahuluan

Sebelum masuk ke pembuatan skema warna HSL untuk UI Design, ada baiknya teman-teman membaca terlebih dahulu artikel saya sebelumnya yang membahas mengenai teori warna berikut ini: “Memahami Teori Warna“.

HSL (hue, saturation, lightness) adalah representasi alternatif dari Model Warna RGB (Red, Green, Blue), karena itu mari kita sedikit membahas model warna RGB terlebih dahulu, agar pemahaman kita tidak menyimpang apalagi sampai salah jurusan. 😀

Pemetaan RGB dalam kubus
Pencampuran warna RGB
Roda warna RGB pada Pixel layar

Model Warna RGB

Merah (R), Hijau (G) dan Biru (B) adalah 3 warna utama dalam pencampuran warna Aditif (RGB), yang biasa digunakan untuk pewarnaan pada layar/display, dimana kita menambahkan/add dan mencampurkan/mix 3 warna tersebut dengan berbagai intensitas cahaya untuk menghasilkan warna lainnya pada latar berwarna hitam, ini adalah kebalikan dari warna Subtraktif (CMYK) yang biasa digunakan untuk percetakan khususnya media berlatar belakang warna putih (bisa pula warna lainnya).

HSL: 0,100%,50%

#ff0000

RGB: 255, 0, 0

CMYK: 0, 100, 100, 0

HSL: 120,100%,50%

#00ff00

RGB: 0, 255, 0

CMYK: 100, 0, 100, 0

HSL: 240,100%,50%

#0000ff

RGB: 0, 0, 255

CMYK: 100, 100, 0, 0

Untuk membuat variasi warna HSL, sebenarnya kita tidak wajib memahami angka-angka dan huruf dari semua parameter diatas, karna kita cukup memilih random base color dari visual color picker lalu memodifikasi value “L” atau Lightness nya saja, tapi sebagai pengetahuan rasanya saya sangat ingin sedikit membahasnya.

Karena dalam praktiknya (menggunakan figma) nanti kita akan banyak bermain di angka-angka untuk menghasilkan variasi warna baru, bukan mengandalkan color picker, pembahasan singkat dibawah ini mungkin juga akan berguna bagi teman-teman yang menggunakan CSS untuk menerapkan warna.

RGB

Setiap parameter (red, green, blue) mendefinisikan intensitas warna dan dapat menjadi bilangan bulat antara 0 dan 255 atau nilai persentase (dari 0% hingga 100%). Misalnya, nilai rgb(0,255,0) atau rgb(0%,100%,0%) dirender sebagai hijau, karena parameter hijau (green) diatur ke nilai tertinggi (255 atau 100%) dan yang lainnya diatur ke 0.

#p1 {background-color: rgb(255, 0, 0);}   /* red */
#p2 {background-color: rgb(0, 255, 0);}   /* green */
#p3 {background-color: rgb(0, 0, 255);}   /* blue */

Hexadecimal (HEX)

Warna heksadesimal ditentukan dengan: #RRGGBB, di mana bilangan bulat heksadesimal RR (red), GG (green) dan BB (blue) menentukan komponen warna. Semua nilai harus antara 00 dan FF. Misalnya, nilai #ff0000 dirender sebagai merah, karena komponen merah diatur ke nilai tertinggi (ff) dan yang lainnya diatur ke 00.

#p1 {background-color: #ff0000;}   /* red */
#p2 {background-color: #00ff00;}   /* green */
#p3 {background-color: #0000ff;}   /* blue */

HSL

HSL adalah singkatan dari (hue, saturation, lightness) – dan mewakili representasi warna koordinat silinder, mari kira sedikit melihat penerapannya dalam CSS, dan pembahasan lebih detail parameternya.

#p1 {background-color: hsl(0, 100%, 50%);}   /* red */
#p2 {background-color: hsl(120, 100%, 50%);}   /* green */
#p3 {background-color: hsl(240, 100%, 50%);}   /* blue */

Hue adalah derajat pada roda warna (dari 0 hingga 360), dimana 0 (atau 360) berwarna merah, 120 berwarna hijau, 240 berwarna biru, dan warna lainnya bisa dilihat pada gambar berikut ini.

Hue dalam roda
Hue dalam slider

Saturasi menggunakan nilai persentase; 0% berarti warna abu-abu dan 100% adalah warna penuh (posisi netral), kita juga dapat mengurangi kadar saturasi untuk menghasilkan warna-warna pastel.

Lightness adalah tingkat kegelapan dan keterangan warna, juga menggunakan persentase; 0% berwarna hitam/gelap, 100% berwarna putih/terang, sedangkan 50% adalah posisi netral, sekarang kita lihat Saturasi dan Ligtness dari warna Merah.

Hue Saturation dan Lightness

Dengan sedikit pemahaman mengenai semua parameter diatas tadi, setidaknya ada sedikit gambaran untuk membuat variasi skema warna, bahkan untuk orang yang buta warna sekalipun, meski tanpa visual color picker.

Cukup awali dengan memilih Hue tertentu, kurangi saturasi jika ingin membuat warna pastel, dan mainkan lightness untuk membuat varian warna lainnya, misalnya untuk membuat aksen maupun latar sebagai komposisi untuk 2 opsi mode tema UI; mode terang ataupun mode gelap.

Tulisan ini akan diupdate segera. Tungguin ya. 😀

Tinggalkan Balasan