サックスブルーとは？色見本と似ている青との違い
サックスブルーはどんな青で、スカイブルーやスチールブルーとどう違うのでしょうか。同じ名前でも、色見本の資料によって濃さや青みが少し違うことがあります。具体的なカラーコードを並べ、Webの背景・見出し・アクセントに使うときの選び方まで説明します。
サックスブルーは、くすみを含んだ落ち着いた青
サックスブルー（Saxe Blue）は、ドイツのザクセン地方に由来する色名で、日本産業規格（JIS）の慣用色名でも「くすんだ青」に分類されています。鮮やかな青やごく薄い水色だけを指す名前ではなく、少しグレーみを帯びた中くらいの明るさの青として捉えると分かりやすいでしょう。
色名とWebの数値は必ずしも一対一ではありません。色名資料のI-IROでは #5B7E96（RGBは赤91・緑126・青150）、color-sample.comでは #5A7993 をサックスブルーの見本にしています。両方ともグレーみを含む青ですが、後者は前者よりわずかに暗い見本です。この2つを同じ色だと考えてコピーするのではなく、使いたい見た目とカラーコードをセットで指定することが大切です。
ここで使うHEX（ヘックス）は、先頭の「#」と6桁の英数字でWeb上の色を指定する表記です。色名に迷ったら、名前だけでなくHEXを確認しましょう。
サックスブルーと似ている青を色見本で比較
- サックスブルー・見本A：#5B7E96 — グレーみを含む落ち着いた青
- サックスブルー・見本B：#5A7993 — 見本Aよりわずかに暗い青
- スカイブルー：#87CEEB — 見本Aより明るく、軽さのある青
- スチールブルー：#4682B4 — 見本Aよりわずかに明るく、青みが強い青
スカイブルー #87CEEB とスチールブルー #4682B4 は、CSS（Webページの見た目を指定する仕組み）でそれぞれ色名とHEXの組み合わせが定義されています。対してサックスブルーは、資料によって見本が異なるため、同じ色名でも数値を確かめる必要があります。
色の見分け方としては、まず明るさ、次に彩度（鮮やかさ）、最後に青と青緑のどちらに寄っているかを比較します。例えば明るく軽い背景ならスカイブルー、落ち着いた色面ならサックスブルー、やや深い青の装飾ならスチールブルーを候補にできます。ただし、実際の印象は隣り合う色や面積でも変わります。
Webで使うなら、文字色と背景色を別に考える
例えば、案内ページの背景を淡い青白 #EAF2F7、本文を濃い青みのグレー #20323C、ボタンの背景を深いブルー #25566B、ボタンの文字を白 #FFFFFF にします。サックスブルーの見本A #5B7E96 は、カードの縁や短い装飾帯に使うと、主役の青らしさを残しつつ文章の邪魔をしにくくなります。
文字と背景の明るさの差を表すコントラスト比を計算すると、サックスブルー #5B7E96 と白 #FFFFFF は約4.31:1です。通常サイズの白文字をこの青の上に載せる場合、WCAG（Webコンテンツを利用しやすくするための指針）のレベルAAが求める4.5:1に届きません。
一方、濃い青みのグレー #20323C と淡い青白 #EAF2F7 は約11.71:1、深いブルー #25566B と白 #FFFFFF は約8.01:1です。本文とボタンには、こうした差を確保できる組み合わせを選びましょう。見出しの大きさや太さ、スマートフォンでの表示も合わせて確認します。
HueRollではHEXコードを入力して色を調整し、選んだ色と白・黒とのコントラストを確認できます。ただし、任意の2色同士の比較やAA・AAAの自動判定はできません。使う色を決めたら、実際に隣接する文字と背景を別の計算手段でも確認してください。