カラー

カラーパレットの全範囲はグラフィックやイラストに使用され、ユニークでモダンな組み合わせのほか、モノクロマティックなコントラストも探求しています。特定のトピックや強調したいポイントを際立たせるために活用できます。

F5 パレットは、7 つのプライマリブランドカラーにブラックとホワイトを加えた構成で、それぞれに 4 つのティント／シェードバリアントを持ち、合計 45 色 となっています。このページは、テーマ開発時にブランドカラーを Starlight CSS カスタムプロパティにマッピングするための唯一の信頼できる情報源です。

プライマリカラー

#e4002b

F5 Red—f5-red

#f29a36

Tangerine—f5-tangerine

#0e41aa

River—f5-river

#ab2782

Raspberry—f5-raspberry

#009639

Jade—f5-jade

#62228b

Eggplant—f5-eggplant

#0072b0

Bay—f5-bay

#ffffff

White—f5-white

#000000

Black—f5-black

名前	HEX	RGB	CMYK	LESS	PMS	CSS 変数
F5 Red	`#e4002b`	228, 0, 43	0, 100, 81, 11	`monza`	185	`--f5-red`
Tangerine	`#f29a36`	242, 154, 54	0, 36, 78, 5	`carrot-orange`	1375	`--f5-tangerine`
River	`#0e41aa`	14, 65, 170	92, 62, 0, 33	`tory-blue`	293	`--f5-river`
Raspberry	`#ab2782`	171, 39, 130	0, 77, 24, 33	—	241	`--f5-raspberry`
Jade	`#009639`	0, 150, 57	100, 0, 62, 41	`fun-green`	355	`--f5-jade`
Eggplant	`#62228b`	98, 34, 139	29, 76, 0, 45	`honey-flower`	2617	`--f5-eggplant`
Bay	`#0072b0`	0, 114, 176	100, 35, 0, 31	—	7461	`--f5-bay`
White	`#ffffff`	255, 255, 255	0, 0, 0, 0	`alabaster`	—	`--f5-white`
Black	`#000000`	0, 0, 0	60, 50, 40, 100	`black`	Black	`--f5-black`

LESS 名に関する注記: ブランドセンターでは Raspberry が tory-blue、Bay が honey-flower と表示されていますが、これらはそれぞれ River および Eggplant エントリからのコピーアンドペーストミスです。誤った値の伝播を防ぐため、上記では — としています。

セカンダリカラー（ティント & シェード）

各プライマリカラーには、最も明るいもの（レベル 1）から最も暗いもの（レベル 4）の順に 4 つのバリアントがあります。

ブランドセンターはセカンダリカラーに LESS 変数名を割り当てています。Cloud Red および Tangerine バリアントには固有の意味のある名前があります。その他のすべてのカラーグループでは同じプレースホルダー名（wewak、froly、carmine、venetian-red）が表示されます — これらはブランドプラットフォームのテンプレートデフォルトであり、完全性のために以下に記載していますが、正規の識別子として依存すべきではありません。

F5 Red

#e4002b

F5 Red (ベース)—f5-red

#f7b2bf

レベル 1—f5-red-1

#f06680

レベル 2—f5-red-2

#a70020

レベル 3—f5-red-3

#720016

レベル 4—f5-red-4

レベル	HEX	RGB	CMYK	LESS
1（最も明るい）	`#f7b2bf`	247, 178, 191	0, 28, 23, 3	`wewak`
2	`#f06680`	240, 102, 128	0, 57, 47, 6	`froly`
3	`#a70020`	167, 0, 32	0, 100, 81, 35	`carmine`
4（最も暗い）	`#720016`	114, 0, 22	0, 100, 81, 55	`venetian-red`

Tangerine

#f29a36

Tangerine (ベース)—f5-tangerine

#ffe4c4

レベル 1—f5-tangerine-1

#ffbd61

レベル 2—f5-tangerine-2

#a35700

レベル 3—f5-tangerine-3

#7a4100

レベル 4—f5-tangerine-4

レベル	HEX	RGB	CMYK	LESS
1（最も明るい）	`#ffe4c4`	255, 228, 196	0, 11, 23, 0	`tequila`
2	`#ffbd61`	255, 189, 97	0, 26, 62, 0	`koromiko`
3	`#a35700`	163, 87, 0	0, 47, 100, 36	`chelsea-gem`
4（最も暗い）	`#7a4100`	122, 65, 0	0, 47, 100, 52	`cinnamon`

River

#0e41aa

River (ベース)—f5-river

#b7c6e5

レベル 1—f5-river-1

#6e8dcc

レベル 2—f5-river-2

#0b3180

レベル 3—f5-river-3

#072155

レベル 4—f5-river-4

レベル	HEX	RGB	CMYK	LESS
1（最も明るい）	`#b7c6e5`	183, 198, 229	0, 28, 23, 3	`wewak`
2	`#6e8dcc`	110, 141, 204	0, 58, 47, 6	`froly`
3	`#0b3180`	11, 49, 128	0, 100, 81, 35	`carmine`
4（最も暗い）	`#072155`	7, 33, 85	0, 100, 81, 55	`venetian-red`

Raspberry

#ab2782

Raspberry (ベース)—f5-raspberry

#e6bed9

レベル 1—f5-raspberry-1

#cd7db4

レベル 2—f5-raspberry-2

#801d62

レベル 3—f5-raspberry-3

#561441

レベル 4—f5-raspberry-4

レベル	HEX	RGB	CMYK	LESS
1（最も明るい）	`#e6bed9`	230, 190, 217	0, 28, 23, 3	`wewak`
2	`#cd7db4`	205, 125, 180	0, 58, 47, 6	`froly`
3	`#801d62`	128, 29, 98	0, 100, 81, 35	`carmine`
4（最も暗い）	`#561441`	86, 20, 65	0, 100, 81, 55	`venetian-red`

Jade

#009639

Jade (ベース)—f5-jade

#b2dfc4

レベル 1—f5-jade-1

#66c088

レベル 2—f5-jade-2

#00712b

レベル 3—f5-jade-3

#004b1d

レベル 4—f5-jade-4

レベル	HEX	RGB	CMYK	LESS
1（最も明るい）	`#b2dfc4`	178, 223, 196	0, 28, 23, 3	`wewak`
2	`#66c088`	102, 192, 136	0, 58, 47, 6	`froly`
3	`#00712b`	0, 113, 43	0, 100, 81, 35	`carmine`
4（最も暗い）	`#004b1d`	0, 75, 29	0, 100, 81, 55	`venetian-red`

Eggplant

#62228b

Eggplant (ベース)—f5-eggplant

#cdabe3

レベル 1—f5-eggplant-1

#9c59c9

レベル 2—f5-eggplant-2

#822cb8

レベル 3—f5-eggplant-3

#41175d

レベル 4—f5-eggplant-4

レベル	HEX	RGB	CMYK	LESS
1（最も明るい）	`#cdabe3`	205, 171, 227	0, 28, 23, 3	`wewak`
2	`#9c59c9`	156, 89, 201	0, 58, 47, 6	`froly`
3	`#822cb8`	130, 44, 184	0, 100, 81, 35	`carmine`
4（最も暗い）	`#41175d`	65, 23, 93	0, 100, 81, 55	`venetian-red`

Bay

#0072b0

Bay (ベース)—f5-bay

#b2d7eb

レベル 1—f5-bay-1

#66afd7

レベル 2—f5-bay-2

#005c8d

レベル 3—f5-bay-3

#003d5f

レベル 4—f5-bay-4

レベル	HEX	RGB	CMYK	LESS
1（最も明るい）	`#b2d7eb`	178, 215, 235	0, 28, 23, 3	`wewak`
2	`#66afd7`	102, 175, 215	0, 58, 47, 6	`froly`
3	`#005c8d`	0, 92, 141	0, 100, 81, 35	`carmine`
4（最も暗い）	`#003d5f`	0, 61, 95	0, 100, 81, 55	`venetian-red`

ホワイト（ニュートラル）

#ffffff

White (ベース)—f5-white

#faf9f7

レベル 1—f5-white-1

#f5f5f5

レベル 2—f5-white-2

#e6e6e6

レベル 3—f5-white-3

#cccccc

レベル 4—f5-white-4

レベル	HEX	RGB	CMYK	LESS
1（最も明るい）	`#faf9f7`	250, 249, 247	0, 28, 23, 3	`wewak`
2	`#f5f5f5`	245, 245, 245	0, 58, 47, 6	`froly`
3	`#e6e6e6`	230, 230, 230	0, 100, 81, 35	`carmine`
4（最も暗い）	`#cccccc`	204, 204, 204	0, 100, 81, 55	`venetian-red`

ブラック（グレー）

#000000

Black (ベース)—f5-black

#999999

レベル 1—f5-black-1

#666666

レベル 2—f5-black-2

#343434

レベル 3—f5-black-3

#222222

レベル 4—f5-black-4

レベル	HEX	RGB	CMYK	LESS
1（最も明るい）	`#999999`	153, 153, 153	0, 28, 23, 3	`wewak`
2	`#666666`	102, 102, 102	0, 58, 47, 6	`froly`
3	`#343434`	52, 52, 52	0, 100, 81, 35	`carmine`
4（最も暗い）	`#222222`	34, 34, 34	0, 100, 81, 55	`venetian-red`

Starlight CSS カスタムプロパティへのマッピング

Starlight はテーマ設定用に --sl-color-* 変数を公開しています。以下は、F5 パレットから Starlight のセマンティックカラースロットへのマッピングで、styles/custom.css に実装されています。

Starlight テーマの仕組み: Starlight では、ダークモードが :root のデフォルトです — data-theme="dark" セレクターはありません。ライトモードは :root[data-theme='light'] を使用します。グレースケール変数はセマンティックであり、明度順ではありません。gray-1 は常に「プライマリテキスト」を表し、gray-6/gray-7 は常に「サブトルな背景」を表します（モードに関わらず）。実際の明度値はモード間で入れ替わります。同様に、accent-high は常に高視認性のアクセントテキストカラーであり、accent-low は常にサブトルなアクセント背景です — モード間で明度が反転します。

/* ダークモード — Starlight デフォルト (:root) */
:root {
  --sl-color-white: #ffffff;      /* 見出しテキスト（最も明るい） */
  --sl-color-gray-1: #f5f5f5;    /* プライマリテキスト — White レベル 2 */
  --sl-color-gray-2: #cccccc;    /* ボディテキスト — White レベル 4 */
  --sl-color-gray-3: #999999;    /* 薄い/ミュートテキスト — Black レベル 1 */
  --sl-color-gray-4: #666666;    /* ボーダー — Black レベル 2 */
  --sl-color-gray-5: #343434;    /* インラインコード背景 — Black レベル 3 */
  --sl-color-gray-6: #222222;    /* サイドバー背景 — Black レベル 4 */
  --sl-color-black: #000000;     /* ページ背景 */
  --sl-color-accent-low: #720016;   /* サブトルなアクセント背景 — F5 Red レベル 4 */
  --sl-color-accent: #f06680;       /* リンク、アクティブ — F5 Red レベル 2 */
  --sl-color-accent-high: #f7b2bf;  /* アクセントテキスト — F5 Red レベル 1 */
}

/* ライトモード — 反転したグレースケールとアクセントの明度 */
:root[data-theme='light'] {
  --sl-color-white: #222222;      /* 見出しテキスト（最も暗い） — Black レベル 4 */
  --sl-color-gray-1: #222222;    /* プライマリテキスト — Black レベル 4 */
  --sl-color-gray-2: #343434;    /* ボディテキスト — Black レベル 3 */
  --sl-color-gray-3: #666666;    /* 薄いテキスト — Black レベル 2 */
  --sl-color-gray-4: #999999;    /* ボーダー — Black レベル 1 */
  --sl-color-gray-5: #cccccc;    /* 薄いボーダー — White レベル 4 */
  --sl-color-gray-6: #f5f5f5;    /* サイドバー背景 — White レベル 2 */
  --sl-color-gray-7: #faf9f7;    /* ナビゲーション背景 — White レベル 1 */
  --sl-color-black: #ffffff;     /* ページ背景 */
  --sl-color-accent-low: #f7b2bf;   /* サブトルなアクセント背景 — F5 Red レベル 1（反転） */
  --sl-color-accent: #e4002b;       /* リンク、アクティブ — F5 Red */
  --sl-color-accent-high: #720016;  /* アクセントテキスト — F5 Red レベル 4（反転） */
}

ビジュアルトークンプレビュー

テーマスイッチャーを切り替えると、ダークモードとライトモードの間でこれらのセマンティックトークンが変化する様子を確認できます。

グレースケールトークン

white

見出しテキスト—sl-color-white

gray-1

プライマリテキスト—sl-color-gray-1

gray-2

ボディテキスト—sl-color-gray-2

gray-3

薄いテキスト—sl-color-gray-3

gray-4

ボーダー—sl-color-gray-4

gray-5

インラインコード背景—sl-color-gray-5

gray-6

サイドバー背景—sl-color-gray-6

black

ページ背景—sl-color-black

アクセントトークン

accent-low

サブトルなアクセント背景—sl-color-accent-low

accent

リンク、アクティブ—sl-color-accent

accent-high

アクセントテキスト—sl-color-accent-high

バッジトークン

default

デフォルトバッジ—sl-color-bg-badge-default

note

ノートバッジ—sl-color-bg-badge-note

danger

危険バッジ—sl-color-bg-badge-danger

success

成功バッジ—sl-color-bg-badge-success

caution

注意バッジ—sl-color-bg-badge-caution

tip

ヒントバッジ—sl-color-bg-badge-tip

コントラスト検証（WCAG AA）

ダークモード（#000000 のページ背景上のテキスト）:

ボディテキスト #cccccc → 16.3:1（AAA）
薄いテキスト #999999 → 10:1（AAA）
アクセントリンク #f06680 → 5.6:1（AA）

ライトモード（#ffffff のページ背景上のテキスト）:

ボディテキスト #343434 → 11.6:1（AAA）
薄いテキスト #666666 → 5.7:1（AA）
アクセントリンク #e4002b → 4.6:1（AA）

セマンティックカラーの提案

Starlight 変数	F5 カラー	ユースケース
`--sl-color-accent`	F5 Red `#e4002b`	リンク、ボタン、アクティブ状態
`--sl-color-text-accent`	F5 Red レベル 2 `#f06680`	ダークモードのホバー状態
`--sl-color-bg-accent`	F5 Red レベル 4 `#720016`	アクセント背景
カスタム: `--sl-color-info`	Bay `#0072b0`	情報コールアウト
カスタム: `--sl-color-success`	Jade `#009639`	成功メッセージ
カスタム: `--sl-color-warning`	Tangerine `#f29a36`	警告コールアウト
カスタム: `--sl-color-danger`	F5 Red `#e4002b`	エラー／危険コールアウト

カラーコントラスト

すべてのユーザーがコミュニケーションにアクセスして理解できるよう、アクセシビリティ基準を満たす背景色とテキスト色の組み合わせを使用してください。大きなテキストには最小コントラスト比 3:1、通常のテキストには 4.5:1 を持つカラーペアを選択してください。

すべてのカラーペアリングは WCAG AA コントラスト要件を満たす必要があります：

通常のテキスト（18pt 未満 / 14pt 未満の太字）: 最小 4.5:1 コントラスト比
大きなテキスト（18pt 以上 / 14pt 以上の太字）: 最小 3:1 コントラスト比
UI コンポーネントおよびグラフィカルオブジェクト: 最小 3:1 コントラスト比

推奨される安全なペアリング

前景色	背景色	コントラスト比	合格
White `#ffffff`	F5 Red `#e4002b`	4.6:1	AA
White `#ffffff`	River `#0e41aa`	6.4:1	AA / AAA
White `#ffffff`	Bay `#0072b0`	4.6:1	AA
White `#ffffff`	Jade `#009639`	4.2:1	AA（大きなテキスト）
White `#ffffff`	Eggplant `#62228b`	6.5:1	AA / AAA
White `#ffffff`	Raspberry `#ab2782`	4.7:1	AA
Black `#000000`	Tangerine `#f29a36`	7.8:1	AA / AAA
Black `#000000`	F5 Red レベル 1 `#f7b2bf`	10.1:1	AA / AAA
Black `#222222`	White レベル 1 `#faf9f7`	15.8:1	AA / AAA

ヒント: 新しいカラーの組み合わせを作成する際は、WebAIM Contrast Checker などのツールで必ずコントラスト比を確認してください。

使用ガイドライン

カラーファミリー	役割	使用シーン
F5 Red	ブランドアイデンティティ、プライマリ CTA	ヒーローセクション、プライマリボタン、ブランドマーク、エラー状態
River	情報提供、信頼性	ナビゲーションリンク、情報バナー、データビジュアライゼーション
Bay	情報提供、セカンダリ	セカンダリリンク、情報コールアウト、コードブロックのアクセント
Jade	成功、ポジティブ	成功メッセージ、確認状態、進捗インジケーター
Tangerine	警告、注意喚起	警告コールアウト、注意が必要な状態、ハイライトマーカー
Raspberry	アクセント、装飾	タグ、バッジ、セカンダリアクセント、カテゴリーマーカー
Eggplant	アクセント、プレミアム	機能のハイライト、プレミアムインジケーター、装飾アクセント
White / ニュートラル	背景、サーフェス	ページ背景、カードサーフェス、区切り線、サブトルなボーダー
Black / グレー	テキスト、構造	ボディテキスト、見出し、ボーダー、シャドウレイヤー

テーマチェック

.swatch のボーダーは --sl-color-gray-5 を使用
.swatch-label の背景は --sl-color-gray-6 を使用
すべての --f5-* スウォッチは実際のカラーを表示（CSS カスタムプロパティは custom.css から解決）
カラースウォッチはライトモードとダークモードの両方で表示可能
バッジトークンのスウォッチはテーマ切り替え時に更新