← 色の辞書(ツール)に戻る

色名の由来・意味と配色の基本

色の辞書とは、色の名前・カラーコード(HEX/RGB/HSL)に加えて、名前の由来色が持つ意味・印象をまとめた辞典です。同じ色でも「なぜその名前なのか」を知ると、配色の意図を言葉で説明でき、デザインの説得力が増します。

このページは、色の辞書に収録した、千年以上の歴史を持つ日本の伝統色250色と、Webでそのまま使えるCSSの名前付き色約140色(gray/grey などの綴り違いは1色に統合)の背景をまとめた読み物です。色相やカテゴリで絞り込み、気になった色はクリックすれば、由来・意味・相性のよい配色・コントラスト比まで確認できます。

日本の伝統色 ― 名前に物語がある色

日本の伝統色は、植物や鉱物の染料・顔料、あるいは自然や暮らしの情景から名づけられてきました。たとえば「茜色」はアカネの根で染めた赤、「浅葱色」はネギの若葉のような薄い青緑、「江戸紫」は江戸で愛された青みの紫を指します。名前を知ることは、その色がまとう文化的な背景を知ることでもあります。

  • 染料・顔料に由来する色:茜色、紅色、藍色、群青、胡粉色 など
  • 植物・花に由来する色:桜色、撫子色、山吹色、菫色、藤色 など
  • 地名・人物・時代に由来する色:江戸紫、利休鼠 など

CSSの名前付き色 ― コードにそのまま書ける色

CSSには crimsonteal のように、HEXの代わりに直接書けるカラーキーワードが147色定義されています(W3C仕様)。color: crimson; のように記述でき、コードの可読性が上がります。これらの名前にも由来があり、crimson はエンジムシ由来の深紅、rebeccapurple はCSS界の故人を追悼して2014年に追加された紫です。

Webデザインでの色の選び方

  1. 基調色(ベース)を決める:面積の大きい背景・余白の色。彩度を抑えた色が扱いやすい。
  2. 主役色(メイン)を1つ:ブランドや世界観を表す色。伝統色から選ぶと独自性が出る。
  3. 差し色(アクセント)を1つ:CTAや強調に。基調色の補色や、彩度の高い色を少量だけ。
  4. コントラストを確認する:文字と背景の組み合わせはWCAGでAA(4.5:1)以上を目安に。本ツールの詳細画面で確認できます。

よくある質問

色の辞書は無料ですか?

はい。完全無料・登録不要です。表示されるカラーコードは商用・個人を問わずそのまま利用できます。

カラーコードはどの形式でコピーできますか?

各色の詳細画面でHEX・RGB・HSLの3形式をワンクリックでコピーできます。一覧カードからはHEXをすばやくコピーできます。

色名や読みがわからなくても探せますか?

漢字の色名・ひらがな・ローマ字・英語名・HEXのいずれでも検索できます。色相やカテゴリでの絞り込みにも対応しています。

文字色として読みやすいか確認できますか?

詳細画面で、白背景・黒背景とのコントラスト比とWCAG等級(AA/AAA)を表示します。アクセシブルな配色の判断に使えます。

収録している色数は?

日本の伝統色250色と、CSSの名前付き色約140色(gray/grey などの綴り違いは1色に統合)を収録しています。今後も拡充予定です。

関連ツール

← 色の辞書(ツール)を使う