01 primary
マゼンタ
oklch(64% 0.16 320) L 64% · C 0.16 · H 320°
08.4
08.4 —採用カラーパレット
カラーパレット
マゼンタ、イエロー、シアンの3色が Gn8 の採用色。4つの中立色テーマで背景・本文・境界線を切り替え、各色の意味を保つ。
採用値 · 共通デザイントークン Primaryoklch(64% 0.16 320) Secondaryoklch(80% 0.24 96) Tertiaryoklch(72% 0.16 200)
02 secondary
イエロー
oklch(80% 0.24 96) L 80% · C 0.24 · H 96°
03 tertiary
シアン
oklch(72% 0.16 200) L 72% · C 0.16 · H 200°
UI SPECIMENS
実際の使い方
primary の基準色は変えず、文字色にL=96%の中立色を使う。button-background と button-foreground のコントラストは約 4.53:1。色見本には暗い on-color を使う。
マゼンタの状態
主要な操作と選択状態に使う。3色の中心となるマゼンタ。
詳細を見る →
イエローの状態
注目してほしい情報や発見のハイライトに使う。警告色とは分ける。
詳細を見る →
シアンの状態
情報表示、進捗、補助的な図形に使う。明るい背景上の文字はニュートラルにする。
詳細を見る →
COMBINATION
3色を同時に置く
比較・検討 · 紫の各軸
紫を、ひとつずつ比較する。
採用色を基準に、色相・明るさ・鮮やかさをひとつずつ比較する。ここに並ぶ候補は検討用で、採用パレットとは別に扱う。
色相 H
L 64% · C 0.16 マゼンタ寄りから青紫寄りまで、色相だけを8°ずつ動かす。
H 336
oklch(64% 0.16 336) H 328
oklch(64% 0.16 328) 採用色 H 320
oklch(64% 0.16 320) H 312
oklch(64% 0.16 312) H 304
oklch(64% 0.16 304) 明るさ L
C 0.16 · H 320 色相と鮮やかさを固定して、明るさだけを8%ずつ動かす。
L 80%
oklch(80% 0.16 320) L 72%
oklch(72% 0.16 320) 採用色 L 64%
oklch(64% 0.16 320) L 56%
oklch(56% 0.16 320) L 48%
oklch(48% 0.16 320) 鮮やかさ C
L 64% · H 320 明るさと色相を固定して、鮮やかさだけを0.08ずつ動かす。
C 0.08
oklch(64% 0.08 320) 採用色 C 0.16
oklch(64% 0.16 320) C 0.24
oklch(64% 0.24 320) C 0.32
oklch(64% 0.32 320) 比較・検討 · 黄色の色相
黄色だけを動かして、3色の関係を見る。
マゼンタとシアンを固定し、黄色の色相だけを試す比較エリア。選択は下の見本だけに反映され、サイトの採用色は変わらない。
- 固定
- マゼンタ / シアン
- 変更
- 黄色の H だけ
- 確認
- 3色の関係 / sRGB 表示
01 · PURE COLOR
装飾のない色面で比較する
色面には文字を載せない。名称と L / C / H は外側に分け、色そのものを見る。
Primary マゼンタ
- L
- 64%
- C
- 0.16
- H
- 320°
Secondary 黄色
- L
- 80%
- C
- 0.24
- H
- 80°88°96°
Tertiary シアン
- L
- 72%
- C
- 0.16
- H
- 200°
03 · UI CONTEXT
4つのテーマで役割の使い方を確認する
同じ情報を4つの中立色パレットに置き、リンク、進捗、操作部品の境界がどう見えるかを比べる。ここでは役割の使い方だけを確認し、純粋な色比較とは分けて判断する。
Gn8 Light
RELEASE 08
確認待ち リリース確認
3件の変更をレビューできます。
準備状況 72%
Gn8 Dark
RELEASE 08
確認待ち リリース確認
3件の変更をレビューできます。
準備状況 72%
Gn8 Classic Light
RELEASE 08
確認待ち リリース確認
3件の変更をレビューできます。
準備状況 72%
Gn8 Classic Dark
RELEASE 08
確認待ち リリース確認
3件の変更をレビューできます。
準備状況 72%