僕は発展途上技術者

HTMLカラーコードで表された色を濃く(暗く)する Javascript

任意に指定された HTML カラーコードで表された色と、それを少し濃くした色とのペアを取得するという必要にせまられた。これを実現する Javascript のコードを探したのですが、適当なものがみつからなかったので自分で書いてみました。


エントリー末尾の Javascript コードを読み込み、


darken('ff0000', 0.8)


のように darken 関数を呼んでください。2つ目の引数は濃くする度合いで、1に近いほど濃くする度合いは弱く、0に近いほど度合いが強くなります。


以下、実際どのように濃くなるかの例です。


  ff0000

  darken('ff0000', 0.8) = cc0000


  ffccff

  darken('ffccff', 0.8) = cca3cc


» Miscellaneous : True Color Darkening and Lightening / The JavaScript Source


のコードを参考にしました。


上記は逆数を取ったりとちょっとややこしいことをしているのですが、#ff0000 のような原色をうまく変換してくれなかったので、


» Darken and lighten color? - Usenet Forums




To lighten, increase RGB values by 10% each. To darken, decrease RGB values by

10% each. Maybe replace 10 with whatever the "certain amount" is.


(RGBの各色を10%ずつ増やせば色を薄く、10%ずつ減らせば色を濃くできる)


という発言を参考にして書き直しました。


不備があったり、もっと良い方法がありましたら、コメントなどでお知らせください。



プロフィール

株式会社まちクエスト代表、つくる社LLC代表。

Scratchで楽しく学ぶ アート&サイエンスRaspberry Piではじめる どきどきプログラミングを書きました。

オンラインコンテンツ: 大人のためのScratch

Amazonから図書館検索 Libron、iPhoneアプリ ひらがなゲーム かなぶん を作っています。

Email: webmaster at champierre dot com

Twitter @jishiha

最近のエントリー

アーカイブ