Chroma Code

Aplikasi mobile konverter warna RGB ke HEX. Pengguna mengatur nilai kanal merah, hijau, dan biru pada rentang 0–255 — dengan menggeser slider, mengetuk track, menekan tombol presisi, atau langsung mengetik kode HEX — lalu aplikasi menampilkan pratinjau warna beserta kode HEX-nya secara langsung (two-way binding).

Pemegang Hak Cipta: Universitas Insan Mahardika Identitas aplikasi (Android): ac.id.mahardika.chromacode Versi: 1.0.0

Panduan langkah demi langkah untuk pengguna tersedia di PANDUAN.md.

Fitur

1. Pratinjau warna layar penuh

Seluruh area atas aplikasi (hero) ikut berubah warna secara langsung mengikuti nilai RGB, mengisi layar sampai ke belakang bilah status. Di dalamnya ditampilkan:

• kode HEX berukuran besar (contoh: #F0B90B),
• pembacaan rgb(240, 185, 11),
• pembacaan hsl(46°, 91%, 49%).

Warna teks dan gaya ikon bilah status dipilih otomatis (hitam atau putih) berdasarkan kecerahan persepsi warna latar, sehingga tetap terbaca pada warna seterang apa pun maupun segelap apa pun.

2. Tiga kontrol geser kanal (R, G, B)

Setiap kanal punya bilah bergradasi yang memperlihatkan warna hasil pada setiap posisi — gradasinya ikut berubah mengikuti dua kanal lain. Nilai dapat diatur dengan tiga cara:

Cara	Kegunaan
Menggeser thumb	Menjelajah nilai secara cepat
Mengetuk titik pada bilah	Melompat langsung ke nilai tersebut
Tombol − / +	Penyesuaian presisi, satu satuan per ketukan

3. Input HEX dua arah

Kolom Kode HEX menerima ketikan 3 digit (#F0B) maupun 6 digit (#F0B90B), dengan atau tanpa tanda pagar. Karakter non-heksadesimal ditolak otomatis dan panjangnya dibatasi enam digit. Begitu teks membentuk kode yang sah, ketiga slider langsung bergerak; sebaliknya setiap perubahan dari kontrol lain langsung tampil di kolom ini. Teks yang tidak lengkap dikembalikan ke warna aktif saat kolom ditinggalkan.

4. Salin ke papan klip

Kartu Salin Kode menyediakan tiga tombol yang menyalin warna aktif dalam format siap tempel:

Tombol	Yang disalin
HEX	#F0B90B
RGB	rgb(240, 185, 11)
HSL	hsl(46, 91%, 49%)

Kode HEX besar di area pratinjau juga dapat diketuk sebagai pintasan menyalin HEX. Tombol yang baru ditekan berubah menjadi gelap dengan tanda centang dan tulisan "Tersalin" selama sekitar 1,5 detik sebagai konfirmasi.

5. Turunan warna

Tujuh variasi dari warna aktif — tiga lebih terang, warna asli di tengah (bertanda garis tebal), dan tiga lebih gelap — dihitung dengan mencampur warna ke arah putih dan hitam. Setiap kotak dapat diketuk untuk dijadikan warna aktif yang baru, dan turunan langsung dihitung ulang dari warna tersebut.

6. Palet Program Studi

Preset warna resmi Universitas Insan Mahardika siap pakai sekali ketuk: Informatika (#F0B90B), RMIK (#C41010), PSIK (#3D8B11), Kebidanan (#0080FF), dan Tinta (#141417). Preset yang sedang aktif ditandai garis tebal.

7. Warna Acak dan Atur Ulang

Warna Acak menghasilkan kombinasi RGB acak pada rentang penuh 0–255. Atur Ulang mengembalikan warna ke kuning emas Informatika (#F0B90B).

8. Aksesibilitas

Slider mengumumkan diri sebagai kontrol adjustable beserta nilai minimum, maksimum, dan nilai saat ini. Tombol langkah, kotak turunan, dan preset memiliki label yang dapat dibaca pembaca layar.

Perubahan pada Versi Ini

Desain ulang antarmuka

• Tata letak lama (judul, kotak pratinjau, kartu info, kartu kontrol) diganti menjadi hero warna penuh + lembar kontrol melengkung yang menutupinya.
• Pratinjau kini mengisi layar hingga ke belakang bilah status, bukan lagi kotak berukuran tetap di tengah.
• Informasi warna diperluas dari HEX + RGB menjadi HEX + RGB + HSL.
• Kontrol dikelompokkan ke dalam kartu bertema (Kode HEX, Kanal Warna, Turunan Warna, Palet Program Studi) agar layar lebih mudah dipindai.
• Warna prodi yang sebelumnya hanya menjadi aksen kini bisa dipakai langsung lewat kartu preset.

Fitur baru

• Tombol salin ke papan klip. Sebelumnya kode warna hanya bisa dibaca di layar dan harus disalin manual. Kini tersedia kartu Salin Kode dengan tombol HEX, RGB, dan HSL, ditambah pintasan ketuk pada kode HEX besar di area pratinjau. Dibangun dengan expo-clipboard — modul resmi Expo SDK, bukan pustaka UI pihak ketiga.
• Pembacaan HSL pada area pratinjau, melengkapi HEX dan RGB.
• Kartu turunan warna untuk membentuk keluarga warna terang–gelap.
• Kartu palet program studi berisi preset warna resmi.
• Tombol Atur Ulang untuk kembali ke warna awal.

Perbaikan fungsional

• Slider kini benar-benar dapat digeser. Versi sebelumnya hanya menyediakan tombol − / + dengan bilah pasif; kini tersedia gestur geser (PanResponder) dan ketuk-untuk-melompat. Langkah tombol juga diperhalus dari 5 menjadi 1 satuan agar bisa mencapai nilai yang tepat.
• Komponen slider dipindah keluar dari App. Sebelumnya CustomColorSlider didefinisikan di dalam fungsi App, sehingga React menganggapnya komponen baru pada setiap render dan memasangnya ulang terus-menerus. Kini komponen berada di berkas sendiri sehingga identitasnya stabil dan gestur tidak terputus.
• Kolom HEX tidak lagi menampilkan nilai basi. Menekan Warna Acak (atau kontrol lain) selagi kolom HEX masih memegang fokus dulu meninggalkan kode lama di kolom tersebut. Kini kolom menampilkan warna aktif kecuali sedang ada ketikan yang belum selesai.
• Penekanan tombol beruntun tidak lagi saling menimpa. Tombol − / + dulu membaca nilai dari render sebelumnya, sehingga ketukan cepat berturut-turut bisa hilang. Pembaruan state kini memakai bentuk fungsional; lima ketukan menghasilkan tepat lima langkah.
• Gestur geser tidak direbut oleh gulir halaman. Selama thumb ditarik, gulir vertikal dinonaktifkan sementara.
• Peringatan SafeAreaView dihilangkan. Komponen tersebut sudah deprecated pada React Native 0.85. Jarak aman atas kini dihitung dari StatusBar.currentHeight, tanpa menambah dependensi native baru.
• Rotasi dan lebar layar. Ukuran elemen tidak lagi dikunci ke lebar layar yang dibaca sekali saat modul dimuat, melainkan mengikuti tata letak induk.

Perapian kode

• Perhitungan warna dipindah ke src/color.js dan diuji terpisah.
• Nilai merek serta preset dipusatkan di src/theme.js.
• Konversi HEX ke RGB kini menerima bentuk 3 digit dan menolak masukan tidak valid secara eksplisit.

Teknologi

• React Native 0.85 dengan Expo SDK 56
• Seluruh antarmuka dibangun murni dengan StyleSheet dan komponen bawaan React Native, tanpa pustaka UI pihak ketiga. Slider memakai PanResponder bawaan, dan gradasi track disusun dari potongan View berwarna.
• Satu-satunya dependensi tambahan adalah expo-clipboard (modul resmi Expo SDK) untuk akses papan klip. Karena berupa modul native, proyek perlu dibangun ulang (npm run android) setelah npm install, bukan sekadar memuat ulang Metro.

Menjalankan Proyek

npm install          # pasang dependensi
npm start            # jalankan Metro bundler (Expo)
npm run android      # bangun & jalankan di perangkat/emulator Android

Struktur

Berkas	Keterangan
App.js	Susunan layar: hero pratinjau, input HEX, salin kode, kanal warna, turunan, preset
src/color.js	Seluruh perhitungan warna: HEX ↔ RGB, HSL, kecerahan, turunan, acak
src/theme.js	Palet merek, skala netral antarmuka, warna awal, dan daftar preset
src/components/ChannelSlider.js	Kontrol geser satu kanal (PanResponder, track gradasi, tombol presisi)
src/components/CopyButton.js	Tombol salin satu format warna beserta konfirmasi sesaat
index.js	Titik masuk aplikasi (registerRootComponent)
app.json	Konfigurasi Expo: nama, ikon, paket Android
assets/	Ikon aplikasi dan gambar splash
PANDUAN.md	Panduan penggunaan untuk pengguna akhir

Lisensi

Hak Cipta © 2026 Universitas Insan Mahardika. Seluruh hak dilindungi undang-undang. Lihat berkas LICENSE.