簡単ステップで配色を決める
前章でメインカラーを決めることはできたでしょうか？
ここからは組み合わせを選んでいく方法をシェアします。
私も実際にカラーを選んでみて、しっくりこないことが何度もありました。
そこで、試行錯誤の経験を踏まえた簡単ステップで配色を決める方法を紹介します。
前章はこちらです
STEP 1
この配色バランスを使うことで、迷わず色を決められる！
前章でベースカラー、メインカラー、アクセントカラーの比率を簡単に説明しました。
「70:25:5の法則をベースにする」です。
しかしもう少し色数を増やしたい場合は、割合を変えて色数を増やすことでまとまりのあるブログに仕上がります。
STEP 2
メインカラーとの相性で色を選ぶ
好きな色を組み合わせるだけじゃダメ？→ 色の相性を考えよう！
私がはてなブログで選んだ配色はうまくいきまたが、必ずそうなるというものでもありませんよね。メインカラーを活かすには、対照的な色 or なじむ色で選ぶのがおすすめです。
対照的な色 vs なじむ色の選び方
対照的な色とは？
- メインカラーを強調する効果がある（目立たせたいときに使う）
- 例：ネイビー × オレンジ（コントラストが強く、目を引く）
- 「明るい vs 暗い」「暖色 vs 寒色」など、メリハリがある組み合わせが特徴
なじむ色とは？
- メインカラーと調和する色を選び、統一感を出す
- 例：ベージュ × ブラウン（柔らかくナチュラルな印象）
- 「類似した色」「同じトーン」など、落ち着いた雰囲気を作りたいときに向いている
例えば先ほどの私のはてなブログの配色ですが、以下のようにイメージが変わります。
対象カラーの配色
なじみカラーの配色
対照カラーorなじみカラーでブログの雰囲気もかなり変わることにおきづきでしょうか？
好きな色、雰囲気などで自分が好きな配色が出来たと思ってもブログのテーマによって合わないこともあります。
STEP 3
配色パターンサイトを活用する
ゼロから色を考えるのは大変！という方へ
私自身も使わせてもらった、すぐ使えるカラーパターンなどを提供してくれるサイト（無料）をご紹介しますので、ぜひご活用ください。
colorate
メインカラーに合うベースカラーとアクセントカラーを 4候補出してくれるので、好きな色を一色決めるだけです！カラー表示後のページ下部では、指定した色を背景色にした時のイメージや、白もしくは黒背景でこの色を文字色にした時のイメージまで載せてくれています。
khroma
カラーサンプルの中から、自分好みの色を50種類を選択すると、AIがその選択結果をから、あなたの好みにぴったりのカラーパレットを無限に生成してくれるサービスです。
ColorHexa
検索フィールドに任意の色の値 を入力するだけで、デザインに適したカラー パレット (補色、類似色、3 色、4 色、単色の配色など) を生成してくれるツールです。
Color-hex
上のボックスに6桁のカラーコードを入力してEnterキーを押すと類似色など、色に関する情報（シンプルなCSSコードやHTML要素のサンプル）を表示してくれます。
W3Schools
このサイトはカラーだけではなく、いろいろなことを学べます。
カラーについてはピッカーで一つ選ぶと類似や、選んだカラーを背景に文字色がどのように見えるかなども表示されます。他にもたくさんカラーについてのメニューがあるので是非お試しくださいね。
COLOURlovers
最後に私の大好きなサイトをご紹介します。
参加型のサイトでいろいろな人の作ったカラーパレットやテクスチャのパレットが見られます。好きなパレットを見つけたらクリックすると詳細を見られます。一色のみクリックすると、そのカラーのほかのパレットも見られます。色々な検索方法があってみているだけでも楽しいですよ！
会員登録をすれば自分のオリジナルカラーパレットの投稿も可能です。
さいごに
私は好きな色がブログのイメージに合わなかったり、好きな色の濃さがPCで見るのとiPhone、iPadで見るのとはイメージが違ったりしてずいぶん迷走しました。
カラーサイトを見ると「これがいい！」と、その組み合わせで設定してみるとこのブログの場合は大カテゴリが3つあるので、色分けをしようと思い立ち、また迷走。
今はやっと落ち着きましたが、イメチェンが好きなので、また変えるかもしれませんｗ
皆様は早々に、ブログのカラージプシーから抜け出せますように！
