Wedges.bin

はてなブログでWEBデザイン

WEBのカラーリングに役立つサイト〈CSSカラー(HEX値)が表示されるサイト〉

なんで6桁の数字が色を表しているのか?

このサイトのアクセントカラーの「赤」は「c70032」です。

この6桁の数字は、2桁ずつを3つ続けたもので、
最初の「c7」はRed、「00」はGreen、「32」はBlueの成分です。
光の3原色「RGB」です。


モニターでは、それぞれR、G、Bを0〜255の256段階で、明るさを変えることによって、様々な色を表現できます。


この256を、2桁で表す方法が、HEX値(16進数)です。
0〜9まで行ったら、次はa、b、とつづき最後はf。合計16。
これを2桁使うことで、16×16=256段階を表現するのです。


00が一番暗くて、ffが一番明るい。
RGBそれぞれが、一番暗い時(000000の時)は、黒。
RGBそれぞれが、一番明るい時(ffffffの時)は、白。

カラーリングに役立つサイト

CSS Color Chart

http://ainsleywagon.github.io/color-chart/

同系統の色別に、名前の付いている代表的な色を並べて見せてくれています。
右上のHEXをクリックすることで、6桁のHEX値を見ることができます。


[ HUE / 360 ] The Color Scheme Application

http://hue360.herokuapp.com/

シンプルで直感的にわかりやすく、おすすめではない色は、隠してくれるところが良いです。
左下の「Print User Color」をクリックすると、選んだ色のHEX値を見ることができます。


Material Design Color Palette Generator - Material Palette

http://www.materialpalette.com/

シンプルなブログテーマの配色選びにぴったりなサイト。


配色の見本帳 | キーカラーで選ぶ配色パターン

http://ironodata.info/

一つのカラーを選ぶと、関連する色々なカラーを表示してくれます。


Adobe Color CC

https://color.adobe.com/ja/create/color-wheel/

グラフィックソフト最大手のアドビが作ったサイトだけあって機能がすごい。
しかも、日本語に対応している!



Paletton - The Color Scheme Designer

http://paletton.com/

選んだ配色でWEBページのイメージをプレビューしてくれる機能が特徴。


和の色 - 色の名前と色見本

http://irononamae.web.fc2.com/colorlist/wa.html

日本の伝統色など、わかりやすく一覧で表示しているので見やすいです。