カラーピッカー
ここに画像をドロップ
またはクリックしてファイルを選択
アップロードは行われません — 画像はブラウザ内で読み込まれます
この画像から抽出したパレット
選択中の色
任意のHex値を入力できます — 3桁・6桁どちらでも、#の有無を問いません。
調整
配色パターン
スウォッチをクリックすると、その色が選択中の色になります。
ティント & シェード
コントラスト
WCAGでは通常のテキスト(AA)で4.5:1、AAAで7:1が必要です。大きなテキストは3:1でも構いません。
履歴
ここでできること
すべての処理はブラウザ内で完結します — アップロードも待ち時間もありません。
色を作る
画像から色を取得する
そこから広げる
その他の画像ツール
よくある質問
色を選ぶ前に知っておきたいことをまとめました。
help
画像はどこかにアップロードされますか?
いいえ。このツールにはサーバー側の処理が一切ありません — 画像はブラウザ内で直接読み込まれ、お使いの端末の外に出ることはありません。そのため処理も瞬時に行われます。
help
HSLとHSVの違いは何ですか?
どちらも色相(Hue)で色を表しますが、残りの成分の測り方が異なります。HSLの明度(Lightness)は黒から純色を経て白まで変化するため、50%が最も鮮やかな状態です。HSVの明度(Value)は黒からその色の最も明るい状態まで変化するため、彩度100%・明度100%が最も鮮やかな状態になります。明るさ・暗さのバリエーションを選ぶにはHSLの方が扱いやすいことが多く、HSVは多くのカラーフィールドの動作に近い形式です。
help
CMYKの色がプリンターの出力と違って見えるのはなぜですか?
ここでのCMYKは、カラープロファイルを適用しない単純なRGBからの変換です。実際の印刷結果は使用するインクや用紙、プロファイルによって左右されるため、この数値は印刷用の確定仕様ではなく、あくまで目安として扱ってください。
help
画像からのパレットはどのように選ばれますか?
メディアンカット法によって選ばれます。画像内の色を1つの箱として扱い、最もばらつきの大きいチャンネルに沿って繰り返し分割し、それぞれ最終的な箱の平均色を採用します。そのため、最も多くのピクセルを占める色の似たような色合いばかりが並ぶのではなく、はっきりと異なる色が抽出されます。
help
コントラストチェックは何を教えてくれますか?
WCAGの計算式を使って、選んだ色と白・黒とのコントラスト比を示します。通常サイズのテキストはAAに合格するために少なくとも4.5:1、AAAには7:1が必要です。大きい・太字のテキストは3:1でAAに合格できます。この色のテキストが実際に読みやすいかを手早く確認する方法です。
help
ブラウザの外から色を取得できますか?
お使いのブラウザがネイティブのスポイト機能に対応している場合、「ピッカー」モードにボタンが表示され、画面上の任意のピクセルの色を取得できます。対応していない場合、他に確実な方法がないため、このボタンは非表示になります。
確かなセキュリティ対策で運用
定型文ではなく、具体的な内容をご紹介します。
アップロードは行われません
このツールにはサーバー側の処理がありません。画像はブラウザ内で読み込まれ、どこにも送信されません。
設計上、瞬時に処理
サーバーとの往復がないため、待ち時間も順番待ちもありません — 変更するたびに即座に反映されます。
何も保存されません
保存するものは何もありません。このページからファイルがサーバーに届くことは一切ありません。