パレットエクスポーター
色のセットを貼り付けるかインポートし、CSS 変数、SCSS、Tailwind config、JSON、SVG スウォッチに即座にエクスポート — あらゆるパレットの仕上げに。
HEX 値を貼り付けてください（1 行に 1 つ、またはカンマ・スペース区切り）。rgb() と hsl() も使用可能です。
有効な色が見つかりませんでした — 入力を確認してください。
すべてブラウザで動作します — パレットを貼り付けて任意のフォーマットのプロダクション対応コードをコピーしてください。サインアップなし、完全無料。
パレットエクスポーターについて
パレットエクスポーターは、あらゆるカラーパレットの仕上げステップです。色のセットを貼り付けるだけで、プロジェクトに必要なフォーマットの本番対応コードを取得できます。1行に1つ、またはカンマとスペースで区切ったHEX値に対応し、rgb()やhsl()の表記も理解します。
6つの出力フォーマットがリアルタイムで生成されます。CSSカスタムプロパティ、SCSS変数、Tailwind設定のカラーブロック、JSON、SVGスウォッチ、プレーンなHEXリストです。設定可能な変数プレフィックスにより、生成される名前をコードベースと一致させることができ、各フォーマットはクリップボードへのコピーまたはファイルとしてのダウンロードが可能です。
すべてブラウザ内で動作し、貼り付けた色がどこかに送信されることはありません。他のパレットツールと自然に組み合わせられます。別の場所でパレットを抽出または生成し、ここに貼り付ければ、スタイルシート、フレームワーク、デザインパイプラインが求める正確なスニペットが手に入ります。
パレットエクスポーターの使い方
- 色を入力欄に貼り付けます――HEX、rgb()、hsl()を1行ごと、またはカンマ区切りで。
- 「色を更新」をクリックしてパレットに解析するか、サンプルを読み込んで試してみます。
- 書き出しフォーマットを選びます――CSS変数、SCSS、Tailwind設定、JSON、SVGスウォッチ、またはプレーンHEX。
- カスタムの命名にしたい場合は変数プレフィックスを調整します。
- 生成されたコードをコピーするか、ファイルとしてダウンロードします。