カラーピッカー＆変換色を選び、HEX・RGB・HSL間で変換し、画像や画面から色を抽出して、白・黒の文字とのコントラストを確認できます。
カラーパレット作成
色相環のハーモニーを使って1つのブランドカラーから統一感のあるパレットを作るか、写真から主な色を取り出します。個別の値をコピーするか、CSSカスタムプロパティとして書き出せます。
画像を選択
すべてブラウザ内で動作します。入力内容やファイルがサーバーにアップロードされることはありません。
使い方
- ベースカラーとハーモニーの種類を選びます。または「画像から」に切り替えて写真を開きます。
- 色見本をクリックするとHEXコードをコピーできます。
- CSS変数をコピーして、スタイルシートでパレットを使います。
使用例
UI用のカラースケール
「明度のバリエーション」で、メインカラーの明るい背景色や濃い文字色を作れます。
商品写真からパレットを作る
写真から6色を抽出し、写真に合ったランディングページをデザインします。
プライバシー
すべてブラウザ内で動作します。入力内容やファイルがサーバーにアップロードされることはありません。 ブラウザに保存される内容（お気に入りと履歴のみ）については、プライバシーポリシーをご覧ください。 プライバシーポリシー
ご自身で確認できます：ブラウザの開発者ツールを開き、「ネットワーク（Network）」タブを選んでツールを使ってください。ファイルがアップロード要求に現れることはありません。このページがオフライン用に保存された後は、インターネットを切断しても作業を続けられます。 広告と匿名の訪問統計は、有効な場合は独自に通信しますが、あなたのファイルやテキストを受け取ることはありません。
よくある質問
画像の色はどのように抽出されますか？
画像を縮小し、ピクセルをk-meansクラスタリングでグループ化します。最も大きいグループがパレットになります。
ハーモニーはアクセシビリティに配慮されていますか？
ハーモニーは色相の関係を扱うもので、コントラストとは別です。文字と背景の組み合わせは、カラーピッカーのコントラスト比で確認してください。
関連ツール
画像ツールをすべて表示ファビコン作成画像または文字から、favicon.ico、16〜512 pxのPNG、Apple Touchアイコン、Webマニフェスト、HTMLタグまでの完全なファビコンセットを1つのZIPで生成します。
SVGプレビュー＆最適化SVGファイルを安全にプレビューし、コメント、エディタのメタデータ、空白を削除して軽量化します。
メタタグ生成ツールページ用の整った HTML メタタグを生成します：title、description、canonical、robots、Open Graph、Twitter Card。
画像圧縮JPG・PNG・WebP 画像をブラウザ内で、画質指定または 100 KB などの目標サイズで圧縮します。
画像リサイズJPG・PNG・WebP画像を正確なピクセル寸法またはパーセントでリサイズ。