色の変換
CMYK profile: Coated FOGRA39 · 表記は CSS Color 4 と WCAG 2.2 のコントラスト規則に準拠。
この色について
静かな構造と精確さ
黒 の色値は #040607、灰 に属し、文化的な由来もはっきりしている。単独では 灰 の一色として読め、デジタルカラー の文脈をたどるともう一層の意味が重なる。
デザインのヒント
まず 黒（#040607）を中間色の面で試す。灰 の差し色が加わると、装飾ではなく意図として見える。
最適な用途
黒 は最初に目に入るべき一つの要素にだけ使い、残りは 灰 の配色に支えさせる。
心理効果
知覚のされ方
心理的効果
黒 は 灰 の画面のエネルギー感を上げ、視線を行動へ導く。
感情的影響
直接的な温かさがあるため、抑制した版面を騒がしくせずに持ち上げる。
象徴
何を表すか
文化的意味
デジタルカラー の文脈では地域固有の参照を持つため、施策前に象徴性を確認する。
肯定的な連想
肯定的な連想は 安定、中立、洗練 に寄り、招待状や季節企画で使われる理由もそこにある。
注意して使う
面積が大きいと 緩和がないと無関心や陰鬱に見える と読まれやすい。差し色と小面積にとどめる。
使われる場面
代表的なデザイン用途
- キャンペーンのランディングページ
- 黒 は最初に目に入るべき一つの要素にだけ使い、残りは 灰 の配色に支えさせる。
- 雑誌表紙のシステム
- 黒 は最初に目に入るべき一つの要素にだけ使い、残りは 灰 の配色に支えさせる。
- 製品パッケージのラベル
- 黒 は最初に目に入るべき一つの要素にだけ使い、残りは 灰 の配色に支えさせる。
- ダッシュボードの状態表示
- 黒 は最初に目に入るべき一つの要素にだけ使い、残りは 灰 の配色に支えさせる。
- 店舗のサイン計画
- 黒 は最初に目に入るべき一つの要素にだけ使い、残りは 灰 の配色に支えさせる。
デザイン指針
使いこなすために
推奨
- 彩度の高い塗りは版面の二割以下に抑える。
- 主の行動喚起にだけ使い、他には使わない。
- 小さなサイズの配色を中性背景で確認する。
避ける
- 蛍光の緑や電気的な青と隣り合わせにしない。
- 白地の長い本文には使わない。
- 色相が別の家族へずれるグラデーションを避ける。
賢者、統治者 を軸とするブランドは、言葉より先にこの色で性格を示す。
灰色は間隔とインフラの色で、他の色相を競わせずに引き離す。暖灰は手触りを、寒灰は設計された印象を与える。
歴史
顔料と由来
合成染料以前、黒 は鉱物や植物の顔料で調合され、灰 は黄土、茜、藍などの素材に頼っていた。今の画面はどの単一顔料よりも安定して再現する。
タグ
バリエーション
シェードは暗く、ティントは明るく、色相角は変えない。
シェード
同じ色相を暗くした段階。
ティント
面や背景に使う明るい段階。
用途
- シェード → hover, shadows, depth
- ティント → highlights, surfaces
- バランス → consistent color systems
デザインのコツ
主役・脇役・差し色を一つずつ。
配色の組み合わせ
明度を保ったまま色相環を回す。
使い方
読みやすさと意図を保つ三つの手順。
なぜ効くか
配色の背後にある知覚的な理由。
パレットを書き出す
CSS
:root {
--color-1: #020404;
--color-2: #030506;
--color-3: #040607;
--color-4: #363839;
--color-5: #686A6A;
}
Tailwind
colors: {
color1: '#020404',
color2: '#030506',
color3: '#040607',
color4: '#363839',
color5: '#686A6A',
}
JSON
["#020404","#030506","#040607","#363839","#686A6A"]
原則
バランス
主役・脇役・差し色を一つずつ。
コントラスト
公開前に白と黒の両方で本文を検証する。
ハーモニー
明度を保ったまま色相環を回す。
WCAG コントラスト基準
WCAG 2.2 は文字と UI 部品の最低コントラストを定めています。#040607 は白に対して 20.30:1（AAA）、黒に対して 1.08:1（FAIL）です。下の表で文字サイズに合う基準を選んでください。
| レベル | 通常の文字 | 大きな文字（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 · cool
vs white · AAA · cool
vs black · FAIL · cool
saturation 27% · cool
lightness 2% · cool
玄色 #3A3A40 · cool
色覚シミュレーション
色覚特性での見え方
色覚特性での見え方 · ΔE 23.4
クリエイティブな側面
文化・感情・物語
エネルギー、温かさ、自信、そしてわずかな儀礼性として読まれることが多い。
エネルギー、温かさ、自信、そしてわずかな儀礼性として読まれることが多い。
エネルギー、温かさ、自信、そしてわずかな儀礼性として読まれることが多い。
エネルギー、温かさ、自信、そしてわずかな儀礼性として読まれることが多い。
エネルギー、温かさ、自信、そしてわずかな儀礼性として読まれることが多い。