無料オンラインカラーシェードジェネレーター
任意のベースカラーからティントとシェードを生成。
Who uses the カラーシェードジェネレーター?
- デザインシステムやコンポーネントライブラリ用のブランドカラーパレットを作成するフロントエンド開発者。
- ホバー/アクティブ状態のためにブランドカラーの明るい/暗いバリエーションを選ぶデザイナー。
- 視覚的に一貫したインターフェースのために統一されたカラースケールを構築する UI デザイナー。
How the カラーシェードジェネレーター works
ベースとなる HEX カラーを入力するか、カラーピッカーで選択します。
ベースカラーから9段階の明るいティントと9段階の暗いシェードが hex カラースウォッチとして生成されます。
任意のスウォッチをクリックすると、その hex コードがクリップボードにコピーされます。
ベースカラー自体はティントとシェードの行の間に別途表示されます。
Tips & tricks
- ベースカラーだけでなく、任意のスウォッチをクリックするとその特定の hex コードがコピーされます。小さな「Copied!」表示が確認として現れます。
- 「すべてエクスポート」ボタンはないため、完全な CSS 変数や Tailwind 設定のコードブロックが必要な場合は、必要なスウォッチを1つずつコピーしてください。
- 混合方法がシンプルな RGB 混合であるため、彩度の高い色の非常に明るいティントは、知覚補正されたパレットツールと比べてややくすんで見えることがあります。
- カラーピッカーのスウォッチグリッドに頼るのではなく、テキストボックスに hex コードを直接入力すると正確な色が得られます。
Frequently Asked Questions
このツールは何色生成しますか？
合計19色です：9色のティント（明るく、白に混ぜたもの）、ベースカラー、9色のシェード（暗く、黒に混ぜたもの）。スウォッチにはそれぞれの hex コードが表示され、番号付きの階層ラベルは表示されません。
このツールは Tailwind の 50〜950 命名規則を使いますか？
いいえ——スウォッチは Tailwind の数字による階層ラベル（50、100、200……950）なしで、通常の hex コードとして表示されます。必要であれば、生成された hex 値を自分で Tailwind の命名にマッピングできます。
シェードとティントの違いは何ですか？
ティントは白と混ぜた色（より明るい）です。シェードは黒と混ぜた色（より暗い）です。このツールはベースカラーから両方向を生成します。
このツールはどんな色の混合方法を使っていますか？
白（ティント）または黒（シェード）に向かうシンプルな線形 RGB 混合です。OKLCH のような知覚均一な色空間は使用していないため、非常に彩度の高い色相は明るく/暗くする際に中間色よりわずかに不均一に見えることがあります——混合方法を切り替えるオプションはありません。
パレットを CSS 変数や Tailwind の設定ファイルとしてエクスポートできますか？
自動エクスポート機能はありません——一括エクスポートボタンはありません。必要なスウォッチをそれぞれクリックし、hex コードを CSS 変数や Tailwind 設定に手動で貼り付けてください。
Is my data safe when using the カラーシェードジェネレーター?
Completely safe. The カラーシェードジェネレーター processes everything locally in your browser. No input data, results, or usage information is ever transmitted to or stored on any server.
Can I use the カラーシェードジェネレーター output in commercial projects?
Yes. The カラーシェードジェネレーター is a utility tool and its output carries no licensing restrictions. You are free to use results in any project, commercial or personal.
Does the カラーシェードジェネレーター follow official standards?
Yes. The カラーシェードジェネレーター is built to comply with the relevant industry standard or specification for this utility type. If you encounter an unexpected result, verify your input against the specification — edge cases outside the standard may produce undefined behaviour.