Kuika’nın Color Picker elementi, kullanıcıların bir renk paletinden seçim yapmasını sağlar. Renk kodlarını manuel olarak girmeye veya görsel bir renk aralığı üzerinden seçim yapmaya olanak tanır. Tasarım özelleştirmeleri, tema ayarları veya kullanıcı tercihlerinde renk seçimi gereken senaryolar için idealdir.
Color Picker elementi yalnızca web uygulamalarında desteklenmektedir.
Kullanım Alanları
Arayüz özelleştirme (tema rengi, buton rengi vb.)
Grafik veya görsel oluşturma araçları
Renk bazlı etiket veya durum seçimleri
Dinamik tasarım önizlemeleri
Kullanım Senaryosu – Buton Rengini Özelleştirme
Bir tasarım aracında, kullanıcı uygulama içindeki bir butonun rengini değiştirmek ister. Color Picker elementi bu amaçla kullanılır.
Senaryoda:
Kullanıcı “Button Color” alanına gelir.
Color Picker paletinden bir renk seçer veya manuel olarak HEX kodu girer (ör. #FF5733).
Seçilen renk, butonun arka planına otomatik olarak uygulanır.
Kullanıcı aynı panelde butonun yazısını da düzenleyebilir.
UI Design Modülü İşlemleri
UI Design modülüne gidin.
Elements > Color Picker kategorisinden elementi sürükleyip bırakın.
Value → Dinamik olarak bir butonun “Background Color” özelliğine bağlanabilir.
Özelliklerin Senaryo Bağlamında Kullanılması
Renk Paleti Görüntüleme: Kullanıcı fare ile renk spektrumu üzerinden seçim yapabilir.
Manuel Renk Girişi: HEX formatında renk kodu yazılabilir (örn. #FFFFFF).
Ton ve Opaklık Seçimi: Rengin parlaklık ve saydamlık değerleri ayarlanabilir.
Format Desteği: Renk formatı HEX, RGB, RGBA veya HSL olarak değiştirilebilir.
Value: Seçilen renk değeri dinamik olarak başka bir elementin (örneğin bir Button) rengine bağlanabilir.
Senaryo Tamamlandığında
Kullanıcı Color Picker’dan bir renk seçer.
HEX alanında değer görüntülenir (ör. #007BFF).
Buton rengi anında güncellenir ve kullanıcı canlı önizleme görebilir.
Kullanıcı isterse değeri sıfırlayıp başka bir renk seçebilir.
Kısıtlamalar
Color Picker yalnızca web uygulamalarında desteklenir.
Mobil cihazlarda renk seçimi sistem arayüzüne yönlendirilebilir.
Dinamik bağlama yapılmadığında seçilen renk sadece geçici olarak uygulanır.
İpuçları ve Best Practices
Renk seçici için kullanıcıya “önizleme alanı” sunarak seçimin sonucunu anında gösterin.
HEX dışında RGB veya HSL formatlarını destekleyerek profesyonel tasarımcı deneyimi sağlayın.
Renk paletini temaya göre sınırlamak (ör. marka renkleriyle) tutarlılık kazandırır.
Renk değeri değiştiğinde otomatik kaydetme veya onay mekanizması ekleyin.
