鳶色とは？読み方と色見本、合わせやすい色

鳶色（とびいろ）はどんな色で、どのような色と組み合わせるとよいのでしょうか。赤みのある落ち着いた茶色という特徴を押さえ、色見本の違いと、Webサイトやバナーで使える配色を紹介します。

鳶色の読み方と色の特徴

鳶色は「とびいろ」と読み、鳥のトビの羽に由来する日本の伝統的な色名です。「鳶茶（とびちゃ）」とも呼ばれ、赤みを帯びた暗い茶褐色を表します。明るいオレンジ系の茶色と比べると深みがあり、真っ赤な色より落ち着いて見えるのが特徴です。

ただし、昔からある色名に、Webで必ず使う一つの数値が決まっているわけではありません。資料によって赤みや明るさに少し違いがあるので、色名だけで指定せず、実際の色見本を見て選びます。

鳶色の色見本と合わせやすい3色

HEX（ヘックス）は、Webで使う色を6桁の16進数で表すカラーコードです。例えば、和色大辞典とI-IROでは、鳶色の色見本を次のように掲載しています。

どちらも赤みのある暗い茶色ですが、わずかに明るさが異なります。以下の配色例では、和色大辞典の■#95483Fを基準色にします。制作中は同じコードを使い続けると、見出しやボタンの色がばらつきません。

アイボリー・チャコールと組み合わせる

読み物や雑貨の紹介ページでは、背景を淡いアイボリー■#FAF5ED、見出しを鳶色■#95483F、本文をチャコール■#2D2A28にします。アイボリーと鳶色のコントラスト比は約5.91:1、アイボリーと本文色は約13.13:1。背景を明るく広く取り、鳶色を見出しに絞ることで、赤茶の印象を生かせます。

装飾には、落ち着いたセージグリーン■#BFD1C0を少量添える方法もあります。赤茶と緑で色みの違いを作りながら、どちらも鮮やかすぎない組み合わせです。セージグリーンを情報カードの背景にするなら、文字をチャコール■#2D2A28にすると約8.89:1になります。ただしカードとアイボリーの境界は弱いので、余白や濃い枠線でも区切ります。

鳶色をバナーの背景にする

告知バナーでは、鳶色■#95483Fを広い背景にし、タイトルにオフホワイト■#FFFDF7を使うと、比率は約6.30:1になります。日時などの補足はセージグリーン■#BFD1C0の面にまとめ、文字をチャコール■#2D2A28にすると約8.89:1です。申し込みボタンはオフホワイト■#FFFDF7の背景に鳶色■#95483Fの文字を載せれば、バナー背景からボタンを区別しやすくなります。

暗く見えるとき・文字が読みにくいときの調整

鳶色の背景にチャコール■#2D2A28の文字を直接置くと、この例ではコントラスト比が約2.22:1しかありません。濃い色同士を重ねるのではなく、明るい文字へ切り替えます。また、淡いセージグリーンとアイボリーの差は約1.48:1です。必須の区切りや操作状態は、この2色の違いだけに頼らないようにします。

WCAG 2.2（Webコンテンツのアクセシビリティに関するガイドライン）のレベルAAでは、通常サイズの文字に4.5:1以上、大きな文字に3:1以上のコントラスト比が求められます。HueRollではHEX入力から配色候補を確認できますが、コントラスト比較は選択色と白・黒に限られます。任意の2色を組み合わせた完成画面は、別途コントラスト比を確認して仕上げましょう。