サイトやバナーの配色で困ったら、ここで見本を作っちゃおう
こんにちは！サイト管理人の@0zero1ichiです
サイトや、バナーを作るときに、配色って結構重要ですよね？
頭の中でイメージできれば良いのですが。なかなかそうはいきません。
私なんかは特にそうですｗ
配色選びに困った時に見ているサイト『colorhunt.co』
配色選びに困った時に、良く使っているサイトはこちら！
colorhunt.coのホーム画面です
カラーハント？かな。正式名がわかる方がいましたら、連絡してください。。
良く使っているのサイトなのに、名前がわからないなんて失礼ですからね。
このサイトは、4種類の色をイメージしやすいように並べられます。
まずは、自分で配色してみよう！
左上のメニュー横にある『Create（作る）』ボタンをクリックします。
Createボタン
そしたら、4色のパレットが出てきます。
配色パレット
配色したいパレットをクリックすると、色が選択できます。
色は、
- 右にある上下の『スライドバー（灰色のバー）』で大まかな色を決めます。
- 左の枠内にある『ポイント（黒い点）』を移動させて色を選択できます。
パレットを選択すると、右にカラー選択画面が表示されます。
実際にやってみましょう
まずは1段目
1段目の配色
次に2段目
2段目の配色
3段目
3段目の配色
4段目
4段目の配色
決まったら、中央下にある『Done』をクリックします。
Doneボタン
うーん。。センスないですね。。
まぁ、わかってましたけどｗ
なので、私と同じような方は、センスの良い配色をお手本にしちゃいましょう！
センスの良い配色をお手本にする
中央のベロを出しているロゴをクリックします。
colorhuntロゴ
すると、毎日のように皆さんが作成した配色が表示されています。
配色の見本
配色の中にある『♥ハートマーク』はクリックすると、横の数字に反映されます。
この数字は、皆さんが『♥（いいね！）』をクリックした回数なので、
どんな配色が人気なのか調べてみるのも良いでしょう！
次に、右にある日付は、『Done（アップロード）』された日を表しています。
あなたの求めている配色は見つかりましたでしょうか？
気に入った配色を調べたい場合
配色のパレットをクリックします。
色の上にマウスを持っていくと、16進数の数値（＃で始まる6つの英数字）が表示されます。
colorhunt配色16進数
この数値を参考にしましょう！
この数値を、クリックするとコピーできるように選択されます。
16進数をRGBで表示したい場合
また、ご使用のツールが、RGB（0～255の３つの数値）しか入力できない場合はこちらで変換してみてください。
色の16進数表示をRGB表示に変換してくれるサイト
PEKO STEPの画面です。
このサイトを利用して、先ほどの16進数の数値をコピーして、中央上部の『カラーコード』に貼り付けます。
カラーコードに16進数の数値を入力します。
すると、自動的にRGBへと変換してくれます。
先ほどの＃A20A0A（16進数）はRGBでは
- R：162
- G：10
- B：10
となります。
あとは、RGBの数値を使用しているツールにコピーして貼り付けるだけです。
簡単でしょ？
サイトやバナー作成、配色に困ったときに使えるサイト
と
16進数のカラー表示をRGB数値に変換するサイト
を紹介しました！
当サイト『ゼロイチ.com』では、過去にも配色に関する記事を掲載しております。
このサイトの配色何だろう？画面の配色がわかるツール【ColorPicker】
お時間がありましたら、ぜひご覧ください。
最後まで、読んでいただきありがとうございます。
この情報があなたのお役に立てたら幸いです。
