English
色の辞書

色の辞書

日本の伝統色CSSの名前付き色をあわせて約240色。色名・読み・カラーコードに加え、名前の由来色の意味、相性のよい配色までを一冊に。検索して、選んで、そのままコピーできます。


カードをクリックで詳細・由来を表示

色の名前の由来と意味を知ると、配色は強くなる

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

このツールは、千年以上の歴史を持つ日本の伝統色100色と、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)を表示します。アクセシブルな配色の判断に使えます。

収録している色数は?

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

関連ツール