推しカラーパレットメーカー

推しの色（カラーコード）を入力するだけで、濃淡（tints/shades）・補色・類似色・トライアド配色と、それぞれのHEX/RGB/HSLコードを自動生成できます。文字色と背景色のコントラスト比（WCAG基準）も確認できます。入力した色はどこにも送信されません。

推しカラー（カラーコード）

「#」の有無や大文字・小文字、3桁省略形（例: #f0a）にも対応しています。

カラーピッカーで選ぶ

入力した色はブラウザの中だけで処理され、どこにも送信されません。

明るいバリエーション（tints）

暗いバリエーション（shades）

補色

類似色

トライアド配色

コントラスト比の確認（うちわ文字などの可読性）

使い方

推しカラーのカラーコードを入力するか、カラーピッカーで色を選びます。
自動生成される明暗バリエーション・補色・類似色・トライアド配色を確認します。
使いたい色の「コピー」ボタンでHEXコードをコピーします。

計算・変換の根拠

配色の生成方法

入力したカラーコード（HEX）を基準に、次の配色を自動生成します。

明るいバリエーション（tints）: 明度（Lightness）を白に向けて4段階（20%・40%・60%・80%）補間した色
暗いバリエーション（shades）: 明度を黒に向けて4段階（20%・40%・60%・80%）補間した色
補色: 色相環で180度反対側の色
類似色: 色相環で±30度の色
トライアド配色: 色相環で+120度・+240度の色（正三角形の関係にある3色）

色の変換にはHEX・RGB・HSLの間の標準的な変換式を使用しています。

コントラスト比の計算方法

文字色と背景色の組み合わせが読みやすいかどうかを、WCAG（Web Content Accessibility Guidelines）2.1 が定める相対輝度・コントラスト比の計算式で判定します。

各色のRGB値をsRGBのガンマ補正を考慮して線形化する
線形化した値から相対輝度 L = 0.2126×R + 0.7152×G + 0.0722×B を求める（人の目は緑を最も明るく、青を最も暗く感じるため、チャンネルごとに重みが異なります）
明るい方の輝度をL1、暗い方をL2として コントラスト比 = (L1 + 0.05) / (L2 + 0.05) を計算する

比率は最小1（同色）〜最大21（白と黒）の範囲になります。判定は次の基準（通常サイズの文字向け）で表示します。

AAA: 7.0以上（十分に読みやすい）
AA: 4.5以上（読みやすい）
それ未満: 基準未満（読みにくい可能性があります）

うちわ文字やSNSアイコンなど、背景色の上に文字を載せるデザインを作る際の目安としてご活用ください。

対応していないこと

画像をアップロードして色を抽出する機能には対応していません（別の専用ツールをご利用ください）。また、印刷用のCMYK等の色空間への変換にも対応していません。

よくある質問

入力した色は送信されますか？

送信されません。配色の計算はすべてお使いのブラウザの中だけで行われ、外部への通信は一切発生しません。

コントラスト比の「AA」「AAA」とは何ですか？

Web Content Accessibility Guidelines（WCAG）2.1が定める、文字と背景の見分けやすさの基準です。数値が大きいほど見分けやすく、AA（4.5以上）は一般的な基準、AAA（7.0以上）はより厳しい基準です。うちわ文字やロゴなど、文字色と背景色を選ぶ際の目安になります。

画像から推しカラーを抽出できますか？

このツールでは対応していません。すでにお持ちのカラーコード（HEX）を入力して配色を生成する専用ツールです。画像から色を抽出したい場合は、画像専用の色抽出ツールをご利用ください。

生成された色はどうやって使えばよいですか？

各色の下に表示されるHEXコードの「コピー」ボタンを押すと、コードがクリップボードにコピーされます。デザインツールやSNSのプロフィール編集画面などに貼り付けてご利用ください。

3桁の省略形カラーコードにも対応していますか？

対応しています。「#f0a」のような3桁の省略形を入力すると、自動的に6桁の正式なコード（この例では#ff00aa）として扱われます。