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

Color Palette Extractorは、CSSスタイルシート、SVGマークアップ、HTMLファイル、またはプレーンテキストからすべての色定義（hexコード（#RRGGBB、#RGB）、RGB/RGBA関数、HSL/HSLA関数、および名前付きCSSカラー）を解析し、それらをhex、RGB、およびHSL表現とともに統一されたビジュアルパレットとして提示します。デザインシステムでは、使用されているすべての色の正確なドキュメント化が必要であり、このツールは、手動での色監査を、あらゆるコードベースやマークアップファイルからの即時自動抽出に置き換えます。

すべてのコンバーターツールを見る

使い方

CSSコード、SVGマークアップ、HTMLソース、または色値を含む任意のテキストを入力エリアに貼り付けます。ツールはすべての色構文パターンをスキャンし、検出された各色をそのhex、RGB、HSL値とともにスウォッチとして表示します。任意のスウォッチをクリックすると色値がクリップボードにコピーされ、または完全なパレットをCSSカスタムプロパティリスト、JSONオブジェクト、またはフラットなhexリストとしてエクスポートできます。

一般的な使用例

• •デザインシステム移行のための包括的なデザイントークンインベントリを作成するために、CSSスタイルシートからすべての色値を抽出する
• •SVGアイコンライブラリとイラストファイルを監査し、使用されているすべての色を特定し、ブランドカラーのコンプライアンスを確認する
• •デザインのリフレッシュ前にパレットを統合するために、レガシースタイルシート内の冗長なほぼ重複する色を発見する
• •デザインチームへの引き継ぎやブランドガイドライン作成のために、既存のフロントエンドコードから色参照ドキュメントを生成する
• •アクセシビリティ監査のために、コンポーネントCSSから前景と背景の色を抽出し、WCAGコントラストのコンプライアンスを検証する