画像から配色を抽出｜カラーコード（無料）

使い方

poster.jpg写真やデザイン
画像を入れる
主な色（4 色）割合・コード付き
主な色を割合つきで取り出す
palette.cssCSS 変数
palette.png色見本
CSS 変数や PNG などで書き出す

画像をドロップするか「ファイルを選択」で選びます。「サンプルで試す」でも試せます。
「色の数」（3〜16）と「色の計算方法」を選びます。色数を変えると、その場で作り直されます。
一覧で各色の割合とカラーコードを確認します。コードを押すとコピーできます。
画像の上をクリックすると、その場所の色をスポイトのように拾えます。
「CSS 変数」「Tailwind」「JSON」「ASE」「PNG」のどれかで書き出します。配色の見え方は「配色の確認」で続けて確かめられます。

できること

3〜16 色を自動で抽出

色の塊を k-means（クラスタリング）で分けます。色数を変えると、すぐに配色が作り直されます。同じ画像からは毎回同じ結果になります。

知覚に近い色空間で分析

Oklab（既定）または CIE Lab で距離を測るため、見た目に近い色同士がまとまります。各色はサンプルの平均の sRGB で表示します。

HEX・RGB・HSL・OKLCH のコピー

一つの色について 4 つの書き方をワンクリックでコピーできます。OKLCH は CSS の oklch() にそのまま使えます。

スポイトで好きな場所の色を拾う

画像の上をクリックすると、その 1 点の色を表示します。背景の色や、写真のアクセントを調べるのに向いています。

開発・デザインの形式で書き出し

CSS 変数（:root）、Tailwind の colors の書式、JSON（割合を含む）、スウォッチ交換形式（ASE）、パレットの PNG に対応します。

大きな画像でも軽い

画像は最大 512 px に縮小してから分析するので、高解像度の写真でもすぐに結果が出ます。処理は Web Worker で行います。

こんなときに

写真の色味に合わせて、Web サイトのアクセントカラーを決めたい
デザインから配色を取り出して、CSS 変数や Tailwind の設定にコピーしたい
デザインソフトで使う見本（ASE）を、写真から作りたい
ロゴや商品写真の色を HEX・RGB・HSL で確認して、資料に書きたい
画像のどの色がどれくらいの割合を占めるか、数字で把握したい

対応形式

入力

JPEG (.jpg / .jpeg)PNG（透過も可。透明な部分は除外）WebPAVIF（対応ブラウザのみ）GIF（静止画）

書き出し

CSS 変数（:root）Tailwind の colorsJSONASE（Swatch Exchange 形式）PNG（パレットの画像）

対応状況

機能	対応	補足
色数 3〜16 の抽出	対応	—
Oklab / CIE Lab での分析	対応	—
HEX・RGB・HSL・OKLCH のコピー	対応	—
スポイト（画像上のクリックで色を取得）	対応	縮小した画像の画素を読みます
CSS 変数・Tailwind・JSON・ASE・PNG の書き出し	対応	—
透明な部分の除外	対応	不透明度 50% 未満の画素は数えません
色の名前（「赤」「ネイビー」など）の判定	非対応	名前は付けません
印刷の色（CMYK）への正確な換算	非対応	画面の sRGB で扱うため、印刷の色は実際と違うことがあります
動画・アニメーション画像の色の抽出	非対応	静止画だけに対応しています
PDF からの抽出	非対応	PDF は画像として書き出してから使ってください
HEIC（iPhone の写真）	一部対応	Safari など対応ブラウザだけで読み込めます

制限・注意事項

1 枚 30 MB・1,600 万画素まで（例: 4,000 × 4,000）。
分析は最大 512 px に縮小した画像で行います。細かい模様の色は平均されることがあります。
色数は 3〜16 色です。
アニメーション画像（GIF・APNG・アニメーション WebP）は処理できません。
割合は、透明でない画素を数えた結果です。
スマートフォンでも使えます。分析は縮小した画像で行うため、軽く動作します。

プライバシーと安全性

画像の読み込み・縮小・色の分析・書き出しまで、すべてお使いのブラウザの中で行います。画像やファイル名がサーバーへ送信・保存されることはありません。

よくある質問

写真から配色（カラーコード）を取り出すには？

画像をドロップし、色の数を選ぶと、主な色が割合の大きい順に表示されます。各色のコードはボタンでコピーできます。

HEX・RGB・HSL・OKLCH の違いは？

HEX と RGB は同じ色の書き方です。HSL は色相・彩度・明るさで表します。OKLCH は人の見え方に近い明るさ・彩度・色相で、CSS の oklch() に使えます。

色の数は何色がよいですか？

写真なら 5〜8 色、ロゴや単色のデザインなら 3〜4 色がおすすめです。多すぎると似た色が並ぶことがあります。

印刷用の CMYK の色は正確に出ますか？

正確には出ません。このツールは画面の sRGB で色を扱うため、CMYK への換算は目安にとどまります。印刷は印刷会社の指定に従ってください。

書き出した ASE はどこで使えますか？

デザインソフトのスウォッチ（見本）として読み込める形式です（Swatch Exchange 形式）。対応状況はお使いのソフトの版によります。

画像はアップロードされますか？

いいえ。すべての処理はブラウザ内で行われ、画像が端末の外へ送られることはありません。

カラー変換・コントラスト・パレット（Color Studio）

色を 1 つ入力するだけで、HEX・RGB・HSL・HWB・OKLCH・CMYK（概算）へ即時変換。背景色との WCAG コントラスト比を AA/AAA で判定し、補色・トライアドなどの配色や 50〜950 の OKLCH スケールを作って、CSS 変数や Tailwind 設定として書き出せます。色はこの端末の外へ送信されません。

アップロードなし