色の変換
CMYK profile: Coated FOGRA39 · 表記は CSS Color 4 と WCAG 2.2 のコントラスト規則に準拠。
この色について
安定した成長の鼓動
中位の緑 の色値は #8FA187、緑 に属し、文化的な由来もはっきりしている。単独では 緑 の一色として読め、デジタルカラー の文脈をたどるともう一層の意味が重なる。
デザインのヒント
まず 中位の緑（#8FA187）を中間色の面で試す。緑 の差し色が加わると、装飾ではなく意図として見える。
最適な用途
中位の緑 は最初に目に入るべき一つの要素にだけ使い、残りは 緑 の配色に支えさせる。
心理効果
知覚のされ方
心理的効果
中位の緑 は 緑 の画面のエネルギー感を上げ、視線を行動へ導く。
感情的影響
直接的な温かさがあるため、抑制した版面を騒がしくせずに持ち上げる。
象徴
何を表すか
文化的意味
デジタルカラー の文脈では地域固有の参照を持つため、施策前に象徴性を確認する。
肯定的な連想
肯定的な連想は 成長、健康、持続可能性 に寄り、招待状や季節企画で使われる理由もそこにある。
注意して使う
面積が大きいと 彩度を落としすぎると嫉妬や沈滞に見える と読まれやすい。差し色と小面積にとどめる。
使われる場面
代表的なデザイン用途
- キャンペーンのランディングページ
- 中位の緑 は最初に目に入るべき一つの要素にだけ使い、残りは 緑 の配色に支えさせる。
- 雑誌表紙のシステム
- 中位の緑 は最初に目に入るべき一つの要素にだけ使い、残りは 緑 の配色に支えさせる。
- 製品パッケージのラベル
- 中位の緑 は最初に目に入るべき一つの要素にだけ使い、残りは 緑 の配色に支えさせる。
- ダッシュボードの状態表示
- 中位の緑 は最初に目に入るべき一つの要素にだけ使い、残りは 緑 の配色に支えさせる。
- 店舗のサイン計画
- 中位の緑 は最初に目に入るべき一つの要素にだけ使い、残りは 緑 の配色に支えさせる。
デザイン指針
使いこなすために
推奨
- 彩度の高い塗りは版面の二割以下に抑える。
- 主の行動喚起にだけ使い、他には使わない。
- 小さなサイズの配色を中性背景で確認する。
避ける
- 蛍光の緑や電気的な青と隣り合わせにしない。
- 白地の長い本文には使わない。
- 色相が別の家族へずれるグラデーションを避ける。
養育者、賢者 を軸とするブランドは、言葉より先にこの色で性格を示す。
緑は葉と再生から説得力を借り、医療的な清潔感から深い森の静けさまで自在に移る。目が無理なく解けるので、均衡として読まれる。
歴史
顔料と由来
合成染料以前、中位の緑 は鉱物や植物の顔料で調合され、緑 は黄土、茜、藍などの素材に頼っていた。今の画面はどの単一顔料よりも安定して再現する。
タグ
バリエーション
シェードは暗く、ティントは明るく、色相角は変えない。
シェード
同じ色相を暗くした段階。
ティント
面や背景に使う明るい段階。
用途
- シェード → hover, shadows, depth
- ティント → highlights, surfaces
- バランス → consistent color systems
デザインのコツ
主役・脇役・差し色を一つずつ。
配色の組み合わせ
明度を保ったまま色相環を回す。
使い方
読みやすさと意図を保つ三つの手順。
なぜ効くか
配色の背後にある知覚的な理由。
パレットを書き出す
CSS
:root {
--color-1: #566151;
--color-2: #72816C;
--color-3: #8FA187;
--color-4: #A5B49F;
--color-5: #BCC7B7;
}
Tailwind
colors: {
color1: '#566151',
color2: '#72816C',
color3: '#8FA187',
color4: '#A5B49F',
color5: '#BCC7B7',
}
JSON
["#566151","#72816C","#8FA187","#A5B49F","#BCC7B7"]
原則
バランス
主役・脇役・差し色を一つずつ。
コントラスト
公開前に白と黒の両方で本文を検証する。
ハーモニー
明度を保ったまま色相環を回す。
WCAG コントラスト基準
WCAG 2.2 は文字と UI 部品の最低コントラストを定めています。#8FA187 は白に対して 2.76:1（FAIL）、黒に対して 6.85:1（AA）です。下の表で文字サイズに合う基準を選んでください。
| レベル | 通常の文字 | 大きな文字（18pt+ / 14pt 太字） | アイコンと UI 部品 |
|---|---|---|---|
| AAA | 7 : 1 | 4.5 : 1 | — |
| AA | 4.5 : 1 | 3 : 1 | 3 : 1 |
| 不合格 | < 4.5 : 1 | < 3 : 1 | < 3 : 1 |
大きな文字は 18pt 通常または 14pt 太字。UI 部品は隣接色に対して 3:1 が必要です。AA が一般的な基準、AAA は強化基準です。
技術的な表記
各色空間での表記
CSS Color 4
sRGB / D65
HSL
perceptual
CIE Lab
CIE LCH
CIE XYZ
CIE LUV
CSS HWB
実用値
そのまま使える値
custom properties
arbitrary value
ARGB
dart:ui
RGB / CMYK
FOGRA39
色の分析
測定された色の性質
relative luminance · neutral
vs white · FAIL · neutral
vs black · AA · neutral
saturation 12% · neutral
lightness 58% · neutral
璆琳 #9EA6A0 · neutral
色覚シミュレーション
色覚特性での見え方
色覚特性での見え方 · ΔE 12.3
クリエイティブな側面
文化・感情・物語
エネルギー、温かさ、自信、そしてわずかな儀礼性として読まれることが多い。
エネルギー、温かさ、自信、そしてわずかな儀礼性として読まれることが多い。
エネルギー、温かさ、自信、そしてわずかな儀礼性として読まれることが多い。
エネルギー、温かさ、自信、そしてわずかな儀礼性として読まれることが多い。
エネルギー、温かさ、自信、そしてわずかな儀礼性として読まれることが多い。