Pengembangan Color Guide Generator Berbasis Algoritma
Keywords:
Color Guide, K-Means Clustering, Decision Tree, Design Token, Antarmuka Pengguna.Abstract
Penentuan palet warna secara manual dari gambar referensi desain merupakan proses yang tidak efisien dan rentan inkonsistensi. Penelitian ini mengembangkan sistem Color Guide Generator berbasis Python yang mengekstraksi warna dominan dari gambar antarmuka menggunakan K-Means Clustering, mengklasifikasikannya ke dalam peran desain terstandar menggunakan Decision Tree, dan menghasilkan design token dalam format JSON serta elemen pendukung seperti CSS Variables dan konfigurasi Tailwind CSS. Model Decision Tree dilatih dari dataset HSL yang diekstrak dari tiga design system publik dan mencapai F1-score 0,98 untuk mode terang dan 0,92 untuk mode gelap. Validasi melalui User Acceptance Testing (UAT) terhadap 5 responden menghasilkan rata-rata skor 4,52 dari 5. Sistem ini terbukti mengotomatiskan proses penentuan warna yang sebelumnya dilakukan secara manual menjadi alur yang konsisten dan siap diintegrasikan ke dalam pengembangan antarmuka web.
References
[1] misalnya, hanya menghasilkan palet warna visual statis dari citra digital tanpa mengklasifikasikan warna ke dalam peran desain yang bermakna seperti primary, background, atau surface, sehingga hasilnya tidak dapat langsung digunakan sebagai color token yang fungsional. Padahal klasifikasi peran inilah yang menjadi syarat agar hasil ekstraksi dapat langsung diimplementasikan. Penelitian
[2] menunjukkan bahwa algoritma klasifikasi berbasis data mampu menghasilkan segmentasi warna yang lebih akurat dan konsisten dibandingkan penilaian manual, sehingga memperkuat perlunya tahap klasifikasi otomatis dalam proses ekstraksi warna. Persoalan serupa juga terlihat pada penelitian
[3] , yang meskipun berhasil mengekstraksi palet warna dominan dengan kualitas visual tinggi, keluarannya masih diarahkan untuk kompresi citra dan belum mencakup klasifikasi peran warna untuk kebutuhan design token. Di sinilah algoritma Decision Tree berperan sebagai model supervised learning yang mampu mengklasifikasikan nilai warna HSL ke dalam peran desain secara otomatis dan konsisten. Penelitian ini mengusulkan sistem Color Guide Generator yang mengintegrasikan deteksi area antarmuka berbasis OpenCV, ekstraksi warna dominan dengan K-Means Clustering, dan klasifikasi peran desain menggunakan Decision Tree. Luarannya berupa design token siap pakai dalam format JSON, CSS Variables, dan konfigurasi Tailwind CSS, menggantikan proses manual yang selama ini tidak efisien dengan alur otomatis yang konsisten dan siap diintegrasikan ke workflow pengembangan antarmuka web. Metodologi Penelitian K-Means Clustering K-Means Clustering adalah algoritma unsupervised learning yang mengelompokkan data ke dalam K kelompok berdasarkan kedekatan karakteristik. Dalam penelitian ini, algoritma digunakan untuk mengelompokkan piksel gambar antarmuka pada ruang warna RGB menjadi enam warna dominan (k=6). Proses K-Means berlangsung secara iteratif yang artinya centroid awal dipilih secara acak, setiap piksel ditetapkan ke centroid terdekat, lalu centroid diperbarui hingga konvergen Penetapan piksel ke centroid menggunakan perhitungan Euclidean Distance pada ruang warna RGB sebagai berikut: p adalah piksel dengan nilai (Rp, Gp, Bp) dan c adalah centroid dengan nilai (Rc, Gc, Bc). Piksel ditetapkan ke centroid dengan nilai d terkecil. Pembaruan centroid dilakukan dengan menghitung rata-rata seluruh piksel dalam kelompok tersebut . Deteksi Area UI Berbasis OpenCV Sebelum ekstraksi warna dilakukan, sistem memisahkan area antarmuka (UI) dari elemen foto atau non-UI menggunakan analisis blok berbasis OpenCV yang merupakan pustaka pengolahan citra digital yang mendukung berbagai operasi analisis visual . Sebuah blok diklasifikasikan sebagai foto hanya jika keempat kriteria terpenuhi secara bersamaan : Edge Density (Canny) > 8% Standar deviasi piksel > 45 Variasi warna RGB > 2.000 Keragaman warna > 25 warna per blok Kriteria keragaman warna unik menjadi pembeda utama antara elemen foto dan teks atau komponen UI, karena foto mengandung 30–60 warna unik per blok sedangkan komponen UI umumnya hanya mengandung 5–24 warna unik. Area yang terdeteksi sebagai foto dieliminasi menggunakan morphological closing dan penyaringan komponen konektif. Decision Tree Decision Tree adalah algoritma supervised learning yang mengklasifikasikan data berdasarkan serangkaian aturan percabangan pada fitur input . Dalam penelitian ini, setiap warna dominan hasil K-Means dikonversi dari RGB ke ruang warna HSL, kemudian diklasifikasikan ke dalam peran desain (primary, secondary, background, surface, text, border, accent) menggunakan model yang dilatih dari dataset tiga design system publik: Material Design 3, Tailwind CSS v3, dan Ant Design v5. Pemilihan fitur split pada setiap node pohon menggunakan kriteria Gini Impurity, yang mengukur tingkat kemurnian sebuah node. Semakin rendah nilai Gini, semakin murni pengelompokan kelas pada node tersebut. Rumus Gini Impurity adalah: p(i|t) adalah proporsi sampel kelas i pada node t, dan c adalah jumlah kelas. Nilai Gini = 0 menunjukkan node yang sepenuhnya murni (semua sampel satu kelas). Model dilatih menggunakan DecisionTreeClassifier(max_depth=10) dari scikit-learn dengan split data 80:20 secara stratifikasi. Deteksi tema light atau dark mode dilakukan otomatis berdasarkan nilai weighted lightness warna dominan, jika median tertimbang L > 50 maka terdeteksi sebagai light mode, kalau sebaliknya berarti dark mode. Lalu model .pkl yang berbeda dimuat untuk masing-masing tema. Evaluasi Model Evaluasi performa model Decision Tree dilakukan menggunakan tiga metrik klasifikasi yaitu Precision, Recall, dan F1-score . Ketiga metrik dihitung berdasarkan nilai True Positive (TP), False Positive (FP), dan False Negative (FN) dari hasil prediksi peran warna. Precision = TP / (TP + FP) Precision adalah ukuran yang menunjukkan seberapa tepat hasil prediksi yang dihasilkan oleh model. Recall = TP / (TP + FN) Recall menggambarkan kemampuan model dalam menemukan seluruh peran warna yang benar dari data yang tersedia.. F1 = 2 × (Precision × Recall) / (Precision + Recall) F1-score merupakan ukuran yang menggabungkan nilai Precision dan Recall untuk memberikan penilaian terhadap performa model secara keseluruhan. Kualitas pengelompokan K-Means dievaluasi menggunakan Silhouette Score, yang mengukur seberapa mirip sebuah piksel dengan kelompoknya sendiri dibandingkan kelompok lain, dengan rentang nilai −1 hingga +1. Nilai mendekati +1 menunjukkan pengelompokan yang baik dan terdefinisi jelas. Metode Pengumpulan Data Penelitian ini menggunakan dua jenis data. Pertama, data pelatihan model Decision Tree yang diperoleh dengan mengekstraksi nilai warna HEX dari dokumentasi resmi tiga design system publik yang menyediakan token warna dan peran semantik secara terstruktur
[4] , yaitu: Material Design 3 : diambil token warna peran semantik (primary, secondary, background, dst.) dari m3.material.io/styles/color/roles Tailwind CSS v3 : diambil seluruh palet warna per skala kecerahan dari v3.tailwindcss.com/docs/customizing-colors Ant Design v5 : diambil token warna komponen dan semantik dari ant.design/docs/spec/colors Setiap nilai warna dalam format HEX dikonversi ke ruang warna HSL menggunakan pustaka colorsys Python untuk memperoleh representasi Hue, Saturation, dan Lightness yang digunakan sebagai fitur masukan model Decision Tree
[5] . dan diberi label peran desain sesuai konteks sumbernya, menghasilkan dataset 406 baris untuk mode terang dan 119 baris untuk mode gelap. Kedua, data gambar uji berupa screenshot antarmuka digital dalam format JPG/PNG (maksimal 5 MB) yang umum digunakan sebagai format penyimpanan citra digital
[6] , diambil dari dokumentasi pribadi milik peneliti yang nantinya digunakan untuk menguji pipeline sistem secara end-to-end. Hasil dan Pembahasan Pembangunan Dataset dan Pelatihan Model Dataset pelatihan dibangun secara manual dengan mengekstraksi nilai warna langsung dari dokumentasi resmi tiga design system publik. Setiap sumber memiliki penamaan peran warna yang berbeda-beda, sehingga diperlukan pemetaan ulang ke tujuh peran desain yang seragam: primary, secondary, background, surface, text, border, dan accent. Pemetaan dilakukan sebagai berikut : Material Design 3 : sudah mendefinisikan peran warna secara eksplisit seperti Primary, On-Primary, Secondary, Background, Surface. Pemetaan langsung ke label standar tanpa banyak perubahan. Tailwind CSS v3 : Menyediakan palet skala kecerahan (50–950) per warna. Skala gelap (700–950) dipetakan ke text, skala tengah (400–600) ke primary/secondary/accent, dan skala terang (50–200) ke background/surface. Ant Design v5 : menggunakan sistem token semantik seperti colorPrimary, colorBgContainer, colorBorder, colorText. Setiap token dipetakan ke label peran yang paling sesuai secara semantik. Setiap nilai warna HEX dari ketiga sumber dikonversi ke ruang warna HSL menggunakan pustaka colorsys bawaan Python. Konversi ini menghasilkan tiga fitur numerik yaitu Hue (H), Saturation (S), dan Lightness (L) yang digunakan sebagai fitur input model. Hasil konversi disimpan dalam dua file CSV terpisah berdasarkan tema, yaitu color_roles_light.csv (406 baris) dan color_roles_dark.csv (119 baris), masing-masing dengan kolom H, S, L, dan role sebagai label kelas. Model Decision Tree dilatih secara terpisah untuk setiap tema menggunakan DecisionTreeClassifier (max_depth=10) dari scikit-learn. Model yang telah dilatih disimpan dalam format .pkl menggunakan pustaka pickle Python, menghasilkan dua file yaitu decision_tree_light.pkl & decision_tree_dark.pkl sehingga dapat dimuat kembali saat pipeline berjalan tanpa perlu melatih ulang. Evaluasi Model Decision Tree Evaluasi model dilakukan menggunakan program Python dengan library scikit-learn. Model .pkl dimuat kembali, diuji terhadap data uji, lalu menghasilkan laporan evaluasi berupa nilai precision, recall, dan F1-score per kelas peran warna. Hasil evaluasi yang dijalankan menggunakan program Python tersebut menghasilkan laporan sebagai berikut : Tabel 1. Hasil Evaluasi Decision Tree (Light Mode) Tabel 2. Hasil Evaluasi Decision Tree (Dark Mode) Berdasarkan hasil di atas, model mode terang mencapai F1-score 0,98 dan model mode gelap mencapai 0,92. Keduanya melampaui target kelayakan 0,85 yang telah ditetapkan. Nilai F1 yang lebih rendah pada kelas secondary di mode gelap wajar terjadi karena jumlah referensi warna secondary pada design system mode gelap memang lebih sedikit dibanding kelas lainnya. Evaluasi K-Means Clustering Kualitas pengelompokan warna oleh K-Means dievaluasi menggunakan dua metrik yaitu Inertia dan Silhouette Score. Evaluasi dijalankan langsung setelah proses K-Means selesai menggunakan library scikit-learn. Hasil evaluasi ditampilkan pada Tabel 3. Tabel 3. Hasil Evaluasi K-Means Clustering Inertia mengukur seberapa rapat piksel berkumpul di dalam cluster-nya masing-masing yang semakin kecil nilainya, semakin rapat. Nilai inertia sebesar 10.686.537,75 tergolong wajar mengingat jumlah piksel yang diproses sangat besar (sampel 50.000 piksel dari 2 juta piksel area UI) dengan rentang nilai RGB 0–255. Silhouette Score merupakan metode evaluasi internal yang digunakan untuk mengukur kualitas hasil clustering berdasarkan tingkat kemiripan suatu data terhadap cluster-nya sendiri dibandingkan dengan cluster lain, dengan rentang nilai −1 hingga +1
[7] . Nilai 0,8656 yang dihasilkan tergolong sangat baik yaitu mendekati +1 menunjukkan bahwa 6 cluster warna yang terbentuk memiliki batas yang jelas dan tidak tumpang tindih. Ini berarti K-Means berhasil mengelompokkan warna-warna dominan antarmuka BookWalking secara akurat dan representatif. Hasil Deteksi Area dan Ekstraksi Warna Dominan Pengujian dilakukan menggunakan gambar antarmuka dashboard aplikasi BookWalking (test01.jpg) yang diambil dari dokumentasi pribadi peneliti. Proses berjalan dalam dua tahap menggunakan Python dengan library OpenCV dan scikit-learn. Deteksi UI Sistem memindai gambar blok per blok (40×40 piksel) menggunakan OpenCV untuk memisahkan area antarmuka dari elemen foto. Sebuah blok dinyatakan sebagai foto hanya jika memenuhi tiga kriteria sekaligus: standar deviasi piksel di atas 60, variasi warna RGB di atas 3.000, dan jumlah warna unik per blok di atas 30. Kriteria ketiga menjadi pembeda utama, komponen UI seperti tombol dan latar hanya memiliki 2–15 warna unik per blok, sedangkan foto biasanya mengandung 30 warna unik atau lebih. Hasil deteksi ditunjukkan pada komparasi pada Gambar 1 dan Gambar 2. Gambar 1. Antarmuka Sebelum Proses Deteksi Gambar 2. Hasil Deteksi Area UI Dari hasil pemindaian, area UI terdeteksi sebesar 98,2% (2.094.204 piksel) dan area foto yang dieliminasi hanya 1,8% (38.121 piksel) berupa foto sampul buku di bagian kiri atas antarmuka. Sistem juga menghitung nilai kecerahan rata-rata dari piksel UI dan mendapatkan nilai 91,17, sehingga gambar terdeteksi otomatis sebagai light mode. Ekstraksi Warna Dominan Ekstraksi warna dominan merupakan proses untuk memperoleh sekumpulan warna yang paling merepresentasikan karakteristik visual suatu citra. Pada penelitian ini, proses tersebut dilakukan menggunakan algoritma K-Means Clustering dengan k=6
[8] . Dari piksel area UI yang tersisa, scikit-learn menjalankan K-Means Clustering untuk menemukan 6 warna yang paling mewakili tampilan antarmuka.. Hasil ekstraksi ditampilkan pada Tabel 4. Warna pertama (#fbfbfb) mendominasi dengan coverage 84,4%, mencerminkan latar putih bersih yang mendominasi tampilan BookWalking. Lima warna sisanya masing-masing di bawah 6% namun merepresentasikan elemen-elemen penting seperti warna hijau aksen, oranye, abu-abu, teks, dan warna pendukung. Keenam warna ini selanjutnya diteruskan ke tahap klasifikasi peran desain. Hasil klasifikasi warna dan generated token Keenam warna hasil K-Means diklasifikasikan ke dalam peran desain menggunakan model Decision Tree. Setiap warna dimasukkan dalam format nilai HSL, lalu model menentukan perannya secara otomatis. Sistem juga menangani konflik apabila dua warna mendapatkan prediksi peran yang sama, warna dengan coverage lebih kecil dialihkan ke peran lain yang paling sesuai (conflict resolution). Hasil klasifikasi ditampilkan pada Tabel 5. Tabel 5. Hasil Klasifikasi Peran Warna Setelah seluruh warna berhasil diklasifikasikan, sistem secara otomatis menghasilkan tiga format design token yang tersimpan di folder output. Format JSON menjadi output utama karena paling lengkap dan fleksibel
[9] . Setiap warna menyertakan nilai HEX, RGB, HSL, persentase coverage, dan nilai confidence dari model. Format CSS Variables dan konfigurasi Tailwind CSS dihasilkan sebagai format pendukung yang dapat langsung digunakan di proyek front-end tanpa modifikasi tambahan. Gambar 3. Potongan Output JSON Token Selain JSON, sistem juga menghasilkan CSS Variables dalam format :root { --color-primary: #feb867; } dan konfigurasi Tailwind CSS dalam format module.exports, keduanya tersimpan otomatis di folder output/ dan siap digunakan langsung di proyek front-end berbasis. User Acceptance testing (UAT) Validasi sistem dilakukan melalui UAT terhadap 5 responden yang memiliki pengalaman di bidang desain UI/UX, pengembangan front-end, atau keduanya. Setiap responden diminta mencoba sistem secara langsung dengan mengunggah gambar antarmuka pilihan mereka, lalu mengisi kuesioner penilaian menggunakan skala Likert 1–5. Pengujian mencakup lima aspek yang ditampilkan pada Tabel 6. Tabel 6. Profil Responden UAT Tabel 7. Hasil Penilaian UAT per Responden (Skala Likert 1–5) Hasil UAT menunjukkan rata-rata skor keseluruhan sebesar 4,52 dari 5. Dua aspek mendapat skor tertinggi yaitu kesesuaian peran warna dan kepercayaan hasil (masing-masing 4,80), menunjukkan bahwa klasifikasi peran yang dihasilkan dinilai akurat dan layak dijadikan acuan dalam proyek nyata. Aspek kegunaan format output mendapat skor terendah (4,20), yang dapat dipahami karena responden menilai output tanpa mencoba mengintegrasikannya langsung ke proyek. Secara keseluruhan, sistem diterima dengan baik oleh seluruh responden.. Kesimpulan Sistem Color Guide Generator berhasil dikembangkan menggunakan kombinasi K-Means Clustering untuk dominan dan Decision Tree untuk klasifikasi peran desain, dengan output berupa design token dalam format JSON, CSS Variables, dan konfigurasi Tailwind CSS. Model mencapai F1-score 0,98 untuk mode terang dan 0,92 untuk mode gelap, dengan Silhouette Score K-Means sebesar 0,8656, keduanya melampaui target kelayakan yang ditetapkan. Validasi UAT terhadap 5 responden menghasilkan rata-rata skor 4,52 dari 5, menunjukkan sistem diterima baik dan mampu menggantikan proses penentuan warna manual secara efektif. Pengembangan selanjutnya dapat diarahkan pada perluasan dataset mode gelap yang lebih akurat dan dukungan ekspor ke format Figma tokens atau Flutter. Ucapan Terima Kasih Kepada Universitas Duta Bangsa yang telah memberikan kesempatan sehingga pembuatan jurnal ini bisa terlaksana. Selanjutnya kepada peneliti terdahulu yang telah menjadi referensi bagi penulis untuk melakukan penelitian ini. Referensi
