ベース色を1つ選ぶと、補色・類似色・トライアドの3パターンを計算して色見本として並べ、 CSSの変数コード（--color-1: #xxxxxx; の形）をコピーできるツールです。 同人サイトや、UIの色を決めるときに、色を1色ずつ手で探す手間を減らせます。 ブラウザで開くだけで動き、入力した色は外部に送られません。 ━━━━━━━━━━━━━━━━━━━━ ご注意 ━━━━━━━━━━━━━━━━━━━━ 配色は、ベース色の色相を回すなどして計算した目安です。見た目の良さや使いやすさを保証するものではありません。 公開前に、実際の画面で確認してください。 ━━━━━━━━━━━━━━━━━━━━ この無料版で得られるもの ━━━━━━━━━━━━━━━━━━━━ ◆ ベース色を1つ選ぶだけで、配色3パターン（補色・類似色・トライアド）の色見本 ◆ 色をクリックして16進数コードをコピー ◆ 選んだパターンのCSS変数コード（:root に --color-1, --color-2 …）をコピー ━━━━━━━━━━━━━━━━━━━━ 有料版（500円）で増えるもの ━━━━━━━━━━━━━━━━━━━━ ◆ 配色6パターン（分裂補色・テトラード・明暗の階調を追加） ◆ 明暗の階調の段数を3〜11段で指定 ◆ 文字色との組み合わせのコントラスト比を表示（WCAGの式で計算した目安） ◆ パレットの保存（複数） ◆ JSON / CSS / テキストでの書き出し ◆ 見本ページのプレビュー 有料版はこちらです。https://mall-aibou.booth.pm/items/8981072 ━━━━━━━━━━━━━━━━━━━━ 使い方（3ステップ） ━━━━━━━━━━━━━━━━━━━━ 1. palette-css-gen-free.html をダブルクリックして、ブラウザで開く 2. ベース色を選ぶ（色の四角をクリック、または16進数コードを入力） 3. 並んだ色見本から使いたいパターンを選んで「CSSをコピー」。サイトのCSSに貼り付けて使えます ━━━━━━━━━━━━━━━━━━━━ 動作環境 ━━━━━━━━━━━━━━━━━━━━ ・Chrome / Edge / Safari の最新版 ・ネット接続は不要です ・外部のサーバーと通信しません。広告もトラッキングもありません ━━━━━━━━━━━━━━━━━━━━ できないこと ━━━━━━━━━━━━━━━━━━━━ ・配色の良し悪しの判定はしません。計算結果は目安です ・画像から色を取り出す機能はありません ・パレットの保存はありません（有料版の機能です） ■ 使ってよい範囲 　業務・制作にお使いいただけます。クレジット表記は不要です。 　作った配色やCSSコードは、ご自身の制作物に自由にお使いいただけます。 　ファイルそのものの再配布・販売はご遠慮ください。 ■ 同梱物 　palette-css-gen-free.html ／ README.txt TOOL BOX