【誰でも簡単!】ときめく配色パターンの探し方&その色をサイトに反映する方法(カラーコードとRGB値)

Cocoonスキン配色
この記事は約5分で読めます。

「サイトのカラーを変えて、ちょっとイメージを変えてみたい」と思ったことはありませんか?

でも、無数にある色の中から 自分の求めている色をどうやって探せばいいのか?

自分の求めている色を見つけても、その色をどうやってサイト上に反映させればいいのか?

どの色同士を組み合わせたら、カッコいい配色になるのか?

などなど、色について悩んでいる方って結構多いと思います。

その証拠に、配色(色の組み合わせ)についての法則やテクニックを紹介するサイトもたくさんありますよね。

知れば知るほど、奥が深くておもしろいのが “ 色の世界 ” 。

色が人に与える影響は意外と大きくて、だからこそ、あらゆるデザインにおいて、使用する色の選択次第で、そのデザインの雰囲気も印象もイメージも大幅に変えることが出来てしまいます。

そんな色のチカラを使いこなすには、配色の法則やテクニックの知識があったほうが、もちろん有利。

でも今回は、配色の法則やテクニックなんて難しいことは一切無し。

無数にある配色パターンの中から、ときめく配色パターンを選ぶだけ!

そして、その配色パターンの色をサイト上に反映させるだけ!

その方法でも充分に色のチカラを引き出して、あなたの求めるイメージを作り上げることが出来ます!

それでは、「誰でも簡単!ときめく配色パターンの探し方&その色をサイトに反映する方法」を紹介していきます。

実は私、カラーコーディネーター検定&色彩検定 の有資格者で、“ 色の世界 ” についてはちょっと詳しいのです。

 

1.ときめく配色パターンをみつけよう!

『自分で使いたい色を選んでみたけれど、なんかイメージ通りの配色にならない』なんてことはよくあること。

使いたい色の数が多ければ多いほど、上手に色を組み合わせることは難しくなっていきます。

それぞれの色の持つイメージや、それぞれの色を使う面積量などを考えて、上手にバランスを取ってカッコよくデザインしていくのは、かなりテクニックがいる作業なのです。

なので、どんなデザインでも、使う色は4色以下に厳選した方がまとまりがよく統一感も出やすいです。

それでも、無数にある色の中からイメージ通りの4色を厳選すること自体、結構難しいですよね。

そこで、おすすめなのが

すでに色が組み合わされている配色パターンの中から、自分のときめく配色パターンを選んでみる

という方法です。

こちらのサイトでは、たくさんの配色パターンが紹介されています。

Color Hunt – Color Palettes for Designers and Artists

画像出典:カラーハント

これはほんの一部で、他にも無数に配色パターンが紹介されています。

まずは、こちらのサイトからときめく配色パターンを選んでみましょう。

このサイトなら、きっとときめく配色パターンに出会えると思います。

 

 

2.配色パターンの色をサイト上に反映させよう!

➊.色のカラーコードを確認しよう

ときめく配色パターンを見つけたら、その色の上にカーソル(矢印のマーク)を合わせてみましょう。

画像出典:カラーハント

すると、上記のようにコードが表示されます。(赤で囲んだところ)

これがその色のカラーコードになります。

このカラーコードをコピーしておきましょう。(カラーコードをクリックするとコピー出来ます。)

 

 

➋.色をサイト上に反映させよう(カラーコードが使える場合)

サイト作成の設定画面の「色を選択」するところを開きます。

ブログ作成ソフトのワードプレスだとこんな感じです。

①の「色を選択」をクリックすると、色を選べる画面が開きます。

②のところにコピーしたカラーコードを貼り付けるとその色が選択されます。

③の「変更をまとめて保存」をクリックして保存を完了すると、サイト上にその色が反映されます。

 

 

➌.色をサイト上に反映させよう(カラーコードが使えない場合)

もしかしたら「色を選択」する画面を開いても、カラーコードを貼り付ける場所がないことがあるかもしれません。

赤(R)緑(G)青(B) のRGB値で色を選択する場合などです。

その場合は、こちらのサイトでカラーコードをRGB値に変換します。

カラーサイト.com (color-site.com)

画像出典:カラーサイト.com

①のところにコピーしたカラーコードを貼り付けると、すぐに②にRGB値が表示されます。

反映させたいところの「色を選択」する画面を開いて、表示されたRGB値を入力します。

マイクロソフトのワードやエクセルの場合は、こんな感じです。

③④の手順でRGB値を入力してOKをクリックすると、設定した色が選択されます。

 

 

3.あとがき

「誰でも簡単!配色パターンの探し方&その色をサイト上に反映する方法」はいかがでしたか?

サイトのイメージを印象付けるカラーパーツは、おおまかに以下の5点です。

・ヘッダー色(サイト上部のサイト名が入る部分)
(*フッターもヘッダーと同じ色にした方が統一感が出ます。)
・グローバルナビ色
・背景色
・サイトキーカラー(記事内の見出しの色)
・文字色(サイト名、グローバルナビ文字、見出しの文字 など)

選んだ配色パターンの4色を、自分のサイトのどの部分に取り入れるかは あなた次第。

配色パターンの4色を全部取りいれてもいいし、配色パターンの4色の内の2色でも3色でも大丈夫です。

それよりも大事なのは、色を変更しても「読みやすいか」「見やすいか」という点です。

いくらサイトの配色をカッコよく仕上げても、文字色が薄すぎて読みづらかったりしたら元も子もないですよね。

「読みやすいか」「見やすいか」という点にも気を付けながら、ときめく配色パターンを上手に取り入れて、カッコいいオリジナルサイト作りを楽しんでみてください☆

 

 

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