オンラインカラーピッカー

オンラインカラーピッカーについて
このオンラインカラーピッカーでは、アップロードした画像から色を選択したり、ブラウザが対応している場合は画面上の色を取得したり、色の値を手動で入力したりできます。選択した色は、HEX、HEXA、RGB、RGBA、HSL、HSLA、HSV、CMYK などのよく使われる形式にすぐ変換されるため、必要な色コードを同じページ内でコピーできます。

• 主な機能
画像カラーピッカー: ローカル画像を選択し、画像上でカーソルを動かして周辺ピクセルをプレビューできます。画像をクリックすると、その位置の色を取得できます。

画像パレット抽出: 画像をアップロードすると、主な色をまとめたコンパクトなパレットを抽出し、コピーまたは現在の色として適用できます。

ピクセル単位の調整: 画像から色を選択した後、矢印キーで選択ピクセルの位置をより細かく調整できます。

画面カラーピッカー: ブラウザが対応している場合、ブラウザ標準の画面カラーピッカーを使って画面上の色を取得できます。

手動カラー入力: カラーセレクター、または #2563EB や #2563EBFF のような HEX / HEXA 値を使って、色を手動で入力できます。

複数の色形式: 選択した色を HEX、HEXA、RGB、RGBA、HSL、HSLA、HSV、CMYK 形式に変換できます。

配色候補: 現在の色をもとに、補色、類似色、トライアド、ソフトな明色、落ち着いたトーンの候補を生成できます。

明暗バリエーション: 背景、ボーダー、ホバー状態、バッジ、UIコンポーネントに使いやすい、明るい色から暗い色までの実用的なカラースケールを作成できます。

テキストコントラストとUI配色: 白文字と黒文字の見え方を WCAG コントラストで比較し、APCAスタイルの知覚的な参考値も表示します。彩度の高い色で背景を暗くまたは明るくした方が読みやすい場合は、より快適なUI配色を提案します。

CSS変数: 現在の色、明るいバリエーション、暗いバリエーション、読みやすいテキスト色、推奨UI背景色 / テキスト色を、すぐ使えるCSS変数としてコピーできます。

ブラウザ上での処理: 画像の読み込み、色の取得、パレット抽出、色変換は、別のアプリをインストールせずにブラウザ上で直接行えます。

• 注意事項
画面からの色取得はブラウザの対応状況に依存します。対応していないブラウザでも、画像からの色取得や手動入力は使用できます。

画像から色を取得する場合、画像はページに合わせて拡大縮小表示されることがありますが、取得する色は元画像のピクセル位置に対応するように処理されます。

テキストコントラストは、選択した単色をもとに計算されます。グラデーション、写真、透明度、テクスチャのある背景上にテキストを配置する場合は、最終デザインを目視でも確認してください。

APCAスタイルの値は、WCAG コントラストと並べて表示される知覚的な参考値です。このページでのアクセシビリティの合否判定は、WCAG コントラストを基準にしています。

インターフェース、文書、画像、印刷物で色を使用する場合、最終的な見え方はディスプレイ設定、カラープロファイル、ファイル形式、出力機器によって変わることがあります。

:wiki_link