PEMANFAATAN HUE, SATURATION AND LIGHTNESS (HSL) UNTUK PENGENALAN WARNA BERBASIS ANDROID

1

Anggit Tri Widiastuti, Hero Wintolo, E. N. Tamatjita Program Studi Teknik Informatika

Sekolah Tinggi Teknologi Adisutjipto Yogyakarta informatika@stta.ac.id

ABSTRACT

World of the children are playing. Therefore, learning in kindergarten should not be separated from the play. One of the learn is doing introduction of color. Introduction the colors from childhood isn’t increasing to ability remember, imaginative and artistic, understanding of space, cognitive skills and creative thinking. Color can use the information technology by android smartphone based in camera’s. The aplication made of HSL models with three basic color characteristics. The name are Hue, Saturation and Lightness. Hue’s value is used to determine the color name. the result of 30 respondents are percentageby 79%. The android aplication base on HSL can help the parents to teach their children.

Keywords : Color, Android, HSL

INTISARI

Dunia anak-anak merupakan dunia bermain. Oleh sebab itu, pembelajaran di Taman Kanak- Kanak hendaknya tidak terlepas dari permainan. Salah satu pembelajaran yang dilakukan adalah pengenalan warna. Pengenalan konsep warna pada anak usia dini bukan hanya mengasah kemampuan mengingat, tetapi juga imajinatif dan artistik, pemahaman ruang, keterampilan kognitif, serta pola berpikir kreatif. Pengenalan warna dapat memanfaatkan teknologi informasi menggunakan smartphone yang dilengkapi kamera dengan dibuatkan aplikasi berbasis android. Aplikasi yang dibuat memanfaatkan model HSL yang terdiri dari tiga karakteristik warna dasar yaitu Hue, Saturation dan Lightness. Nilai hue digunakan untuk menentukan nama warna tersebut. Setelah dilakukan survey terhadap 30 responden, aplikasi dapat dikategorikan baik dengan nilai rata – rata persentase sebesar 79% dan dapat diaplikasikan penggunaannya dalam kehidupan sehari – hari untuk membantu orangtua mengenalkan warna pada anak mereka. Kata Kunci : Warna, Android, HSL

1. Latar Belakang Masalah

Dunia anak-anak merupakan dunia bermain. Oleh sebab itu, pembelajaran di Taman Kanak - Kanak hendaknya tidak terlepas dari permainan. Salah satu pembelajaran yang dilakukan adalah pengenalan warna. Warna menjadi elemen penting pada kehidupan sehari-hari. Pada setiap benda memiliki warna yang

berbeda-beda satu dengan yang lainnya. Pengenalan konsep warna pada anak usia dini berpengaruh pada perkembangan intelektual. Pengenalan konsep warna pada anak usia dini bukan hanya mengasah kemampuan mengingat, tetapi juga imajinatif dan artistik, pemahaman ruang, keterampilan kognitif, serta pola berpikir kreatif. Pengenalan warna dapat dengan memanfaatkan teknologi informasi menggunakan smartphone yang dilengkapi kamera.

HSL merupakan suatu model warna yang diperoleh dari color space RGB dan device dependent color space. Model HSL terdiri dari tiga karakteristik warna dasar yaitu Hue, Saturation dan Lightness.

2. Rumusan Masalah

a. Bagaimana membuat aplikasi yang dapat mendeteksi warna dengan memanfaatkan kamera yang ada pada smartphone?

b. Bagaimana mengubah warna dari sistem warna RGB ke sistem warna HSL? c. Bagaimanakah mempermudah anak usia dini dalam proses pembelajaran

pengenalan warna dengan memanfaatkan teknologi informasi?

3. Batasan Masalah

a. Aplikasi yang dibuat menggunakan Android.

b. Proses penangkapan warna menggunakan kamera dengan output atau keluaran yang dihasilkan adalah berupa suara yang menyebutkan warna tersebut. Warna dalam penelitian ini terbatas pada warna pelangi yaitu merah, jingga, kuning, hijau, biru, nila dan ungu.

c. Objek warna menggunakan media styrofoam yang diberi warna dengan cara konversi warna dari sistem warna RGB ke sistem warna HSL.

d. Warna yang dideteksi adalah warna dari pixel tengah pada handphone.

4. Metode Penelitian

a. Studi Literatur. Pada tahap ini dilakukan pencarian dan pemahaman literatur yang berhubungan dengan penelitian. Sedangkan literatur yang digunakan berasal dari: karya ilmiah, buku referensi, jurnal dan prosiding.

b. Perancangan Perangkat Lunak Object Oriented Programming (OOP). Pada tahap ini dilakukan perancangan untuk melakukan pengambilan obyek dan otomatis melakukan pengambilan obyek setiap interval waktu 5 detik. Semua data atau fungsi dipecah-pecah dan dibungkus dalam kelas-kelas atau obyek-obyek, kemudian antar kelas dikoneksikan pada program utama dengan cara memanggilnya.

5. Tinjauan Pustaka

Pengenalan konsep warna terhadap anak usia dini tergolong rendah yakni di bawah 60%. Penelitian ini dilakukan melalui permainan edukatif dengan styrofoam. Berdasarkan penelitian ini anak usia dini mengalami peningkatan dalam pengenalan konsep warna dari 40% menjadi 97%[1].

Agar dapat diolah dengan komputer digital, suatu citra harus dipresentasikan secara numerik dengan nilai-nilai diskrit. Pada pengolahan warna gambar, ada bermacam-macam model salah satunya adalah model hue, saturation, value (HSV). Berdasarkan pengujian, warna coklat memiliki error paling kecil yaitu 10% setiap 10 pengukuran atau 1 kali kesalahan[2].

Aplikasi Obtion Remote Versi 1.0 mengambil citra digital obyek dengan pemicu deteksi gerakan yang dilakukan obyek. Pengambilan citra digital (capture obyek dengan webcam) akan dilakukan secara otomatis apabila obyek telah berhasil terdeteksi. Hasil eksekusi obyek yang terdeteksi akan tersimpan otomatis pada direktori yang dieksekusi sebagai tempat penyimpanan citra digital[3].

6. Hue, Saturation dan Lightness (HSL)

HSL adalah suatu model warna yang diperoleh dari color space RGB dan device dependent color space. Berdasarkan pada presepsi dasar manusia, HSL model tersusun atas tiga karakteristik warna dasar :

a. Hue, nilainya diukur dari lokasi pada roda standar warna, yang diekspresikan dengan nilai derajat sudut di antara 0° dan 360°. Dalam penggunaannya, hue mengidentifikasikan nama dari sebuah warna seperti merah, orange (jingga), atau hijau.

b. Saturation merepresentasikan ukuran (kuantitas) dari proporsi keabuan pada hue, ukurannya dalam bentuk persentase dari 0% (gray) sampai dengan 100% (fully saturated). Pada roda standar warna, nilai saturation dari pusat roda (lingkaran) menuju tepian roda akan semakin bertambah.

c. Lightness adalah sebuah ukuran relative skala pencahayaan (lightness) atau kegelapan (darkness) dari sebuah warna, umumnya diukur sebagai persentase dari 0% (black) sampai dengan 100% (white).

7. Citra

Definisi citra menurut Kamus Webster adalah “suatu representasi, kemiripan, atau imitasi dari suatu obyek atau benda[4]. Secara harafiah, citra (image) adalah gambar pada bidang dwimarta (dua dimensi). Ditinjau dari sudut pandang matematis, citra merupakan fungsi kontinyu dari intensitas cahaya pada bidang dua dimensi. Sumber cahaya menerangi obyek, obyek kemudian memantulkan kembali sebagian dari berkas cahaya tersebut. Pantulan cahaya ini ditangkap oleh alat-alat optik, misalnya mata pada manusia, kamera, pemindai (scanner), dan sebagainya sehingga obyek yang disebut citra tersebut terekam[5].

8. Warna

Ruang warna RGB menggunakan tiga komponen dasar yaitu merah (R), hijau (G) dan biru (B). Setiap pixel dibentuk oleh ketiga komponen tersebut. Model RGB biasa disajikan dalam bentuk kubus tiga dimensi dengan warna merah, hijau dan biru berada pada pojok sumbu (Gambar 1). Warna hitam berada pada titik asal dan warna putih berada di ujung kubus yang bersebrangan.[6]

Tabel 1 Tabel warna RGB [7] [8]

No Nama Warna RGB Nilai Hue Range

1 Merah 255 . 0 . 0 0 Merah

16 <= H >=330

2 Merah – Orange 255 . 69 . 0 16

3 Orange (Jingga) 255 . 165 . 0 39 Jingga

16 <= H <=51 4 Gold 255 . 215 . 0 51 5 Kuning 255 . 255 . 0 60 Kuning 51<= H <=80 6 Hijau Kuning 154 . 205 . 50 80 7 Hijau 0 . 255 . 0 120 Hijau 80<= H <=180 8 Hijau Biru 0 . 255 . 255 180 9 Biru 0 . 0 . 255 240 Biru 180<= H <=255 10 Electric Ultra Marine 63 . 0 . 255 255

11 Nila 138 . 43 . 226 271 Nila

255<= H <=285 12 Electric Purple 191 . 0 . 255 285

13 Ungu 128 . 0 . 128 300 Ungu

285<= H <=330

9. Diagram Unified Modelling Language (UML)

Unified Modelling Language (UML) merupakan sebuah metode untuk mempresentasikan atau mendeskripsikan desain perangkat lunak ke dalam notasi-notasi grafis yang terstandarisasi.

a. Activity Diagram. Activity Diagram merupakan diagram UML yang digunakan untuk mempresentasikan logika, business process, atau alur kerja program. Dengan kata lain, diagram ini menunjukkan bagaimana aktifitas-aktifitas tersebut bergantung satu sama lain.

b. Use Case Diagram. Use case diagram digunakan untuk mewakili fungsionalitas dari sistem. Use case diagram menggambarkan interaksi antara pengguna, yang diwakili dengan actor, dengan system untuk mencapai tujuannya. Use case diagram menggambarkan apa saja aktifitas yang dilakukan oleh suatu sistem dari sudut pandang pengamatan luar. yang menjadi persoalan itu apa yang dilakukan bukan bagaimana melakukannya. c. Sequence Diagram. Sequence diagram adalah suatu diagram yang

menggambarkan interaksi antar obyek dan mengindikasikan komunikasi diantara obyek-obyek tersebut. Sequence diagram digunakan untuk menggambarkan obyek-obyek dalam system dan hubungan-hubungan dari obyek tersebut.

10. Analisa Sistem

Analisa sistem adalah analisa yang dilakukan dari sisi sistem. Analisa sistem ini dibuat dengan menggunakan beberapa diagram yaitu Activity Diagram, Sequence Diagram, Use Case Diagram dan Flowchart.

Pada aplikasi Pengenalan Warna, pengguna memulai penggunaan aplikasi dengan memilih aplikasi yang sudah di install di handphone android milik masing-masing pengguna. Saat aplikasi dipilih, akan muncul halaman loading kurang lebih selama 5 detik. Setelah halaman selesai loading, lalu pengguna dibawa masuk ke halaman berikutnya yaitu halaman utama aplikasi pengenalan warna. Saat berada pada halaman utama ini, kamera pada handphone pengguna otomatis dalam kondisi ON.

Pengguna kemudian mengarahkan kamera ke obyek yang akan dideteksi warnanya. Setiap rentan waktu 5 detik, aplikasi akan otomatis mengambil gambar dengan bantuan timer yang berjalan otomatis. Setelah obyek berhasil capture, akan muncul output informasi nama warna berupa teks dan suara disertai dengan preview obyek yang sebelumnya telah di capture.

a. Activity Diagram

Gambar 2 Activity Diagram Sistem Pengenalan Warna

b. Use Case Diagram

Use case diagram digunakan untuk mewakili fungsionalitas dari sistem. Diagram ini menggambarkan interaksi antara pengguna, yang diwakili dengan notasi actor, dengan sistem untuk mencapai tujuannya. Berikut skenario Use Case Diagram Aplikasi Pengenalan Warna pada Tabel 2

Aktor : Pengguna dan Kamera

Deskripsi : Proses yang dilakukan oleh sistem adalah sebuah kegiatan mengambil gambar untuk di deteksi warnanya.

Tabel 2 Skenario use case diagram sistem pengenalan warna

No Reaksi Aktor No Reaksi Sistem

1 Pengguna menjalankan aplikasi

2 Menampilkan Halaman Loading 3. Menampilkan halaman Utama 4 Mengarahkan kamera ke obyek

5 Capture gambar dengan timer 5 detik

6 Menampilkan informasi warna berupa teks dan suara

7 Pengguna melihat informasi sistem

Gambar 3 Use Case Diagram Sistem Pengenalan Warna

c. Sequence Diagram

d. Flowchart

Algoritma disini menjelaskan urutan-urutan proses konversi warna dari sistem warna RGB ke sistem warna HSL. Proses konversi dimulai dari didapatnya nilai red, green dan blue. Setelah itu, cari nilai maksimum dan minimum dari nilai red, green dan blue. Jika nilai maksimum sama dengan nilai minimumnya, maka nilai Hue tidak terdefinisikan dan nilai saturation adalah nol. Namun jika nilai maksimum tidak sama dengan nilai minimum dapat dicari nilai lightness.

Setelah didapat nilai lightness, maka selanjutnya adalah mencari nilai saturation. Kemudian setelah didapat nilai lightness dan saturation, proses selanjutnya adalah mencari nilai hue dari nilai maksimum yang didapat sebelumnya. Berikut algoritma dari konversi warna dari sistem warna RGB ke sistem warna HSL:

1. Input nilai R, G, B

2. Cari nilai Cmax dengan cara Cmax = max (R, G, B) 3. Cari nilai Cmin dengan cara Cmin = min (R, G, B)

4. Jika Cmax = Cmin maka nilai H = Undefined dan nilai S = 0 5. Jika Cmax != Cmin

a. Cari nilai L dengan cara L = (Cmax + Cmin) / 2

b. Jika nilai L <= 0.5 maka nilai cari nilai S dengan cara S = (Cmax – Cmin) / (Cmax + Cmin)

c. Jika nilai L >= 0.5 maka nilai S adalah S = (Cmax – Cmin) / 2 – (Cmax – Cmin)

- Jika Nilai R adalah nilai maksimum maka nilai H didapat dengan cara H = (G – B) / (Cmax – Cmin)

- Jika nilai G adalah nilai maksimum maka nilai H didapat dengan cara H = 2 + ((B – R) / (Cmax – Cmin)

- Jika nilai B adalah nilai maksimum maka nilai H didapat dengan cara H = 4 + ((R - G) / (Cmax – Cmin)

Berikut diagram alir atau flowchart dari aplikasi pengenalan warna yang menjelaskan konversi warna RGB ke warna HSL ditunjukan pada Gambar 5

Gambar 5 Flowchart Konversi RGB ke HSL

11. Pengujian Terhadap Pengguna

Pengujian terhadap pengguna dilakukan dengan cara membagikan kuesioner pada pengguna. Kuesioner terdiri dari 30 pernyataan dengan 30 orang responden. Skala Likert digunakan untuk mengukur sikap, pendapat dan persepsi seseorang atau sekelompok orang tentang fenomena sosial. Jawaban setiap pernyataan atau pertanyaan yang menggunakan skala Likert mempunyai gradasi dari sangat positif sampai sangat negatif dimana Anda diberikan 5 pilihan jawaban. Adapun hasil pengujian terhadap pengguna dapat dilihat sebagai berikut:

Keterangan jawaban: 1 : Tidak Setuju 2 : Kurang Setuju 3 : Netral 4 : Setuju 5: Sangat Setuju

Perhitungan kuesioner menggunakan skala Likert. Kuesioner dibagi menjadi 2 bagian dimana pada bagian pertama Anda diminta mengisi data diri, sedangkan bagian kedua berisi pernyataan yang menerangkan kesan Anda terhadap aplikasi Pengenalan Warna. Pernyataan tersebut terbagi menjadi 3 bagian yaitu Tampilan Aplikasi, Proses Aplikasi, serta Hasil dan Kegunaan Aplikasi. Setiap pernyataan memiliki 5 pilihan jawaban.

Tabel 3 Hasil rekapitulasi kuesioner pengguna

Pernyataan Jawaban Total

1 2 3 4 5

Kesesuaian warna dan desain latar belakang 0 1 5 22 2 30 Kesesuaian warna tulisan dengan latar

belakang 0 1 7 18 4 30

Warna yang digunakan membuat tampilan

lebih menarik 0 1 3 19 7 30

Warna yang digunakan cocok sehingga tidak

mengganggu mata 1 0 10 14 5 30

Ketepatan ukuran tulisan 0 1 10 16 3 30

Ketepatan pemilihan jenis tulisan 0 0 9 20 1 30 Ketepatan pemilihan warna tulisan 0 0 3 24 3 30

Kesesuaian bentuk tombol 0 2 9 16 3 30

Tampilan sederhana sehingga membuat

aplikasi nyaman digunakan 0 1 2 17 10 30

Proses aplikasi sangat sederhana 0 1 9 17 3 30

Aplikasi mudah dipahami 0 0 5 14 11 30

Aplikasi mudah digunakan 1 0 5 12 12 30

Aplikasi merespon dengan cepat 0 0 4 23 3 30 Aplikasi mudah dijalankan pada semua

gadget 1 0 1 24 4 30

Informasi yang disajikan mudah dimengerti 0 0 6 16 8 30 Tata letak tampilan mudah dikenali 1 0 8 15 6 30 Tingkat pencahayaan sangat mempengaruhi

hasil dari aplikasi 0 0 5 9 16 30

Pengambilan gambar dimudahkan dengan

adanya bantuan timer 0 1 10 16 3 30

Pengambilan gambar dapat diulang dengan

mudah 0 2 7 16 5 30

Hasil warna yang diperoleh dengan aplikasi

lebih akurat 0 2 7 16 5 30

Suara hasil sesuai dengan nama warna 0 1 8 12 9 30

Aplikasi dapat mengenal berbagai macam

warna 0 0 4 16 10 30

Aplikasi dapat digunakan untuk pembelajaran

pada anak 0 0 6 13 11 30

Orangtua dan anak sangat tertarik dan

antusias menggunakan aplikasi 0 1 8 11 10 30

Anak bisa bermain sambil belajar mengenal

warna 0 3 2 16 9 30

Aplikasi membantu perkembangan daya ingat

anak akan warna 0 2 3 14 11 30

Aplikasi dapat membantu mengembangkan

kecerdasan intelektual anak 1 1 5 13 10 30

Total 5 21 186 475 213 900

Berikut hasil rekapitulasi kuesioner terhadap 30 responden dalam sebuah grafik. 24% 2% 52% 21% 1% Tidak Setuju Kurang Setuju Netral Setuju Sangat Setuju Gambar 6 Hasil Jawaban Terhadap 30 Responden

12. Kesimpulan

a. Proses image to speech dalam aplikasi yang digunakan menggunakan fasilitas text to speech.

b. Berdasarkan kuesioner yang telah dibagikan kepada 30 responden, aplikasi masuk dalam kategori baik dengan rata – rata persentase sebesar 79%. c. Aplikasi dapat membantu orang tua dalam proses pembelajaran warna pada

13. Saran

a. Cahaya sangat berpengaruh pada proses pengenalan warna sehingga perlu pencahayaan yang cukup untuk memperoleh hasil yang maksimal.

b. Aplikasi dapat dikembangkan menjadi lebih banyak untuk jenis warna yang dikenali.

c. Aplikasi dapat dikembangkan menjadi aplikasi yang lebih kompleks seperti menghitung jumlah warna tertentu pada sekumpulan warna yang ada.

DAFTAR PUSTAKA

[1] Mastija, Widajati. 2014. Peningkatan Kemampuan Pengenalan Konsep Warna melalui Permainan Edukatif dengan Styrofoam pada Anak Usia Dini Kelompok A di TK Al Fajaar Surabaya. Surabaya.

[2] Kusumanto et all. 2011. Klasifikasi Warna Menggunakan Pengolahan Model Warna HSV.

[3] AyuningTyas, Astika. 2012. Penerapan Metode Gerakan Obyek untuk Pengambilan Citra Digital Pada Obtion Remote Versi 1.0. Yogyakarta. [4] Achmad, Firdausy. 2005. Teknik Pengolahan Citra Digital menggunakan

Delphi. Yogyakarta: Ardi.

[5] Munir, Rinaldi. 2004. Pengolahan Citra Digital dengan Pendekatan Algoritmik. Bandung: Informatika.

[6] Putra, Darma. 2010. Pengolahan Citra Digital. Yogyakarta: Andi.

[7] W3school. 2015. CSS Color Values.

http://www.w3schools.com/cssref/css_colorsfull.asp. diakses pada 4 Agustus 2015.

[8] 99colors. 2015. RGB Colors. http://www.99colors.net/rgb-colors. diakses pada 4 Agustus 2015.