Kitoo Tool
配色パレット
画像から色を抽出して配色パレットを作成できます。CSS 変数としてコピーしたり、パレット画像としてダウンロードしたりできます。無料・登録不要で、画像はサーバーにアップロードされません。
画像はサーバーにアップロードされません。すべてブラウザ内で処理されます。
配色パレットの使い方
画像をドラッグ＆ドロップするか、「画像を選択」からファイルを選ぶだけで色の抽出が始まります。 クリップボードにコピーした画像をそのまま貼り付けることもできます。
抽出する色数は3〜10色の間で調整でき、色値は HEX・RGB・HSL の好きな形式に切り替えられます。 スウォッチをタップすると色値をコピーできます。画像上の好きな位置をクリックすれば、その場所の色を直接拾うこともできます。
抽出モードの違い
「ドミナント」は画像内で面積の大きい色から順に並べます。写真全体の雰囲気をつかむのに向いています。
「あざやか」は彩度の高い色を優先し、アクセントカラー探しに便利です。「落ち着いた」は彩度の低い色を、 「明るい」「暗い」は明度の高い順・低い順に並べ替えます。どのモードも同じ画像から抽出した色の並べ替えなので、 目的に合わせて切り替えて使ってください。
CSS 変数として使う
抽出した色は --color-1、--color-2 …という CSS 変数のコードとして自動で生成されます。 各色には面積比のコメントが付くため、ベース・メイン・アクセントの配分（60・30・10 ルール）を意識した配色に使えます。
あわせて、パレット内でコントラスト比 4.5 以上（WCAG AA 相当）になる背景色と文字色の組み合わせも一覧表示します。 テキスト配色を決める際の参考にしてください。
ブラウザ内処理とプライバシー
このツールは画像をサーバーにアップロードしません。画像の解析とパレット生成はすべてお使いの端末のブラウザ内で完結します。 未公開のデザイン案や社内資料の画像でも安心して使えます。
「パレット画像をダウンロード」で、元画像と抽出した色を並べた1枚の PNG 画像を保存できます。 SNS への共有や提案資料への添付に便利です。
FAQ
画像はサーバーに送信されますか？
いいえ。画像の読み込みから色の抽出、パレット画像の書き出しまで、すべてお使いのブラウザ内で処理されます。画像データが外部のサーバーに送信されることはありません。
何色まで抽出できますか？
3色から10色まで、スライダーで自由に選べます。写真のように色数の多い画像では、近い色がグループ化されて代表色が抽出されます。
画像の好きな位置の色を取れますか？
はい。プレビュー画像をクリック（タップ）すると、その位置の色が「ピックした色」に追加されます。最大5色まで保存でき、それぞれ個別に削除できます。
CSS 変数はどう使えばいいですか？
「コピーする」で :root ブロックごとコピーし、CSS ファイルに貼り付けてください。var(--color-1) のように参照できます。色は面積比の大きい順に並んでいるため、--color-1 をベースカラー、--color-2 をメインカラー、--color-3 をアクセントカラーにする 60・30・10 の配色ルールに沿って使いやすくなっています。