Blue カラー

青 — 信頼と安定の色

#0000FFBlue

カラー値

HEX#0000FF

RGBrgb(0, 0, 255)

HSLhsl(240°, 100%, 50%)

CSSblue

シェードパレット

#EBF8FF

100

#BEE3F8

300

#63B3ED

500

#4299E1

700

#2B6CB0

900

#1A365D

補色

↔

#FFFF00

Yellow

類似色

#0040FF

Azure Blue

#4000FF

Indigo

CSS使用例

CSS

/* By name */
color: blue;
background-color: blue;

/* By HEX */
color: #0000FF;
background-color: #0000FF;

/* By RGB */
color: rgb(0, 0, 255);

/* By HSL */
color: hsl(240deg, 100%, 50%);

/* With opacity */
color: rgba(0, 0, 255, 0.8);
color: hsl(240deg 100% 50% / 80%);

純粋な青(#0000FF)は画面上でとても強烈に見えます。アクセシビリティのために、白い背景に青いテキストを使う場合はWCAG AA基準を満たす#1D4ED8以上のコントラスト比を確保してください。

青(#0000FF)はデジタルデザインで最もよく使われる色の一つで、信頼・安定・専門性を象徴します。ウェブ黎明期からリンクのデフォルト色として使われ、インタラクティブ性と強く結びついています。純粋な青は非常に彩度が高いため、現代のUIでは#2563EBや#3B82F6のような中間トーンのバリエーションがよく使われます。Facebook、Twitter、PayPal、Samsungなど多くのグローバルブランドが青を主要ブランドカラーとして選んでいます。

主な使用例

▸ハイパーリンク — デフォルトのウェブリンク色(#0000EE)
▸プライマリアクションボタン — 確認、保存、送信など
▸情報アラート — infoメッセージ、ヘルプアイコン
▸データビジュアライゼーション — チャートと図のデフォルト系列色
▸背景グラデーション — 空や海をイメージした背景
▸ブランドアイデンティティ — Facebook、PayPal、IBM、Samsung

Blue カラー

CSS使用例

主な使用例

関連カラー