画像から色を調べる
写真を選び、気になる場所をクリックしてください。写真がなくても、コードの入力や色の選択で使えます。
ファイルや文章はアップロードされません。すべてこのページの中で処理します。
またはここにドロップ
この色の上では白い文字が読みやすいです。
白との対比7.32 : 1 (AAA)
黒との対比2.87 : 1 (AA未満)
WCAGの通常の文字の基準：AAは4.5以上、AAAは7以上です。
合わせやすい色
色相環で正反対の色。最も強い対比になります。
押すとコピー、ダブルタップでその色に切り替わります。
明るい色から暗い色まで
色覚の違いによる見え方
一般的な色覚
D型（緑）
右側で2色が同じに見える場合、色だけで区別するのは避けましょう。あくまで近似的なシミュレーションです。
出典（2026年10月19日確認）： W3C WCAG 2.2 (1.4.3, 1.4.6)
使い方
- 写真を選びます。写真なしでHEXコードを入力してもかまいません。
- 写真の上をクリック（スマホはなぞる）するか、代表色を押します。
- 色コード、相性のよい色、明暗の段階をコピーします。
よくある質問
どの形式の色コードをコピーできますか？
HEX（例：#336699）、RGB、HSLです。50から950までの明暗の段階は、CSS変数、Tailwind、SCSS、JSONの形でもコピーできます。
代表色はどう決まりますか？
似た色をまとめ、画素数の多いものから占める割合とともに並べます。ごく小さな部分は省きます。
文字色との対比の表示は何を表しますか？
WCAGの通常の文字の基準です。AAは4.5以上、AAAは7以上。大きな文字はAAが3以上、AAAが4.5以上です。
色を調べる写真は送信されますか？
されません。このページの中で読み取り、写真はお使いの端末に残ります。
