カラー・スワッチシート生成器

カラー・スワッチシート生成器

色のリストを貼り付け、すぐに印刷可能なスワッチシートとしてプレビューし、短いおよび長い16進数、rgb()、rgba()、hsl()、hsla()、またはtomatoなどのCSS名色を混ぜて、高解像度PNGまたはスケーラブルSVGとしてダウンロードして、手渡し、印刷、またはデザインシステムのドキュメントに使用できます。

使用方法

1. 1行ずつ色をテキストエリアに入力、または 色 をクリックして、スタートパレットを読み込みます。 例を試してみてください。 スワッチサイズ
2. 調整 コラム, ギャップ, シートパディングと、 必要なレイアウトに合わせます。 各スワッチにヘキサデシマルラベルまたは一致したCSS色名を表示する背景色を選択し、切り替えます。
3. ラベルの色をどう選ぶか —
4. 各スワッチに対してコントラストを使用、または2倍のマトリクスエクスポート用に 自動 を指定、または 常にダーク または 常にライト.
5. クリック PNGをダウンロード を指定して、Figma、Illustrator、またはブラウザで開けるベクターファイルに使用します。 SVG をダウンロード 複数フォーマット入力

機能

• — 16進数（#abc、#aabbcc、#aabbccdd）、rgb()、rgba()、hsl()、hsla()、およびCSS名色を1つのリストに受け入れます。 — タイプ中にシートが再構築され、レイアウトの変更が即時になります。
• リアルタイムSVGプレビュー カスタマイズ可能なグリッド
• — 列数、スワッチの幅と高さ、ギャップ、パディング、およびコーナー半径を制御できます。 スマートラベル
• — ヘキサデシマルコードを表示し、一致するCSS色名を自動検出し、コントラストまたは固定色を選びます。 透過色
• — アルファ値を持つスワッチは、チェックパターン上にレンダリングされ、エクスポート時に透過度が視覚的に明確になります。 2つのエクスポートフォーマット
• — Canvasによる高解像度PNG、およびベクターファイルとしてコピー可能なSVG。 — 色はブラウザ内に残るので、未公開ブランドパレットでも安全です。
• 完全にクライアントサイド 16進数色コードとは何ですか？なぜ8桁があるのですか？