Color Palette Editor

形式の異なるパレットを1つの作業画面で

1つまたは複数のファイルを開くか、表示中のパレットに後からファイルを追加できます。対応するのは、このアプリ独自のJSONパレット形式（colors配列を含むもの）、AdobeのASEおよびACO、CSSのカスタムプロパティ、SVGの色指定、そして$AARRGGBB形式の値を含むTXTやSSSファイルです。各色は名前と16進値付きで表示され、そのままコピー、名前の変更、削除ができます。

整理して、並べ替えて、書き出す

• 黒、白、完全なグレー、重複する値を除外できます。
• 必要に応じて透明度を不透明に置き換えられます。
• 元の順序を保つか、色相、彩度、明度、明度の次に色相、輝度、またはUIデザイン向けのグループ分けで昇順・降順に並べ替えられます。
• パレットに名前を付け、JSON、Adobe ASE、Adobe ACO、SVGの一覧、またはカスタムプロパティを含むCSSファイルとしてダウンロードできます。

読み込みから完成まで

1. 対応するファイルを1つ以上選びます。同じパレットに加えたいファイルは後から追加できます。
2. 除外条件を設定し、並べ替えの方法と向きを選びます。
3. 色見本を確認し、名前を編集したり、値をコピーしたり、色を削除したりします。
4. パレット名を入力します。
5. 結果をJSON、ASE、SVG、ACO、CSSのいずれかでダウンロードします。

どんな人に向いているか

デザイナー、フロントエンド開発者、イラストレーターなど、デスクトップ用のツールをインストールせずに色のセットを確認、整理、変換したい人に向いています。パレットファイルやスタイルファイルの基本的な知識があると便利ですが、色見本を目で確認できるので、専門知識がなくても簡単な確認や変換ができます。複数ファイルの色見本を1つの納品物にまとめる、ASEやACOの色をWebプロジェクト用のCSSカスタムプロパティに変換する、CSS変数やSVGイラストから色を取り出す、といった使い方が一般的です。

ローカル処理と制限事項

パレットファイルはすべてブラウザー内で読み込まれて処理され、その内容がサーバーへアップロードされることはありません。書き出すファイルもローカルで生成され、ブラウザーがダウンロードします。アプリはフォントを含むすべてのファイルを自身のアドレスから読み込み、第三者へのリクエストは行いません。表示言語、テーマ、処理の設定はブラウザーのローカルストレージに保存されますが、読み込んだパレットはページを開いている間だけメモリーに保持され、閉じた後は保存されません。パレットや設定はURLに含まれないため、結果を共有するには書き出したファイルを送ります。

新しい色を一から作ることはできず、出発点は常に読み込んだファイルに含まれる色です。CSSの読み込みではカスタムプロパティの宣言を読み取り、16進値、カンマ区切りのrgb()・rgba()、CSSの色名に対応しますが、スタイルシートの評価、変数、グラデーション、hsl()、スペース区切りの新しい色構文には対応しません。SVGの読み込みではfill、stroke、color属性やインラインのスタイル宣言から対応する値を取り出しますが、リンクされたスタイルシート、グラデーションなどの塗り、継承された色や計算された色は解決しません。RGB以外のAdobeの色は編集と書き出しのためにRGBへ変換されるので、元のカラーモデルや特色のメタデータは保持されません。非常に大きいファイルや複雑なファイルは、ブラウザーのメモリーと処理速度による制約を受けます。アカウント、クラウド保存、同期、共同編集の機能はありません。値のコピーにはクリップボードへのアクセス許可か、安全なコンテキストが必要です。インターフェースは21言語に対応し、ライト、ダーク、システム連動の表示を選べます。

読み込み、絞り込み、並べ替え、名前付け、書き出しの主要な操作部はラベル付きのHTMLフォーム要素で、キーボードから操作でき、テーマボタンは押下状態を伝えます。ただし、パレットの一部の操作はポインター前提のままです。色見本そのものはクリックできますが、キーボードでフォーカスできる操作部ではなく、生成されたパレットもスクリーンリーダー向けの構造化された表としては提供されていません。また、インターフェースのアニメーションは動きを減らす設定にまだ対応していません。