piapia123
ja

中国の伝統色

早見表

処理はすべてブラウザ内で完結します。データは送信されません

入力
ファイルをここにドロップすると読み込めます
出力

中国の伝統色名は色番号ではなく、たとえです。色はそれが取られたものの名で呼ばれます —— 花、鉱物、染色の工程、雨上がりの空。そのため両方向に困りごとが生まれます。頭の中に「あの灰色がかった淡い青」があるのに、伝統色での呼び名も色値も分からない。あるいは文書やデザインファイルでその名に出会い、「これは実際どの色なのか」を確かめたい。本ツールはその対照表で、161 の色名を九つの系統に分けています。名前からの検索に加えて、色値から名前を引くこと(`#9d2933` を貼れば「これはどの色か」を答えます)と、別名からの検索(複数の別名が同じ色を指します)ができます。結果で主役になるのは色見本です —— 画面の上に並んだ 16 進コードは、色が見えて初めて意味を持ちます。 さらに各色について、上に載せる文字を黒と白のどちらにすべきかも示します。これは色値を得た直後に必ず下す判断であり、目分量で決めてよいものではありません。中間調の赤は黒が 5.5、白が 3.8 で、当てずっぽうでは外しやすく、外すと文字が読めなくなります。

機能

  • 中国の伝統色 161 色を九系統(赤・黄・緑・青・蒼・水・灰白・黒・金銀)に分類
  • 各色について 16 進・RGB・HSL の三通りを表示。スタイルシートにそのまま貼れます
  • 色見本を結果行に直接描画。色番号を頭の中で色に変換する必要はありません
  • 名前から検索して、その色のすべての値を取得
  • 色値からの逆引き。`#9d2933` を貼れば色名が分かります
  • 別名からも検索可能。複数の呼び方が同じ色を指しています
  • 部分一致に対応。一字入力すれば、その字を含む色名をすべて一覧します
  • 各色について黒と白のどちらの文字が読みやすいかを WCAG コントラスト比と AA 適合の有無つきで表示
  • 161 の色名は検索できるドロップダウンに。名前が思い出せないときは系統ごとに眺められます
  • 空欄で全色を一覧。色見本帳として使えます
  • 貼り付け耐性。例文の括弧や全角引用符がついても検索結果は変わりません
  • 色値は行ごとにコピーでき、デザインファイルやコードに貼れます

使い方

  1. 入力欄に色名を打ちます。名前が思い出せないときはドロップダウンを開き、系統ごとに探してください
  2. または色値(#9d2933 など)を貼り付けて、その色名を逆引きします
  3. 結果に色見本・16 進・RGB・HSL・系統・別名、そして載せるべき文字色が出ます
  4. 空欄にすると 161 色すべてを系統ごとに一覧します

よくある質問

同じ色名なのに、サイトによって色値が違うのはなぜですか?
伝統色名はもともと色番号ではないからです。 それらは形容であり、たとえば雨上がりの空の青を指しますが、その空の濃さは人によって違います。色名と色値の対応は近代の出版物が慣習的に決めたもので、色見本帳によって数段階ずれます(とくに淡く灰色がかった系統で顕著です)。したがって本ツールが示すのは広く使われている電子近似値であり、色を見分ける・名づける・着想を得るには十分ですが、印刷や製造の色合わせの基準にはしないでください。実際に製造するものには、物理的な色見本帳をお使いください。
このデータはどこから来ていますか?
色名・色値・系統分類は、オープンソースプロジェクト zerosoul/chinese-colors(MIT ライセンス)の `colors.json` に由来します。取り込んだのは「名前・色値・系統」という三つの事実データと、データセットが明示している別名だけです。説明文は取り込んでいません —— あちらには印刷インクの配合に対する著者の個人的な判断が混ざっており、利用者に見せるべきものでも、こちらが責任を負うべきものでもありません。別名は同一色の別称に限り、植物名や顔料名は除外しています。薬草の名前を検索して色にたどり着くのを避けるためです。
「載せる文字は黒か白か」はどうやって求めていますか?
その色と純黒・純白それぞれの WCAG 2.1 コントラスト比を計算し、高い方を採用して、AA の基準である 4.5:1 に届くかどうかを示します。⚠️ ここで使うのは WCAG の相対輝度(sRGB の線形化の後に加重和)であり、`r*0.299+g*0.587+b*0.114` のような「知覚輝度」の簡便式ではありません。後者は暗い色と中間調で明らかに楽観的な値が出ますが、これは文字色を決めるために使う数値です。中間調はまさに二つの選択が接近し、目分量では外しやすい領域です。
英語の色名で検索できますか?
できません。ここにあるのは 161 色の中国語の色名で、定まった英訳がほとんど存在しません。「sky blue」のように訳してしまうと、いくつかの色の区別が失われますが、その区別こそが探しもののはずです。そのため英語ページでも色名は中国語のまま表示し、ラベルと説明だけを翻訳しています。英語の色名で探したい場合は、色変換のツールをお使いください。
一字入力しただけで多くの色が出るのはなぜですか?
色名が共通の字を軸に作られているためです。複数の赤が同じ字を共有しており、しかも系統が異なるため、すべてが一致します。部分一致ではそれをすべて並べます。一つに絞りたいときは色名を最後まで入力し、系統ごとに眺めたいときは空欄にしてください。

関連ツール