ペトロールブルーとはどんな色？色見本と配色例

ペトロールブルーは、青に緑みを含んだ深い青緑系の色です。ネイビーほど青一色に寄らず、ティールのような緑みも感じられるため、暗い背景にも見出しやボタンにも使えます。ただし、色名に対して決まったHEXコードが一つだけあるわけではありません。資料別の色見本を比べたうえで、海洋展示の案内ページとアウトドア用品の商品カードを例に、文字や背景との合わせ方を紹介します。

ペトロールブルーは青と緑の間にある深い色

英語の「Petrol Blue」を掲載するSchemeColorでは■#0C5678（RGBは赤12・緑86・青120）、フランス語の近い色名「Bleu Petrole」を扱うcolor-sample.comでは■#008092（sRGBは赤0・緑128・青146）を色見本としています。後者は別表記の関連色であり、両サイトが同一の標準色を定めているという意味ではありません。HEX（ヘックス）はWebの色を「#」と6桁の英数字で示すコード、RGBは赤・緑・青の光の成分を数値で示す方式です。

SchemeColorの■#0C5678は比較的青みが強く暗い見本で、Bleu Petroleの■#008092は少し明るく緑みを感じる見本です。2色のコントラスト比は約1.72：1。コントラスト比は色同士の相対的な明るさの差を表し、この2色だけで「選択中」「未選択」を示すには差が足りません。Web制作では名前だけで色を指定せず、採用する見本のHEXを記録しましょう。

海洋展示の案内ページと商品カードで使い分ける

例A：海の生き物を紹介する展示ページ。大きな見出しエリアを濃いペトロールブルー■#0C5678にし、展示名・開催期間は白■#FFFFFFで表示します。背景と白文字の比は約8.02：1です。短い「企画展示」の案内文字にはサンド■#F1D7ADを使い、濃い青との比を約5.75：1にします。「展示の詳細を見る」ボタンはサンド■#F1D7ADの面に濃いチャコール■#283039の文字を載せると約9.58：1です。青緑の背景を広く使いつつ、明るいボタン面で操作場所を分ける構成です。

例B：アウトドア用品のネットショップの商品カード。カード背景は温かいアイボリー■#F8F5EDにして、写真・価格・仕様が見える余白を確保します。商品名にはペトロールブルー■#0C5678を使い、アイボリーとの文字コントラストを約7.36：1にします。長い説明文はチャコール■#283039にし、背景との比は約12.26：1です。「商品を見る」ボタンは濃いペトロールブルー■#0C5678の面に白■#FFFFFFの文字を合わせます。もう一つの見本■#008092は写真のそばの装飾帯に使えますが、説明文や主ボタンまで両方の青緑で混在させない方が整理しやすくなります。

例Aは暗い面を主役に、例Bは明るい面を主役にした提案です。配色の面積は固定の割合ではなく、商品の写真や説明の長さ、最初に見せたい情報によって調整します。

白文字のコントラストと、似た青緑の区別に注意する

白■#FFFFFFとペトロールブルー■#0C5678のコントラスト比は約8.02：1ですが、明るめのBleu Petrole■#008092と白■#FFFFFFでは約4.66：1です。WCAG（Webコンテンツを利用しやすくするための指針）2.2のレベルAAは通常サイズの文字に4.5：1以上、大きな文字に3：1以上を求めています。後者は数値上の通常文字基準をわずかに上回るものの、細い文字や表示条件を考えると、重要な文字には余裕のある濃い色を選ぶ方法が安心です。

また、明るめのBleu Petrole■#008092をアイボリー■#F8F5EDの面に文字として使うと約4.28：1で、通常サイズの文字の基準に届きません。装飾の色面と文章用の文字色は区別しましょう。白■#FFFFFFとアイボリー■#F8F5EDも約1.09：1と近く、入力欄などに必要な境界には使いにくいため、濃いペトロールブルー■#0C5678の枠を付けるとアイボリーに対して約7.36：1の差ができます。操作部品を識別するために必要な視覚情報には、隣接色と原則3：1以上の差が必要です。

HueRollではHEXを入力して色を調整し、選択色と白・黒のコントラストを確認できます。ただし任意の2色を直接比較したり、WCAGの合否を自動判定したりはできません。ここで扱った背景・文字・ボタン・枠線の組み合わせは別途計算しています。