色と画像の計算ツール：変換・コントラスト・パレット

5 つのパネルが 1 つのカラーエンジンを共有します。変換（HEX、RGB、HSL、HSV、CMYK、LAB、LCH）、コントラスト（AA/AAA バッジ付きの WCAG 比）、パレット（6 つの調和スキーム、ティントとシェード、色覚プレビュー）、画像（平均色、主要なパレット、ファイルからの RGB ヒストグラム）、写真（被写界深度、露出、天体、出力）。各パネルには専用のアドレス — /life/color/convert、/life/color/contrast、/life/color/image、/life/color/photo — があり、ブラウザー内で動作します。

更新 2026-10-015 个来源约 5 分钟读完

使い方

色を変換。ピッカーを設定するか HEX 値を入力するか、R/G/B と H/S/L のスライダーをドラッグします。8 枚のカードが一緒に更新され、それぞれコピー可能で、最も近い CSS 名前付き色が ΔE₇₆ 距離を表示します。
コントラストを確認。前景と背景を選びます。1 つの比、4 つのバッジ（AA/AAA、通常テキストと大テキスト）、ライブサンプル。AA 通常が失敗したら、提案されたスウォッチをクリックすると明度だけの修正で 4.5 : 1 に到達します。
パレットを作成。6 行 — 補色、分裂補色、三色、四色、類似、単色 — がベース色に従い、その後に 13 段階のティントとシェードの帯が続きます。各スウォッチは HEX としてコピーされます。色覚プレビューは、選択したスキームを 1 型・2 型・3 型色覚で表示します。
画像を読み取る。選択したファイルはローカルでデコードされ、最大 480 px 幅に縮小されます。ピクセルをクリックすると HEX、RGB、HSL が得られ、パネルは平均色、メディアンカットによる最大 6 つの主要色、64 ビンの RGB ヒストグラムを追加します。
撮影を計画。写真タブは被写界深度、露出（EV、シャッター段列、ND フィルターとカウントダウンタイマー、サニー 16、フラッシュ）、天体（500 の法則と NPF、星の軌跡、月相）、出力（プリントサイズ、ファイル推定、タイムラプス）を扱います。

計算例

このページの既定値からの表示です。

入力	ページの表示
`#4a90e2`	hsl(212, 72%, 59%)、hsv(212, 67%, 89%)、cmyk(67%, 36%, 0%, 11%)、lab(58.87 3.995 -48.11)、lch(58.87 48.27 274.7)、輝度 0.2689、最近傍 cornflowerblue · #6495ed · ΔE₇₆ = 6.26
白の上の `#999999`	2.85 : 1 — 4 つのバッジすべてが失敗。提案された前景 #757575 は 4.61 : 1
白の上の `#767676`、次に `#777777`	4.54 : 1 は AA 通常と両方の大テキストバッジを通過、4.48 : 1 は 0.02 差で AA 通常に失敗
パレットのベース `#4a90e2`	三色 #4a90e2 / #e24a90 / #90e24a、ティントとシェード #e5effb → #0b1520、2 型色覚での補色ペア #6b66ce / #cbd06b
写真: 50 mm、f/8、3 m、フルサイズ、f/8、1/250 s、ISO 100	近景 2.36 m、遠景 4.12 m、合計 1.76 m、過焦点 10.88 m、EV 13.97、1/125 s に ND1000 で 8.2″
写真: 24 mm、f/2.8、24 MP、赤緯 0°、300 dpi で 6000 × 4000 px	500 の法則 20.8 s、NPF 11.6 s、軌跡 6.1 px、プリント 50.8 × 33.9 cm、優秀、RAW 14 ビット 24.8 MB

バッジの背後にある WCAG の数値

各 sRGB チャンネルは線形化され（0.04045 の分岐点未満では ÷12.92、それ以外は ((v + 0.055) / 1.055)²·⁴）、相対輝度は L = 0.2126 R + 0.7152 G + 0.0722 B、コントラスト比は (L_light + 0.05) / (L_dark + 0.05) です — 白の上の黒 21.00 : 1、同じ色 1.00 : 1。しきい値: AA 通常 4.5、AA 大 3.0、AAA 通常 7.0、AAA 大 4.5。変換カードは sRGB → 線形 RGB → XYZ（D65）→ CIELAB → LCH の順に計算し、最近傍名カードは 148 個の CSS キーワードに対して ΔE₇₆ を使います。

前提と制限

sRGB のみ。: モニタープロファイルや色域チェックはありません。CMYK カードは単純な c/m/y/k の差し引きで、対話用の値であり印刷校正ではありません。
表示の丸め。: LAB と LCH は有効数字 4 桁、比は小数 2 桁で表示し、判定は丸めていない値で比較します。
解析であり編集ではない。: 画像パネルはピクセルを書き込みません。切り抜き、リサイズ、フィルター、形式変換、書き出しはありません。撮影計画は写真パネル、空の時刻は天文の太陽パネル、色のビットパッキングはプログラマー電卓の役割です。

大テキストしきい値の罠

誤読されやすいバッジは AAA 大です。必要なのは 4.5 : 1 で、AA 通常と同じであり、AA 大が許す 3 : 1 ではありません — AA で「大テキスト」を通過しても AAA では何も保証されません。白の上では #767676 が 4.54 : 1 で AA 通常と両方の大テキストバッジを通過し（AAA 通常は 7.0 が必要）、#777777 は 4.48 : 1 で AA 通常に 100 分の 2 差で失敗します。「大」は 18 pt 通常または 14 pt 太字を意味し、比は対称です。テキストと背景を入れ替えても何も変わりません。

役立つ場面

インターフェースとブランドの作業

本文テキストとボタンを両方の背景に対して確認し、ダークモードのペアを正直に保ち、ロゴから 6 色の調和を引き出し、赤/緑のステータスパレットが 2 型色覚でも成立するか確認します。

写真と画像の作業

オーバーレイの色合いを選ぶ前に写真の平均色と主要色を抽出し、50 mm・f/8 が 3 m 先の被写体を 1.76 m に収めるか、ND1000 が 1/125 s をどこまで伸ばすか、24 MP のフレームが 100 s のタイムラプスを何枚埋めるかを確認します。

コードと印刷の色

開発者に正確な hsl(212, 72%, 59%) や LAB 文字列を渡し、白いページに対してマーケティングの hex を検証し、入稿前に CMYK の読み取りを確認します。

参考文献

W3C, WCAG 2.2 — Contrast (Minimum) and Contrast (Enhanced), w3.org （访问日期：2026-10-01）— 4.5 : 1、3 : 1、7 : 1 のしきい値と大テキストの定義。
W3C, WCAG 2.2 — relative luminance, w3.org （访问日期：2026-10-01）— すべての比の背後にある係数と 0.05 のオフセット。
Wikipedia, CIELAB color space, en.wikipedia.org （访问日期：2026-10-01）— 結果カードの XYZ から Lab への変換と LCH 極座標形式。
Wikipedia, Median cut, en.wikipedia.org （访问日期：2026-10-01）— 6 つの画像スウォッチの背後にある主要色アルゴリズム。
Wikipedia, Depth of field, en.wikipedia.org （访问日期：2026-10-01）— 写真タブが表示する過焦点距離と近景・遠景の限界。