info概要

カラーパレットツールは、入力したHEXカラーコードからMaterial Designライクなカラーシェードパレットを自動生成するオンラインツールです。比較モードとシェード生成モードの2種類に対応しています。

デザインシステムやコンポーネントライブラリを構築する際、1つのブランドカラーから背景色・ホバー色・無効化状態の色といった複数階調を手作業で決めるのは手間がかかります。本ツールは基準色を入力するだけで一貫性のあるシェード段階を自動生成し、WCAGを踏まえたテキストカラーの候補も同時に確認できます。

checklist使い方

1. 1「比較」または「濃淡」モードを選択します。
2. 2HEXカラーコード（例: #3490DC）を1つ以上入力します。
3. 3「生成」ボタンをクリックします。
4. 4各シェードのカラーコードをクリックしてコピーできます。

補足: 入力したカラーコードやシェード生成結果はブラウザ内のみで保持され、ページを再読み込みすると内容はリセットされます。使用中の配色を残しておきたい場合は、コピーしたコードを別途メモしてください。

menu_book仕様・用語解説

• 「比較」モード: 複数のカラーを並べて比較します。各色のシェード（50〜900）を横に並べて表示し、カラー間のトーンの違いを確認できます。
• 「濃淡」モード: 1色のシェードパレットを詳細表示します。選択した色の全シェードを一覧で確認できます。
• シェードステップ: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900の10段階で表示します。Material Designの慣習に基づいており、数値が小さいほど明るく、大きいほど暗い色になります。
• シェード生成アルゴリズム: 入力色を500ステップの基準色として、それより明るい色（50〜400）は白との線形補間（mixColors）、暗い色（600〜900）は黒との線形補間で生成します。例: 50ステップは白を90%混合、900ステップは黒を60%混合します。
• WCAGコントラスト比: 各シェードのテキスト色（黒または白）は、相対輝度（Relative Luminance）をL = 0.2126R + 0.7152G + 0.0722Bの式で計算し、WCAGガイドラインに基づいてコントラストが高い方を自動選択します。
• HEXカラーコード: 3桁形式（#RGB）と6桁形式（#RRGGBB）の両方に対応しています。#プレフィックスの有無も問いません。
• RGB・HSLとの相互変換: 内部的にはHEXをRGB（赤・緑・青の各成分0〜255）に変換して線形補間を行い、輝度計算やコントラスト判定にも利用します。HSL（色相・彩度・明度）形式での直接入力には対応していません。

lightbulbユースケース

• Material DesignやTailwind CSSのカラーシステム設計。
• ブランドカラーのシェードパレットを自動生成したい場合。
• アクセシビリティ（WCAG）対応のカラー選定と確認。
• Tailwind CSSの命名規則（50〜950の11段階）と本ツールの10段階シェード（50〜900）は段階数が異なる点に注意。950ステップが必要な場合は、900の結果を基準に手動で1段階暗くする。
• 複数の候補ブランドカラーを並べて比較し、コーポレートカラーとして採用する色を検討する場合。

quizよくある質問

RGBやHSL形式のカラーコードは入力できますか

入力欄はHEXカラーコード（#RRGGBBまたは#RGB）のみに対応しています。RGBやHSLで色を指定したい場合は、他のツールで一度HEX形式に変換してから入力してください。

生成されたシェードはWCAGのどの基準に基づいていますか

各シェードの背景色に対して、黒文字と白文字それぞれの相対輝度からコントラストが高い方を自動的に選択して表示しています。ただし表示される文字色は目安であり、WCAG AA（4.5:1）やAAA（7:1）などの具体的な達成基準を満たすかどうかは、別途コントラストチェッカーで数値を確認することをおすすめします。

500ステップの色は入力した色そのものになりますか

はい。500ステップは入力したHEXカラーコードをそのまま基準色として使用します。50〜400は白との線形補間、600〜900は黒との線形補間によって、500を中心に明暗のグラデーションが生成されます。

生成したパレットは保存できますか

現在のバージョンではパレットの保存機能は提供していません。各シェードのカラーコードをクリックしてクリップボードにコピーし、デザインツールやコードに直接貼り付けてご利用ください。

「比較」モードと「濃淡」モードはどう使い分ければよいですか

複数のブランドカラー候補を横並びで見比べたい場合は「比較」モード、1つの色について全シェードを詳しく確認したい場合は「濃淡」モードが適しています。用途に応じて切り替えてご利用ください。

入力したカラーコードは外部に送信されますか

いいえ。シェードの生成やコントラスト計算はすべてブラウザ内のJavaScriptで完結しており、入力したカラーコードが外部サーバーへ送信されることはありません。