カラーパレットジェネレーター
ベースカラーを選ぶだけで、明るい色から暗い色までの滑らかなパレットを瞬時に生成。そのままデザインシステムにコピーできます。
🔒 お使いのブラウザ内でローカル処理されます
Loading…
使い方
- 「ベースカラー」欄にHEXコードを入力するか、カラースウォッチのピッカーをクリックして視覚的に色を選びます。
- 有効な色が認識されると、その下に配色パレット全体が自動的に表示されます。ボタンを押す必要はありません。
- パレットは非常に明るい色調から非常に暗い色調までの範囲をカバーし、すべてベースカラーと同じ色相を保ちます。
- 各スウォッチをクリックすると、そのHEXコードがクリップボードにコピーされます。「コピーしました！」の表示で成功を確認できます。
特徴
- 任意のベースカラーから滑らかな9段階の明暗パレットを生成
- Tailwindのカラースケールと同様に、すべての段階で色相と彩度を一定に保持
- 近似値ではなく、入力した正確なベースカラーをパレットに含める
- 各スウォッチのHEXコードをワンクリックでコピー
- 完全にクライアントサイドで処理 — カラー値がブラウザの外に出ることはありません
よくある質問
このツールは自分の色をどこかに送信しますか？
いいえ。パレット全体はブラウザ内で単純なJavaScriptの計算により生成されます。データがサーバーにアップロードされたり送信されたりすることはありません。
配色はどのように計算されていますか？
ツールはまずベースカラーをHSLに変換し、色相と彩度を固定したまま、明度を非常に明るい値から非常に暗い値まで均等に段階分けします。入力した正確なベースカラーは、スケールの中央に配置されます。
生成したパレットをTailwindや他のデザインシステムで使えますか？
はい。このパレットはTailwindの50/100/.../900のカラースケールと同じ考え方に基づいており、1つの色相の明暗グラデーションです。そのままHEXコードを自分のテーマやCSS変数にコピーして使えます。
どの色形式を入力できますか？
HEXコードのみ対応しています。先頭の#はあってもなくても構わず、3桁の省略形（#abcなど）でも6桁（#3b82f6など）でも入力できます。視覚的に選びたい場合はカラーピッカーを使ってください。
なぜエラーメッセージが表示されるのですか？
入力したテキストが認識可能なHEXカラー形式と一致していません。#3b82f6（または 3b82f6、あるいは省略形の #abc）のような形式になっているか確認してください。