Cookie の使用について.本サイトでは、基本機能の提供に必要な必須 Cookie を使用しています。さらに、同意いただいた場合に限り、アクセス解析 Cookie を利用して利用状況を把握し、サービス改善に役立てます。詳しくは .
日本の伝統色一覧|和の配色・カラーコード
このツールは使いやすかったですか?
フィードバックは改善に役立ちます
日本の伝統色の名前とカラーコードを検索。Webサイト、ポスター、インテリアの配色に活用できます。
概要
解決できる課題、処理の仕組み、データの範囲を確認できます。
このページでは、日本の色名を含む48件の色カードを一覧し、色名、かな読み、色見本、HEX、RGBを確認できます。赤・黄系・緑・青・紫・中立色の系統ボタンで候補を絞り、検索欄では漢字の色名、読み、カラーコードの一部を探せます。カードを選ぶと、その色のHEX値をコピーできます。
HEXは「#」に続く16進数で画面色を表す書き方です。たとえば藍色のカードは #165E83、対応するRGB表示は rgb(22, 94, 131) です。6桁のHEXでは先頭から赤・緑・青の値を2桁ずつ読みます。W3CのCSS Color Module Level 3は、CSSの色指定としてHEXとrgb()を説明しています。W3C CSS Color Module Level 3(2026年10月1日確認)。
ここに表示される色名と数値は、この一覧に収録されたデジタル上の対応です。色名の歴史的由来を解説したり、特定の書籍・規格に基づく唯一の色値を認定したりするものではありません。
使い方
手順に沿って操作し、例を使って入力と結果を確認します。
色系統のボタンで一覧を絞ります。系統は、すべて、赤、黄・茶、緑、青、紫・藤、白・黒に分かれています。
検索欄に色名、かな読み、またはHEXの一部を入力します。例として「藍色」「あいいろ」「165E83」のいずれでも候補を探せます。HEXの先頭に付ける「#」はあってもなくても検索できます。
色見本とカードに記された名称、読み、HEX、RGBを照合します。近い色名が複数あるときは、表記と色見本の両方で確認してください。
使う色のカードを選び、コピーされたHEX値をデザインソフトやCSSの色欄へ貼り付けます。画面に出るRGBは値の確認用で、カード選択時にコピーされるのはHEXです。
検索結果が0件なら、色系統を「すべて」に戻すか、長い色名・読みの一部だけで再検索します。入力を消すボタンを使えば一覧へ戻れます。
活用例
仕事や日常の流れの中での活用方法を紹介します。
見出しやボタンに使いたい和色を探し、HEXをスタイル設定へ貼り付けます。色名だけで共有せず、コードも一緒にメモすると、制作メンバー間で同じデジタル値を扱えます。
テーマに合わせた色を系統別に見比べ、資料の背景・見出し・図表に使う候補を選べます。色名と読みも併記すると、口頭で色を相談するときに伝えやすくなります。
候補の色名、HEX、用途をひと組にしてチームの仕様書へ記録します。似た色名を選んだ場合も、色値を残しておけば後から同じ値を再設定できます。
Q&A
よくある疑問や迷いやすい点をまとめて確認できます。
いいえ。掲載は48件の色カードです。伝統色全体の完全な目録や、公式に定められた標準色表としては扱えません。
同じ色を異なる形式で表します。たとえば #165E83 は rgb(22, 94, 131) と対応します。HEXはCSSでも使えるデジタル色指定の一つです。
このページの数値は掲載カードで使うデジタル値です。別資料の色値と同一であることや、歴史的な実物色を再現することは保証されません。制作物では参照元を決め、色名と採用コードをセットで管理してください。
HEXコードがコピーされます。カードにはRGB値も表示されるため、RGB形式が必要な場合は表示を確認して利用先へ入力してください。
注意
利用範囲、結果の制限、必要な注意点を事前に確認します。
画面上の色見本は、ディスプレイや表示環境によって見え方が異なります。HEXとRGBは画面用の色を記録・指定するのに便利ですが、そのまま印刷、塗料、布、工芸素材の仕上がりを保証するものではありません。実物制作や発注では、用途に対応した色票や印刷見本を確認してください。
色を文字や状態の唯一の手がかりにせず、ラベルや形状も併用します。Web本文では前景色と背景色の組み合わせを確認してください。W3C WCAG 2.2の説明では、通常の文字のコントラスト比は4.5:1以上、大きな文字は3:1以上が基準です(W3C「コントラスト(最低限)」解説、2026年10月1日確認)。この色一覧はコントラスト判定を行いません。
関連
関連ツール、特集、利用可能なAPIを探せます。