Javascript ile renk seçici yapımı

birotuz13 1040 gün önce

671 defa görüntülendi ve 1 kişi tarafından değerlendirildi

Altta verdiğim fotoğraftaki gibi veya daha farklı bir renk seçici yapmak istiyorum. Kullanıcı renk seçtikten sonra div imin o renkte olmasını istiyorum. Nasıl yaparım?

https://imgur.com/a/f3EHqlI

Soru hatalı mı? 👎

Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!

Spam olarak işaretle

Cevaplar (5)

akincankoc

1040 gün önce

    function hexToRgb(hex) {
        var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
        return result ? {
          r: parseInt(result[1], 16),
          g: parseInt(result[2], 16),
          b: parseInt(result[3], 16)
        } : null;
      }
     
     $("#tema").on("input",function(){
          var secilen = $("#tema").val();
          const {r,g,b} = hexToRgb(secilen);
          $(".inv-option-item").css("background-color", "rgb("+r+", "+g+","+b+")");
      });

bu şekilde birşey işini görür umarım hex kodunu rgb koduna çevirirsin istersen a değerinide

"rgba("+r+", "+g+","+b+","+a+")" bu şekilde kullanbilirsin

#005892

birotuz13

1040 gün önce

    $("#tema").on("change",function(){
        var secilen = $("#tema").val();         
        $(".inv-option-item").css("background-color",secilen);
    });

şöyle bir şey yaptım fakat rengime kendi belirlediğim alfa değeri de eklemek istiyorum
opacity ekleyince tüm containerın opacitysi azlıyor ben sadece arkaplan rengininin azalmasını istiyorum
nasıl yapabilirim

#005891

birotuz13

1040 gün önce

Bir aşamada takılmadım, direkt yapamamıştım.

Evet, color inputu sonrdan aklıma geldi öyle yapıyorum şuan.

#005882

bbera

1040 gün önce

HTML içinde input tipleri arasında color tipi bulunuyor bu sayade bir color picker yapabilirsin.

<input type="color" id="colorPicker" name="picker" value="#f6b73c">

ayrıca daha fazla bilgi ve özelleştirmeler için bu link yardımcı olacaktır umarım.

#005881

sercanarga

1040 gün önce

Hangi aşamada takıldın? (bknz: Doğru Düzgün Soru Sormanın Yolları)

HTML5'de yer alan color inputunu kullanabilirsin. JS ile de ilgili inputu dinleyip değişiklik olduğunda elemanına uygulayabilirsin.

#005879