mcpField
C
color-palette-extractor

color-palette-extractor

github.com/onewave-aiデザイン・UI393613 回インストール1 週間前に更新
リポジトリ

color-palette-extractor について

color-palette-extractorは、画像、ウェブサイト、デザイン案、色コードからアクセシブルなカラーパレットを抽出・生成するデザイン向けスキルです。色彩調和とアクセシビリティを分析し、レポートや複数形式の出力を作成します。

主な機能

  1. 01画像やウェブサイトから主要色を抽出
  2. 02明度・彩度の異なる色を含むパレットを生成
  3. 03色彩調和の配色を分析
  4. 04WCAG 2.1のコントラストと色覚特性を確認
  5. 05CSS、Tailwind、SCSS、JSON、iOS、Android形式で出力

活用シーン

  1. 01ロゴやスクリーンショットの主要色を特定
  2. 02ウェブサイトや色コードからパレットを作成
  3. 03テキストと背景のコントラストを確認
  4. 04色からTailwind設定を作成

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/onewave-ai/claude-skills --skill color-palette-extractor

インストール後、Claude Code で/color-palette-extractorを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
color-theory.md
export-formats.md
output-template.md

詳細

カラーパレット抽出ツール

画像、ウェブサイト、デザインからアクセシブルなカラーパレットを抽出して生成します。

目次

  • references/output-template.md — パレットを提示するための完全なレポート構成
  • references/export-formats.md — CSS、Tailwind、SCSS、JSON、iOS、Android のコードスニペット
  • references/color-theory.md — 配色の調和、アクセシビリティ、抽出のベストプラクティス

ワークフロー

  1. ソースを特定します。画像ファイル（PNG、JPG、SVG）、ウェブサイトの URL、スクリーンショット、デザインモックアップ、またはベースとして使用する既存のカラーコードが対象です。

  2. 色を抽出します。

    • 画像から抽出する場合：ピクセルデータを分析し、主要な色を特定して、近い色合いをグループ化し、出現頻度を計算して、目立つ順に並べます。
    • ウェブサイトから抽出する場合：CSS を取得して解析し、色の値を抽出して、ブランドカラー、アクセントカラー、テキストカラー、背景色を特定します。
    • K-means でクラスタリングし、主要な色を 5～10 色抽出します。重要でない限り、白に近い色と黒に近い色は除外します。

  3. 基本パレット（5～10 色）を作成します。最も目立つ色、補助色 2～3 色、アクセントカラー 1～2 色、背景色、テキストカラーを含めます。色合い、シェード、トーン、および 50～950 の数値スケールを使用して、拡張パレットを生成します。references/color-theory.md を参照してください。

  4. 色の調和を分析し、補色、類似色、三色配色、分裂補色、四色配色、単色配色を作成します。references/color-theory.md を参照してください。

  5. アクセシビリティを確認します。テキストと背景の各組み合わせについて WCAG 2.1 のコントラスト比を計算し、1 型色覚、2 型色覚、3 型色覚でテストします。組み合わせが基準を満たさない場合は、アクセシブルな代替色を推奨します。references/color-theory.md を参照してください。

  6. references/output-template.md に従ってレポートを整形し、references/export-formats.md を使用して指定された形式にエクスポートします。

出力要件

明確な主要色、十分なバリエーション、意味のある命名、配色の調和、アクセシビリティチェックに合格するコントラスト比、使用ガイドライン、複数形式でのエクスポートを備えたパレットを提供します。デザインシステムですぐに使える、プロフェッショナルでアクセシブルなパレットを作成します。

使用例

  • 「このスクリーンショットから色を抽出して」
  • 「このウェブサイトからカラーパレットを取得して」
  • 「この画像からカラースキームを生成して」
  • 「これらの色から Tailwind の設定を作成して」
  • 「このロゴの主要な色を見つけて」
  • 「この hex コードを基にパレットを作成して」

コメント

Markdown 対応