ホームページを作っていると、この部分の色は緑色…といってもどんな緑にしようか？と考えたり、ある色を中心として、他の色を合わせるときに明度や彩度を合わせないと浮いてしまうというようなことがあります。デザインに関して学んだことはないので頭が混乱しますが、そんな私でもこの「色見本と配色サイト」というホームページで色に関する悩みを解消することができました。
「色見本と配色サイト」でできること、のご紹介！
この「色見本と配色サイト」でできることはとても多いです。
・色の名前から色番号がわかる
・明度、彩度から色番号がわかる
・日本の伝統配色やその他の配色の種類からWEBで配色を使ったときの見本を見ることができる
・画像から使われている色を分析することができる
というような機能があります。機能はこれだけではなく、もっと沢山あるのですが多くて書き切れません(>_<)。ということで、気になった上記の内容をピックアップしてご説明します。
色の名前から色番号がわかる—「とび色ってどんな色か知ってますか？」
例えば「金色」「もえぎ色」「とび色」…などの色をWEBサイトで使いたいと思ったときに、こちらのサイトですぐに調べることができます。
トップページにある、色名検索に検索したい色の名前を入れて検索すると
このように沢山の金色を表現した色番号とその色名称を知ることができます。
同様に、もえぎ（色は付けない方が検索できるみたいでした）
とび
で検索して、「今まで聞いたことがあったけど判然としなかった色」までわかるようになりました！ちなみにとび色ってこんな色だったんですね！
彩度、明度から色番号がわかる
彩度、明度のパーセンテージを指定して色番号がわかる機能はとっても便利です。
彩度：色の鮮やかさ。純色が一番高い状態で、グレーに近づくと「彩度が低く」なる
明度：色の明るさ。純色を中心として、白に近づくと「明度が高い」黒に近づくと「明度が低い」ということになる
色々な色を組み合わせるときは「彩度」もしくは「明度」のパーセンテージを合わせるようにすると色の組み合わせがしっくりする、ということになるようです。
トップページのこの 彩度％ と 明度％ をクリックするとそれぞれのパーセンテージの色見本を表示してくれます。
「彩度」が高いと
このようにくっきりとした色になります。特に「彩度100％明度100％」の色は元気のある感じの色になるので、子供向けのサイトなどで使うよういいみたいです。
「明度」が高いと
このようにふんわりした優しいイメージの色合いになるようです。どちらかといえば女性向けのサイトなどに良いかなと思います。
日本の伝統配色やその他の配色の種類からWEBで配色を使ったときの見本を見ることができる
「日本の伝統配色見本」
というところから、例えば
伝統配色－夏 をクリックすると
沢山の配色が表示されます。
かきつばたの配色見本をクリックすると、
この色の組み合わせでWEBサイトを作ったら、こんな風になりますよ！という見本が表示されとてもわかりやすいです。
同様に配色の種類
からテトラード配色をクリックして
表示された色の組み合わせのところにある配色見本をクリックすると
表示された色を組み合わせるとどんなWEBサイトになるか？ということがわかるようになっています。
画像から使われている色を分析することができる
画像をアップロードすると、その画像で使われている色や、それぞれの色がどのぐらいのパーセンテージを占めているかわかる画像色解析という機能も面白いです。
画像色解析をクリック
このように表示されるので、手持ちの画像をドラッグ＆ドロップしてみます。
この赤い矢印の赤枠のところ（これは分かりやすくするため追加しました！）にこんな風に、画像で使われている色やその使われているパーセンテージが帯グラフとして表示されました！
色をクリックすれば
その色番号のページに飛ぶので、画像で使われている色番号をすべて知ることができます。
ここでわかった色を使って、見出しなどの文字にすると
こういう見出しと文字がしっくりするような感じの表現ができる、ということになるかと思います。
色に関する「これしたい！」というようなことがほぼ揃っているサイト
色に関しては今まで色々なWEBサイトを参考にしてきましたが、こちらは「これしたい！」というような色に関する機能がほぼ（というか今のところ全部）揃っていました。
今回まだご紹介できなかった色をクリックするとその色に関する「写真」「WEBサイト」「色見本」を見ることができるなどなどたくさんあります。色はWEBサイトに欠かせないものなので、是非このサイトをお使い
コメント