Komponen Pemilih Warna (Color Picker)
Pemilih palet warna swatches dan input warna heksadesimal dengan preview visual langsung.
Rikat Declarative / PrimeNG-StyleKomponen pemilih palet warna ala <p-colorPicker> di PrimeNG. Menyediakan palet warna kurasi siap pakai, input nilai heksadesimal, dan pemilih warna visual untuk kustomisasi tema, branding, dan desain UI.
Pemilih Warna Swatches & Heksadesimal
Pilih warna utama merek (Brand Accent):
<!-- Color Picker dengan Nilai Hex Awal -->
<l-color-picker value="#ff2d20"></l-color-picker>
Palet Warna Desain Standar Ngapakin
10 Palet Warna Kontras Tinggi untuk Desain Modern:
#ff2d20
#3b82f6
#10b981
#8b5cf6
#f59e0b
<!-- Swatch Palet Warna Desain -->
<span style="background: #ff2d20;"></span> <!-- Merah Ngapak -->
<span style="background: #3b82f6;"></span> <!-- Biru Indigo -->
<span style="background: #10b981;"></span> <!-- Hijau Zamrud -->
Preview Kustomisasi Tema Langsung
Pilih Warna Aksen:
Pratinjau Komponen
AktifPerubahan warna pada color picker di samping kiri langsung diterapkan secara dinamis.
<!-- Color Picker Terhubung ke Pratinjau DOM -->
<l-color-picker id="themeColorPicker" value="#3b82f6"></l-color-picker>
<script>
document.getElementById('themeColorPicker').addEventListener('change', (e) => {
const hex = e.detail.value;
document.getElementById('previewCard').style.borderLeftColor = hex;
document.getElementById('previewTag').style.backgroundColor = hex;
});
</script>