Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

ブラウザ上で動作するカラーピッカー、サイドバーに設置してみました!

 どうも!LSSです!!

 

ブラウザ上で動作するカラーピッカーを作り、サイドバーに設置してみました!

 

 

f:id:little_strange:20210722231152p:plain

こんな感じで表示されます

f:id:little_strange:20210722224528p:plain

 

安直に、inputタグの type="color" を置いて、その色コードを表示しただけ…だとちょっと味気ないので、10個の提案色をついでに表示していますw

 

 

コード

<p>色を選択するとカラーコードが分かり、さらに10個の提案色が出てきます。</p>
<p><input id="sbcolorselect" type="color" value="#888888" /> <span id="sbcolorselectis">#888888</span></p>
<div id="sbcolors"> </div>
<script>// <![CDATA[
sbcolorselect.addEventListener('input',sbcolorselectch,false);
sbcolorselectch();
function sbcolorselectch(){
sbcolorselectis.innerHTML=sbcolorselect.value;
sbcolortxt='';
for(sbcolori=0;sbcolori<10;sbcolori++){
sbcolorsmp='#'+('0'+(parseInt(sbcolorselect.value.substr(1,2),16)+Math.floor(Math.random()*(255-parseInt(sbcolorselect.value.substr(1,2),16)))).toString(16)).substr(-2)+('0'+(parseInt(sbcolorselect.value.substr(3,2),16)+Math.floor(Math.random()*(255-parseInt(sbcolorselect.value.substr(3,2),16)))).toString(16)).substr(-2)+('0'+(parseInt(sbcolorselect.value.substr(5,2),16)+Math.floor(Math.random()*(255-parseInt(sbcolorselect.value.substr(5,2),16)))).toString(16)).substr(-2);
sbcolortxt+='<span style="width:100%;background-color:'+sbcolorsmp+';padding:2px;">'+sbcolorsmp+'</span> ';
}
sbcolors.innerHTML=sbcolortxt;
}
// ]]></script>

 

はてなブログダッシュボード→デザイン→工具アイコン→サイドバー→モジュールを追加 で、「HTML」を選び、上記コードをコピペする事で設置できます。

 

詳しくは

スクリーンショット付きで手順を書いています^^

 

 

色を探したい時は当ブログを開くといつでも探せます

というアクセスアップを狙っても良かったのですが、もし自分のブログに設置したいという方がおられましたら、ご自由にどうぞ、です^^

 

 

あとがき

記事内のコードとの干渉を避けるために、idや関数名、変数名がやたら長くなっていますw

 

「提案色」は

の「色味」と同じ手法で、「選択色」のR・G・Bそれぞれを「選択色より明るい色」からランダムで選んでいるので、黒を選択すると最もバラエティに富み、白に近いほど範囲が狭くなります。

 

あと、余談なんですが、Googleで「カラーピッカー」とだけ入れて検索すると、そのまま検索候補のトップにカラーピッカーが出てくるんですね!

f:id:little_strange:20210722230556p:plain

初めて知りましたw

  

 

 

ってなとこで、今回はこのへんで!

次回もまた、よろしくお願いします^^