広告

posted by fanblog

16進数のカラーコードの数値を調整して色を明るくしたり暗くする方法

ブログの色指定に使われていますカラーコードは、R(赤)G(緑)B(青)の光の三原色を 0〜9 と A〜F の16進数6桁で表したもので、#000000(黒)〜 #FFFFFF(白)までの 16,777,216色 を表示することが出来ます。
この16進数のカラーコードの数値を調整して色を明るくしたり暗くするには、R(赤)の数値、G(緑)の数値、B(青)の数値に同じ数を足したり、引いたりすれば、色相を変えることなく明度を変えることができます。
※ 16進数:0、1、2、3、4、5、6、7、8、9、a、b、c、d、e、f、の基数を16とした数値。
#
33 99 66
 
  R G B
たとえば上記見本の #339966 の色を少し明るくするには #44aa77、#55bb88、というように同じ数を R(赤)、G(緑)、B(青)、それぞれの数値に足して #FFFFFF(白)に近づけるように上げていきます。
少し暗くするには #228855、#117744、と同じ数を引いて #000000(黒)に近づけるように下げていきます。

             
#000000 #117744 #228855 #339966 #44aa77 #55bb88 #FFFFFF


下記のような文字色によく使われます基本色の場合は MAX(最大値)の FF と MIN(最小値)の 00 との組み合わせになりますので、色相のないグレースケールに置き換えて考えますと自然に調整ができます。

基本色:白と黒を除いた FF と 00 の組合せの6色
Red Lime Blue Yellow Aqua Fuchsia
#FF0000 #00FF00 #0000FF #FFFF00 #00FFFF #FF00FF

グレースケール:色相のない黒から白の明度のものさし
           
#000000 #333333 #666666 #999999 #cccccc #FFFFFF

#FF0000
#FF0000 の色を明るくしたい場合は #000000(黒)の位置に置き換え、R は FF で MAX なので、G とB の数値を #FFFFFF(白) に近づけるように上げていきます。

           
#FF0000 #FF3333 #FF6666 #FF9999 #FFcccc #FFFFFF

#FF0000
#FF0000 の色を暗くしたい場合は #FFFFFF(白)の位置に置き換え、G と B は 00 で MIN なので、R の数値を #000000(黒) に近づけるように下げていきます。

           
#000000 #330000 #660000 #990000 #cc0000 #FF0000

いかがでしたでしょうか?16進数のカラーコードの仕組みがわかりますと、文字色なんかの簡単な色の調整は出来るようになりますので、覚えておきますと便利かと思います。
複雑な数値の組み合わせのカラーコードの場合はこちらのツールがとても便利です。
※上記ツールのご利用につきましては、利用者の自己責任にてお願いします。

この記事へのコメント

« 前の記事 : 「Subtle Patterns」背景画像に使えるシンプルでCOOLなフリーテクスチャ素材サイト
ユーザビリティを考えてサイドバーの項目を配置してみよう! : 次の記事 »

ブログパーツ
美容整形
Related Posts Plugin for WordPress, Blogger...
×

この広告は30日以上新しい記事の更新がないブログに表示されております。