色の辞書の使い方｜日本の伝統色とCSS名前付き色を由来から引けるツール

色の辞書とは、色の名前とカラーコード（HEX/RGB/HSL）に加えて、名前の由来と色が持つ意味・印象をまとめて引ける辞典です。このツールは、千年以上の歴史を持つ日本の伝統色と、Webにそのまま書けるCSSの名前付き色を、あわせて約240色収録しています。色名・読み・HEXで検索し、気になった色をクリックすれば、由来・意味・相性のよい配色・コントラスト比まで確認できます。

「この赤、なんという名前だっけ」「tealって結局どんな色」——配色を考えるとき、色の名前やコードを思い出せずに手が止まることがあります。逆に、HEXは分かっても、その色がどんな由来でどんな印象を与えるのかまでは、なかなか調べられません。色を「コード」としてだけ扱っていると、配色の意図を言葉で説明できず、デザインの説得力が弱くなりがちです。

この記事では、CodeQuestが公開している色の辞書の使い方を解説します。伝統色とCSS名を横断して検索・絞り込みする方法、各色の詳細でわかること（由来・意味・配色・コントラスト）、そして実際のWebデザインでの色の選び方までを、操作に沿って紹介します。ブラウザだけで完結し、登録は不要です。

日本の伝統色とCSSの名前付き色を、同じ画面で引く

このツールの特徴は、性格の異なる2系統の色を1つの辞典として横断的に引ける点です。ひとつは茜色や浅葱色のような日本の伝統色。もうひとつは crimson や teal のように、CSSへそのまま書ける名前付き色（カラーキーワード）です。

どちらも、名前そのものに由来や物語を持つ色です。伝統色は染料・顔料や自然の情景から、CSS名は鉱物や生き物、地名などから名づけられてきました。色の辞書は、この2系統を同じカードの形で並べ、由来・意味・カラーコード・コントラストを同じ手順で確認できるようにしています。「和の色を探す」と「コードに書ける色を探す」を、ツールを切り替えずに行き来できるのが狙いです。

このツールでできること

色の辞書は、色を「探す・知る・コピーする」ことに特化しています。主な機能は次のとおりです。

入力やコピーはすべてブラウザ内で処理され、サーバーには送信されません。表示されるカラーコードは、商用・個人を問わずそのまま利用できます。

使い方：3ステップで色を引く

操作はおおきく3ステップです。むずかしい設定はありません。

1. 探す： 上部の検索欄に色名・読み・HEXを入れるか、カテゴリと色相のボタンで一覧を絞り込みます。漢字でもひらがなでも、ローマ字や英語名でも引けます。
2. 選ぶ： 気になった色のカードをクリックすると、詳細が開きます。由来・意味・相性のよい配色・コントラスト比をその場で確認できます。
3. コピーする： 詳細画面でHEX・RGB・HSLのうち必要な形式をクリックしてコピーします。一覧のカードに表示されるアイコンからは、HEXだけをすばやくコピーできます。

コピーすると画面下に小さな通知が出るので、コードが取れたことを目で確認できます。コードを書く前の「色を決める」段階で、名前から入っても、雰囲気（色相）から入っても、同じようにたどり着けるのがこのツールの使い心地です。

検索と絞り込み：名前でも雰囲気でも探せる

色の探し方は、大きく「名前で検索する」「絞り込みで眺める」の2通りです。色名がはっきり分かっているなら検索、ぼんやりとした雰囲気から選びたいなら絞り込みが向いています。

検索欄は、ひとつの色について複数の手がかりに対応しています。たとえば「あさぎ」「浅葱」「asagi」のどれでも浅葱色にたどり着けます。カタカナで入力しても自動でひらがなに読み替えるので、読みの表記ゆれを気にせず探せます。HEXは # を付けても付けなくても検索できます。

カテゴリと色相は組み合わせられます。たとえば「CSS名 × 青」に絞れば、コードに書ける青系の名前付き色だけが並びます。「和の赤を探したいが名前は知らない」なら「日本の伝統色 × 赤」で一覧を眺めるのが近道です。

色の詳細でわかること

カードをクリックすると、その色の詳細が開きます。ここがこのツールのいちばんの中心で、ただのカラーコード表とは違うところです。詳細では次の情報を確認できます。

• カラーコード（HEX／RGB／HSL）： 3形式をそれぞれワンクリックでコピー。HEXは大文字で表示され、用途に合わせて選べます。
• 名前の由来： その色がどの染料・鉱物・情景から名づけられたかを短く解説。配色の意図を言葉にするときの裏付けになります。
• 色の意味・印象： その色がどんな印象を与え、どんな場面に向くかをまとめています。
• 相性のよい配色： その色に合わせやすい色を提示。クリックでコピーでき、配色のたたき台にできます。
• コントラスト比： 白背景・黒背景それぞれとのコントラスト比と、WCAGの等級を表示。文字色として読みやすいかの判断に使えます。

つまり「この色は何という名前で、なぜその名前で、どんな印象を持ち、何と合わせると映え、文字色として使えるか」までを、ひとつの画面でまとめて把握できます。コードを取るだけでなく、その色を選んだ理由を説明できるようになるのがねらいです。

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

日本の伝統色は、植物や鉱物の染料・顔料、あるいは自然や暮らしの情景から名づけられてきました。名前を知ることは、その色がまとう文化的な背景を知ることでもあります。色の辞書では、由来のはっきりした代表的な伝統色を収録しています。

• 染料・顔料に由来する色： 茜色はアカネの根で染めた赤、藍色や群青は青の染料・顔料に由来します。
• 植物・自然に由来する色： 浅葱色はネギの若葉のような薄い青緑、桜色や山吹色は花の色からとられています。
• 地名・時代に由来する色： 江戸紫は江戸で愛された青みの紫で、土地や時代の好みが名前に残っています。

伝統色は彩度や明度が落ち着いているものが多く、Webデザインでは世界観を出す主役色やアクセントに向きます。たとえば茜色を差し色にするだけで、画面に和の温かみが生まれます。名前の由来まで添えてデザインを説明できると、クライアントへの提案にも説得力が出ます。

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

CSSには crimson や teal のように、HEXの代わりに直接書けるカラーキーワード（名前付き色）があります。MDNのリファレンスによると、CSSの名前付き色は <named-color> として147色が定義されています（MDN: named-color）。color: crimson; のように書け、HEXより意味が読み取りやすくなります。

/* HEXで書くと色の見当がつきにくい */
.btn { background: #dc143c; }

/* 名前付き色なら「深紅」だと読み取れる */
.btn { background: crimson; }

/* teal（鴨の羽の青緑）も一語で意味が伝わる */
.card { border-color: teal; }

これらの名前にも由来があります。crimson はエンジムシ（カイガラムシ）から採った深紅、teal はコガモの羽に見られる青緑が語源です。なかでも rebeccapurple は、Webの草分けだった故Eric Meyer氏の娘Rebeccaを追悼して2014年にCSSへ追加された紫として知られています。色の辞書では、これらの名前の背景もあわせて引けます。

なお、名前付き色には gray と grey のような綴り違いの同一色があります。色の辞書ではこうした重複を1色に統合して整理しているため、収録数は仕様上の147色より少なめの約140色になっています。

配色とコントラスト ― 読みやすさをWCAGで確かめる

きれいな色を選んでも、背景とのコントラストが足りないと文字が読めません。色の辞書の詳細画面では、その色を白背景・黒背景に置いたときのコントラスト比と、WCAG（Webアクセシビリティのガイドライン）の等級を表示します。文字色として使えるかどうかを、感覚ではなく数値で判断できます。

W3CのWCAG 2.1（達成基準1.4.3）では、通常サイズの文字と背景のコントラスト比を4.5:1以上（AA）、大きな文字は3:1以上とすることが求められています（W3C: Understanding SC 1.4.3）。より厳しいAAAでは7:1以上です。色の辞書はこの基準に沿って等級を出しています。

たとえば淡い色を白背景の文字に使おうとすると、たいていコントラストが足りません。詳細画面で「白背景では基準を満たさないが、黒背景ならAA」と分かれば、文字色ではなく背景色に回す、濃い同系色に替える、といった判断ができます。色を決める段階でここまで確認しておくと、あとから読みづらさで作り直す手間を減らせます。

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

色をたくさん知っても、やみくもに並べると画面はまとまりません。配色は「色数を絞り、役割を決める」のが基本です。色の辞書で気になる色を見つけたら、次の順番で組み立てると失敗しにくくなります。

1. 基調色（ベース）を決める： 面積の大きい背景や余白の色。彩度を抑えた色のほうが扱いやすく、白黒灰の絞り込みが役立ちます。
2. 主役色（メイン）を1つ： ブランドや世界観を表す色。伝統色から選ぶと独自性が出ます。
3. 差し色（アクセント）を1つ： CTAや強調に。主役の補色や、彩度の高い色を少量だけ効かせます。
4. コントラストを確認する： 文字と背景の組み合わせは詳細画面のコントラスト比でAA以上を目安にチェックします。

主役色を選ぶときは、各色の詳細にある「相性のよい配色」が出発点になります。提示された色をコピーして、基調色や差し色の候補として並べてみると、配色の全体像が早くつかめます。画面の中の写真やイラストから色を拾いたいときは、画像カラーピッカー で抽出した色と組み合わせると、素材に馴染む配色を作れます。

他の色・配色ツールとの使い分け

色の辞書は「名前と由来から色を引く」辞典です。配色まわりには目的の違うツールや記事があるので、やりたいことに合わせて選んでください。

写真やバナーなど既存の素材から色をそろえたいなら 画像カラーピッカー が便利です。配色そのものの考え方を体系的に押さえたいときは 色彩設計の基本 が参考になります。色を決めたあと、それをCSSのレイアウトやUIに落とし込む段階では CSS実装テクニック集 も合わせてどうぞ。

よくある失敗・注意点

色選びでつまずきやすいポイントを3つにまとめます。

• 色名のニュアンスで色を選んでしまう： 「藍色」「紺色」のように近い名前は実際の色が紛らわしいことがあります。名前だけで決めず、必ずスウォッチとHEXで実際の色を確かめてください。
• コントラストを確認せず文字色にする： 淡い色や中間色は白背景で読みづらくなりがちです。文字に使う色は、詳細画面のコントラスト比でAA（4.5:1）以上かどうかを必ず確認しましょう。
• 色を盛りすぎる： 美しい色を見つけるとつい多用したくなりますが、色数が増えるほど画面はまとまりを失います。主役と差し色を各1色に絞り、残りは基調色の濃淡で構成すると整います。

よくある質問（FAQ）

Q. 色の辞書は無料ですか？

はい。完全無料で、登録も不要です。表示されるHEX/RGB/HSLのカラーコードは、商用・個人を問わずそのまま利用できます。入力やコピーはすべてブラウザ内で処理され、サーバーには送信されません。

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

はい。漢字の色名・ひらがなの読み・ローマ字・英語名・HEXのいずれでも検索できます。カタカナで入力しても自動でひらがなに読み替えます。名前がまったく分からないときは、カテゴリ（伝統色／CSS名）と色相（赤・青など）の絞り込みで一覧を眺めて探せます。

Q. 日本の伝統色とCSSの名前付き色はどう違いますか？

日本の伝統色は、染料・顔料や自然の情景から名づけられてきた色で、茜色や江戸紫のように名前そのものに物語があります。CSSの名前付き色は crimson や teal のように、HEXの代わりにそのままコードへ書ける色の名前です。色の辞書では両方を同じ画面で引け、どちらも由来とコードを確認できます。

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

各色の詳細画面で、HEX・RGB・HSLの3形式をワンクリックでコピーできます。一覧のカードに表示されるアイコンからは、HEXだけをすばやくコピーできます。コピーすると画面下に通知が出るので、確実に取れたか確認できます。

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

はい。各色の詳細画面で、白背景・黒背景それぞれとのコントラスト比と、WCAGの等級（AA／AAA）を表示します。通常の本文ならAA（4.5:1）以上が目安です。アクセシブルな配色を選ぶ判断材料に使えます。

Q. CSSの名前付き色は何色ありますか？

MDNのリファレンスによると、CSSの名前付き色（<named-color>）は147色定義されています。ただし gray と grey のような綴り違いの同一色が含まれるため、色の辞書ではそれらを1色に統合し、約140色として収録しています。

まとめ

• 色の辞書は、日本の伝統色とCSSの名前付き色をあわせて約240色を、名前・由来・カラーコードで横断的に引ける無料ツール
• 漢字・ひらがな・ローマ字・英語名・HEXで検索でき、カテゴリと色相で絞り込める
• 詳細画面では由来・意味・相性のよい配色・コントラスト比（WCAG等級）まで確認でき、HEX/RGB/HSLをワンクリックでコピーできる
• 名前の由来を知ると、配色の意図を言葉で説明でき、デザインの説得力が増す
• ブラウザ完結・登録不要で、生成したカラーコードは商用利用も可能

色を「コード」から「名前と物語」で扱えるようになると、配色は一段強くなります。まずは知っている色の名前をひとつ検索して、その由来とコントラストを確かめるところから試してみてください。

関連記事

画像からWEBデザイン用カラーパレットを自動生成【無料ツール】

色彩設計の基本｜Webデザインに役立つ配色理論とカラーパレット実装例｜アクセシビリティ対応

CSS実装テクニック集【基礎・レイアウト・アニメーション・設計手法】