カラーパレット抽出 |画像から 16 進コードを取得

使用方法

カラーパレット抽出ツールの使い方

01
画像をアップロードする
写真、ロゴ、またはスクリーンショットをドラッグアンドドロップするか、選択します。パレットはブラウザ内で即座に抽出されます。
02
パレットを改良する
カウントコントロールをスライドして 3 ～ 12 色を抽出するか、「画像から選択」をオンにして任意の場所をクリックして正確なピクセルをサンプリングします。
03
点検・調整
スウォッチを選択してその HEX/RGB/HSL を確認し、明度を微調整し、白と黒の WCAG コントラストを確認します。ワンドを押して失敗した色を自動修正します。
04
輸出
CSS、SCSS、Tailwind、JSON、または SVG を選択してコードをコピーするか、設計ドキュメント用の SVG スウォッチシートをダウンロードします。

ユースケース

概要

画像をアップロードすると、エクストラクターがその主要な色を特定し、すぐに使用できる HEX 値と RGB 値を返します。これは、デザインアプリを使用せずに、写真からパレットを作成したり、ブランドの色に合わせたり、スクリーンショットで正確な色合いを見つけたりする最も速い方法です。

インスピレーションを使用可能な値に変換します。夕日をサンプリングしてグラデーションを作成したり、競合他社のアクセントカラーを引き上げたり、ヒーロー画像から一貫したテーマを生成したりできます。処理はブラウザ内で行われるため、画像がサーバーにアップロードされることはありません。

特徴

よくある質問

画像から 16 進数のカラーコードを取得するにはどうすればよいですか?+

画像をアップロードすると、ツールが自動的に画像を分析し、K-Means クラスタリングを使用して主要な色を抽出します。各色は、その HEX、RGB、および HSL 値とともに表示されます。任意の色をクリックしてコピーします。

ロゴからブランドカラーを抽出できますか?+

はい。ロゴ画像をアップロードすると、ツールがブランドのプライマリカラーとセカンダリカラーを識別し、CSS、Tailwind、または Figma などのデザインツールで使用する正確な 16 進コードを提供します。

WCAG コントラストチェックとは何ですか?+

WCAG (Web コンテンツアクセシビリティガイドライン) は、テキストと背景の色のコントラスト比を定義します。視覚障害のあるユーザーが通常のテキスト (AA 標準) を読めるようにするには、少なくとも 4.5:1 の比率が必要です。

抽出機能は何色を識別しますか?+

スライダーを使用すると、3 から 12 の主要な色を抽出でき、画像内にどの程度の視覚的スペースと鮮やかさが含まれるかによってランク付けされます。写真を直接クリックして、正確なピクセルの色をサンプルすることもできます。

CSS または Tailwind で使用するためにパレットをエクスポートできますか?+

はい。このツールは、すぐに使用できる CSS カスタムプロパティ変数 (--color-primary: #hex) と、プロジェクトに直接貼り付けることができる Tailwind 構成スニペットを生成します。

ロゴから正確な 16 進コードを取得できますか?+

はい — エクストラクターは、デザインツールに直接コピーできる主要な色を 16 進値として返します。