使い方
- 「画像を選択」をクリックするか、画像をドラッグ＆ドロップ、またはCtrl+V / Cmd+Vでスクリーンショットを貼り付けます。
- 画像上でポインターや指を移動させて、リアルタイムのHEX、RGB、HSL値と拡大鏡をプレビューします。
- 保存したいポイントをクリックすると、その色が履歴に保存されます。
- 「パレットを抽出」をクリックしてデザイン向けのパレットを生成し、必要なカラー値をコピーします。
例：製品のスクリーンショットを貼り付け、メインボタンの色を選択し、HEX値をCSSやデザインファイルにコピーします。
主な機能
- ローカルでの画像色抽出: 画像はブラウザのCanvasで描画およびサンプリングされ、サーバーにアップロードされることはありません。
- ピクセル単位でのHEX/RGB/HSL表示: 画像上でポインターや指を移動させて、リアルタイムでHEX、RGB、HSL値を読み取ります。
- 拡大鏡十字カーソル: ズームプレビューにより、アイコンの端、UIスクリーンショットの詳細、小さなカラーブロックを的確にターゲットできます。
- パレットジェネレーター: ブラウザ側でのピクセルサンプリングにより、デザインのクイックリファレンス用に最大5つの主要色を抽出します。
- すばやい保存とコピー: 画像をクリックして色を履歴に保存し、スウォッチをクリックするだけでカラーコードをコピーできます。
関連ツール
内蔵のWCAGコントラストチェッカーを使用して、HEX、RGB、HSL、CMYKを変換します。ローカルのみのプライバシー処理で、アップロードはありません。印刷に対応したCMYK値の取得や結果のコピーが今すぐ行えます。
Lorem Ipsumをテキスト、HTML <p>、またはJSON配列として生成します。ローカル処理のみで、アップロードは行われません。中国語のプレースホルダーテキストや可変长コントロールが含まれています。今すぐ生成。
アスペクト比と欠落している寸法をすばやく計算します。ローカルで動作するため、アップロードは不要です。TikTok/Reelsの9:16プリセットやCSSのアスペクト比スニペットが含まれています。今すぐ計算。
計算ロジック
このツールは、HTML5 Canvasを使用してローカルで画像をデコードし、getImageDataを介して現在のピッカー座標のRGBAピクセルを読み取ります。そのピクセルからHEX、RGB、HSL値がフォーマットされます。
パレット生成は、Canvasのピクセルをサンプリングし、近い色をシンプルなバケットにグループ化し、頻度順にランク付けして最大5つの主要色を返します。これはWebやデザインのクイックパレットには便利ですが、プロフェッショナルなICC / P3の絶対カラーマネジメントを保証するものではありません。
よくある質問
画像はアップロードされますか？
いいえ。画像の読み込み、色選択、拡大鏡プレビュー、パレット生成はすべてブラウザ内でローカルに実行されます。
画像からHEXカラーを取得するには？
画像を選択または貼り付け、ターゲットピクセルにポインターまたは指を移動します。リアルタイムの色が即座に表示されます。画像をクリックして履歴に保存し、スウォッチをクリックしてHEX値をコピーします。
どのカラー形式がサポートされていますか？
Webデザインやフロントエンド開発で最も一般的な形式であるHEX、RGB、HSLを表示およびコピーします。
Photoshopと色がわずかに異なるのはなぜですか？
Canvasはブラウザによってレンダリングされたピクセルを読み取ります。ブラウザの動作、ディスプレイのガマット、埋め込まれた画像のカラープロファイルによって、わずかな違いが生じることがあります。
モバイルで色を選択できますか？
はい。タッチデバイスでは、画像上で指をドラッグして十字カーソルを移動させ、タップまたは離すことで色をロックできます。