Design：Webサイト デザイン カラーを決める HTMLカラーコードと配色を調べる【超便利サイト5選】

ウェブサイトは配色が命！ WEB
2019.11.01

サイトデザインの配色に困ったら参考にしてください。
超便利な5サイトの使い方をまとめます。

メインカラーが決まっていないかたや、お気に入りのサイトで使われている色のカラーコードを調べたいかたは、こちらを参考になさってください。

Chrome：ColorPick Eyedropperで表示しているサイトのカラーコードを秒速で調べる
ColorPick Eyedropperは、表示中のブラウザに使われているカラーコードをチェックできるChrome拡張機能です。 ポインタを合わせてその部分のカラーコードを調べるのはもちろんのこと、チェックしたカラーコードを保存・印刷もできるので便利です。個人利用から複数サイト利用までライセンスが提【...続きを読む】
kabeto.net
スポンサーリンク

PALETTABLE：数百万人のデザイナの英知を結集～美しいカラーパレット

数百万人ものデザイナの英知を結集して、自分だけのカラーパレットが作れるサイトです。

メイン カラーを決めたら、２つめからは好きか嫌いかで選択していくだけ。
最大5色までの配色を決めたら、htmlカラーコードをエクスポートできます。

PALETTABLEparettable

PALETTABLEの使い方

  1. メインカラーを決めよう
    最初にPALETTABLEのサイトを開くと上図とは異なり任意の単色が1色だけページ全体に表示されます。
    #で始まるhtmlカラーコードが表示されている部分に、自分が使いたい色コードを入力しましょう。あるいは、画面下方に表示される[Like]（好き） [Dislike]（嫌い） をクリックして色を選ぶこともできます。
  2. 2色目を決めよう
    1色目が決まったら、画面下方の[Like]をクリックすると2色目が選べます。
    ここでも同じように[Like]（好き） [Dislike]（嫌い）を使って色を選んでいきましょう。[Dislike]をクリックすると別の色を提案してくれます。
  3. 最大5色まで選べるよ
    5色選ぶとページの右下に上図のウィンドウが表示されます。5色目が気に入らなければ[Dislike]で別の色を選びましょう。これで良し！と思ったら[Export]（エクスポート）を選びます。
    5色未満の場合は、ページ右上の[Export]をクリックしましょう。
  4. エクスポートは2種類
    URLシェアか.pngダウンロードの2種類から選べます。
カラーコードの下にあるスライダー（3本線）をクリックすると同系の色を選択できるパレットが開きます。
ゴミ箱アイコンをクリックすれば選択済みの色を削除できます。

Colormind：色選びもAIにお任せ～写真やアートからデイリーで配色を提案

AIを使ったディープ ラーニングで写真や映画、アートを解析して配色を提案してくれます。
毎日異なるデータが読み込まれますので、日替わりカラーパレットで配色のインスピレーションが広がるかも。
colormind

Colormindの使い方

  1. メインカラーを決めよう
    1色目（一番左）の色の下にあるスライダー（3本線）をクリックすると色を選択できるパレットが開きます。カラーコードも入力できるので、あらかじめキーカラーが決まっているならこのパレットを開いてカラーコードを入力しましょう。
    1色目が決まったら、スライダーの左隣にあるカギアイコンをクリックして確定しましょう。
  2. AIの提案を見てみよう
    1色目を確定したら、そのすぐ下にある[Generate]をクリックしてみましょう。
    キーカラーに合わせて残りの4色を提案してくれます。
    途中で気に入った色が見つかったら、その色のカギアイコンをクリックすれば色が固定されます。そしてまた[Generate]をクリックして、残りの色の提案を見てみましょう。
スライダーの右隣にある[<]、[>]で色の順番を移動できます。
カラーパレットのエクスポート機能は見当たらないので、カラーコードを控えておくかスクリーンショットを取っておくのが良いかもしれませんね。

NIPPON COLORS：和テイストの色なら

日本の伝統色のRGB、16進数カラーコード、CMYKを調べることができます。
私は、日本の伝統色の名前って奥深いなぁと感じながら、NIPPON COLORで探した色をもとに別のサイトでカラーパレットを生成しています。
NIPPON COLOR

NIPPON COLORSの使い方

  1. 色を探そう
    ページの中央から左側に色のサンプルと名称が表示されます。
    色名をクリックすると画面の背景色がその色に変わりますので、全体的なイメージがつかみやすいです。
    ページをスクロールして好みの色を探してみましょう。
  2. 色番号を確認しよう
    特定の色をクリックしてその色が全体の背景色になった状態で、画面の中央にCMYKとRGBの数値が縦組みで表示されます。RGBの部分にポインタを合わせれば16進数のカラーコードが表示されます。

Adobe Color CC：思い通りにカスタマイズしたカラーパレットを作る

類似色、モノクロマティック、トライアド、補色などカラーハーモニー ホイールを適用して思い通りのカラーパレットを作ることができます。
Adobe Color CC

Adobe Color CCの使い方

  1. ベースカラーを決めよう
    カラーホイールの下に5色が四角で表示され、その下に16進数カラーコードが表示されています。いずれかひとつをダブルクリックするとカラーコードを入力できます。
    ベースカラーが決まったら、その色の四角にポインタを合わせて表示される△をクリックしてベースカラーを確定できます。
  2. ハーモニー ホイールを選ぼう
    ページ左側の[類似色]、[モノクロマティック]、[トライアド]、[補色]、[コンパウンド]、[シェード]、[カスタム]のいずれかを選択します。
    どれを選んでも、1.の手順で確定したベースカラーは変わりません。
  3. 丸を動かして配色を決めよう
    ページ中央の大きな円の中にそれぞれの色を表す小さな円が表示されます。これをくるくると回したり、大きな円の中心から外側に（あるいは内側に）移動させて全体の配色を決めましょう。
Adobe Creative Cloudにログインすればカラーテーマを保存できます。

COLOR LEAP：その時代の雰囲気をカンタンに作り出せる

紀元前2000年から1960年代まで時代を選んでその時代に特徴的なカラーパレットを表示してくれる遊び心溢れるサイトです。

COLOR LEAPCOLOR LEAP

COLOR LEAPの使い方

  1. 年代を選ぼう
    ページ下側の[CHOOSE ERA]（時代を選択）もしくは左上のカレンダーアイコンから年代を選びます。
    その年代の代表的な画像が数枚表示されます。
    画面左側の[SEE COLORS]（色を見る）をクリックしましょう。カラーパレットから画像表示に戻るには[SEE IMAGES]（画像を見る）をクリックします。
  2. カラーパレットから色コードをコピーしよう
    画面の右側にいくつかのカラーパレットが表示されます。気に入った色が見つかったら、その色をクリックするとカラーコードがコピーできるので、テキストアイルなどにペーストしておきましょう。
お気に入りのカラーパレットを保存するには会員登録が必要です。GoogleアカウントもしくはFacebookアカウントで[SIGN IN]から会員登録できます。
以上　ご参考まで♪
（というか、自分の備忘録♪）
スポンサーリンク

 

タイトルとURLをコピーしました