ベース色を1つ選ぶと、配色を6パターン計算して色見本として並べ、 CSSの変数コード（--color-1: #xxxxxx; の形）をコピーできるツールです。 文字色との組み合わせのコントラスト比（目安）を見たり、パレットを保存して書き出したりもできます。 同人サイトや、UIの色を決めるときに、色を1色ずつ手で探す手間を減らせます。 ブラウザで開くだけで動き、入力した色は外部に送られません。 まず試したい方には、配色3パターン・CSSコピーまでの無料版もあります。https://mall-aibou.booth.pm/items/8981069 ━━━━━━━━━━━━━━━━━━━━ ご注意 ━━━━━━━━━━━━━━━━━━━━ 配色は、ベース色の色相を回すなどして計算した目安です。見た目の良さや使いやすさを保証するものではありません。 文字色との組み合わせの比は、WCAGの式で計算した目安です。基準への適合を保証するものではありません。 公開前に、実際の画面で確認してください。 ━━━━━━━━━━━━━━━━━━━━ この商品で得られるもの ━━━━━━━━━━━━━━━━━━━━ ◆ 配色6パターン（補色・類似色・トライアド・分裂補色・テトラード・明暗の階調）の色見本 ◆ 明暗の階調の段数を3〜11段で指定（明るい順に並びます） ◆ 文字色（白・黒・好きな色）を選ぶと、各色を背景にしたときのコントラスト比を表示。 　 通常の文字は4.5以上、大きい文字は3以上、AAAは7以上の目安に届くかを○×で確認できます ◆ 色をクリックして16進数コードをコピー、選んだパターンのCSS変数コードをコピー ◆ パレットの保存（複数、最大50件）と呼び出し。この端末のブラウザの中だけに保存されます ◆ JSON / CSS / テキストでの書き出し（コピー、またはファイルに保存） ◆ 見本ページのプレビュー（ヘッダー、ボタン、カードに色を当てはめた例） ━━━━━━━━━━━━━━━━━━━━ 近い商品との違い ━━━━━━━━━━━━━━━━━━━━ ・画像から色を取り出すタイプではなく、色を1つ選んで配色を計算するタイプです ・画像上の背景と文字のコントラストを見るツールではなく、作った配色の各色と文字色の比を見るツールです ・色見本をまとめた素材集ではなく、好きなベース色から配色とCSSコードを作るツールです ━━━━━━━━━━━━━━━━━━━━ 使い方（3ステップ） ━━━━━━━━━━━━━━━━━━━━ 1. palette-css-gen.html をダブルクリックして、ブラウザで開く 2. ベース色を選ぶ（色の四角をクリック、または16進数コードを入力） 3. 並んだ色見本から使いたいパターンを選んで「CSSをコピー」。サイトのCSSに貼り付けて使えます ━━━━━━━━━━━━━━━━━━━━ 動作環境 ━━━━━━━━━━━━━━━━━━━━ ・Chrome / Edge / Safari の最新版 ・ネット接続は不要です ・外部のサーバーと通信しません。広告もトラッキングもありません ━━━━━━━━━━━━━━━━━━━━ できないこと ━━━━━━━━━━━━━━━━━━━━ ・配色の良し悪しの判定はしません。計算結果は目安です ・コントラスト比は目安で、アクセシビリティ基準への適合を保証するものではありません ・画像から色を取り出す機能はありません ・保存したパレットは、ブラウザのデータを消すと消えます。大切なものは書き出して残してください ・別のパソコンやブラウザへ、保存内容を自動で移すことはできません（書き出したファイルは移せます） ■ 使ってよい範囲 　業務・制作にお使いいただけます。クレジット表記は不要です。 　作った配色やCSSコードは、ご自身の制作物に自由にお使いいただけます。 　ファイルそのものの再配布・販売はご遠慮ください。 ■ 同梱物 　palette-css-gen.html ／ README.txt TOOL BOX