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

Membuat Variasi Warna

Sekarang mari kita mulai untuk membuat variasi warna HSL, demi kemudahan dalam contoh ini akan saya gunakan pure color atau warna asli, sedangkan Anda bebas untuk memilih warna apapun sebagai base varian.

Sudah dijelaskan diatas bahwa value L:50% adalah posisi netral, berarti 50 keatas akan mengarah ke warna terang dan 50 kebawah akan ke arah warna gelap, dan kita cukup membuat varian dari value L tersebut.

Warna Merah

Warna merah (red) memiliki value HSL: 0, 100%, 50%, kita akan membuat 15 varian warna hanya dengan mengubah value Lightness (L), sedangkan value lainnya (H dan S) tidak perlu diubah, value L saya tulis didalam tanda kurung.

darkcherryred (10)

#340000

RGB: 52, 0, 0

CMYK: 0, 100, 100, 80

bloodred (20)

#650000

RGB: 101, 0, 0

CMYK: 0, 100, 100, 60

maroon (25)

#7f0000

RGB: 127, 0, 0

CMYK: 0, 100, 100, 50

darkred (27)

#880000

RGB: 136, 0, 0

CMYK: 0, 100, 100, 47

red3 (40)

#ca0000

RGB: 202, 0, 0

CMYK: 0, 100, 100, 21

red2 (47)

#f10000

RGB: 241, 0, 0

CMYK: 0, 100, 100, 5

red (50)

#ff0000

RGB: 255, 0, 0

CMYK: 0, 100, 100, 0

firebrick1 (59)

#ff2c2c

RGB: 255, 44, 44

CMYK: 0, 83, 83, 0

novascotia salmon (60)

#ff3333

RGB: 255, 51, 51

CMYK: 0, 80, 80, 0

orangered4 (63)

#ff4141

RGB: 255, 65, 65

CMYK: 0, 75, 75, 0

seattle salmon (70)

#ff6666

RGB: 255, 102, 102

CMYK: 0, 60, 60, 0

indianred1 (71)

#ff6a6a

RGB: 255, 106, 106

CMYK: 0, 58, 58, 0

rosybrown1 (88)

#ffc1c1

RGB: 255, 193, 193

CMYK: 0, 24, 24, 0

flatpink (90)

#ffcdcd

RGB: 255, 205, 205

CMYK: 0, 20, 20, 0

snow (99)

#fff8f8

RGB: 255, 248, 248

CMYK: 0, 3, 3, 0

Sangat mudah kan? silahkan bereksperimen sendiri untuk membuat variasi warna lainnya, Atau lihat Referensi yang saya rekomendasikan: https://www.december.com/html/spec/colorhsl.html

Sekian tulisan mengenai warna kali ini, sampai jumpa di artikel selanjutnya, jangan lupa bagikan jika tulisan ini dirasa bermanfaat. Terima Kasih.

Tinggalkan Balasan