原色大辞典とは?色見本や色調合からお好みの配色が見つかるツールの使い方


原色大辞典は、配色を決める際の参考に役立つ色見本サイトです。色見本や色検索など様々な方法からお好みの配色を探すことができます。また、配色を見つけるだけでなく、色の詳細情報も出力することも可能です。今回は、そんな原色大辞典の使い方についてご紹介していきます。

原色大辞典とは

原色大辞典のトップページ
原色大辞典とは、色の名前とカラーコードが一目でわかる色見本サイトです。原色だけでなく、日本や世界の伝統色、webセーフカラー、パステルカラー、ビビットカラー、モノトーンなどカテゴリが豊富にそろっています。
また、色見本だけでなく、好きな色と色を調合したり、カラーピッカーなど様々な方法から色を探せます。

【URL】 原色大辞典のサイトはこちら

原色大辞典の使い方

次に、原色大辞典の使い方をご紹介致します。

色見本で色を探す

原色大辞典には8種類の色見本が収録されています。
また、各配色に表示されている色見本のカラーコードをクリックすると色の詳細情報を確認できます。

これから8種類の色見本の一部をご紹介いたします。
色見本に表示されているカラーコードを使って、ウェブサイト上の文字や背景など様々な色の設定をすることができるので、各種類見比べてお好みの色探しにお役立てください。

原色大辞典

原色大辞典のページ
原色大辞典には、ブラウザで名前が定義されている140色の色名と16進数が表示されています。

和色大辞典

和色大辞典のページ
和色大辞典には、日本の伝統色465色の色名と16進数が表示されています。
昔ながらのくすんだ色が特徴的です。

洋色大辞典

洋色大辞典のページ
洋色大辞典には、世界の伝統色(カタカナ表記される慣用色)285色と16進数が表示されています。
原色と異なり、やわらかい色が特徴的です。

Webセーフカラー

Webセーフカラーのページ
Webセーフカラーとは、どのOS(オペレーションシステム)においても同じ色に見える216色のことを言います。

パステルカラー

パステルカラーのページ
パステルカラー300色の16進数が表示されています。

ビビッドカラー

ビビッドカラーのページ
ビビッドカラー300色の16進数が表示されています。

モノトーン

モノトーンのページ
モノトーン256色の16進数が表示されています。

メトロカラー

メトロカラーのページ
東京と大阪の地下鉄のシンボルカラーと16進数が表示されています。
地下鉄好きの方は是非ご覧ください。

色検索で色を探す

さきほど、色見本での色探しをご紹介いたしましたが、これから色検索での色の探し方をご紹介いたします。

色検索トップページ
まず、色を探すから色検索のページを開きます。

キーワード検索

キーワード検索
上の色検索とかかれた検索ボックスでは、検索したい色の色名や16進数のカラーコードを入力して色を検索できます。
キーワード検索結果
“blue”と入力すると60件の青色が表示されました。

イメージと色み検索

色検索イメージ、色み選び
下のボックスでは、イメージと色みから色を検索することができます。
色検索イメージ、色み選び結果
イメージを”強い、情熱的な”に設定し、色みを”赤”に設定すると7件の強い、情熱的な赤が表示されました。

カラーピッカーで色を探す

カラーピッカーとは、文字や画像の背景などに設定する色を選択する機能またはダイアログボックスのことをいいます。
これからカラーピッカーを使った色の探し方をご紹介いたします。

カラーピッカー トップページ
まず、色を探すからカラーピッカーのページを開きます。

カラーピッカー 説明
左のカラーピッカーで調べたい色の箇所をクリックします。
そうするとクリックした箇所の色のサンプルが右側に反映されます。

カラーピッカー カラーサンプル
右側のサンプルをクリックすると個別のカラーサンプルページに移動します。

色調合で色を探す

色調合は、その名の通り色を調合することでお好みの色を探すことができます。

色調合トップページ
まず、色を探すから色調合のページを開きます。

色調合 説明1
入力ボックスに調合したいカラーコードを入力するか、カラーピッカーから色を選んでください。
そして、選んだ各色の比率を設定します。

色調合 説明2
色調合では、2色~5色の色を調合できます。
調合する色が決まったら、調合するというボタンををクリックしてください。
※上画面では#ffcead, #ffa763, #f4ff54, #ff4f4f, #6dff5cの5色を全て比率1に設定しました。

色調合 結果
そうすると、調合された色が表示されます。
上の色で検索した結果、#dfc069という肌色のような色になりました。

ぜひみなさんも好きな色を組み合わせてみてください。

配色をチェックする

配色大辞典では、背景色と文字色を設定して、配色のプレビューを確認することができます。
配色大辞典のページ
まず、配色大辞典のページを開きます。

背景色と文字色を選択する
左側にある背景色を選択し、右側にある文字色を選択します。

背景色と文字色映後
そうすると、指定した色が背景と右下の文字色に反映されます。
左下の文字は背景色のカラーコード、右下の文字は文字色のカラーコードです。
※上画面では、背景色をsnow(カラーコード#fffafa)、文字色をmediumslateblue(カラーコード#7b68ee)に設定しました。

サイトを作成する前の配色のご確認等にぜひお使いください。

原色大辞典を活用しよう!

いかがでしたか?原色大辞典は、色見本や色検索など様々な方法から簡単に色の検索ができる便利なツールです。色探しのほかにも、人気の色ランキングや今日のラッキーカラーなどの色で遊ぶコンテンツもあります。
配色でお悩みの際には、ぜひ原色大辞典をご利用してみてくださいね。

【あわせて読みたい!】
配色パターンを決める時参考にしたい色見本・カラーパレット作成ツール26選!

無料でホームページを作れる「ペライチ」

誰でも簡単にホームページ作成を!「ペライチ」

HTMLやCSSでお悩みなら簡単ホームページ作成サービス「ペライチ」におまかせください。
特別な知識は必要ありません。好みのテンプレートを選ぶだけで誰でも簡単にホームページを作ることが出来ます。
誰でも簡単にホームページ作成を!「ペライチ」

ホームページ大学編集者/ 趣味はお散歩です。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする