色の濃淡生成器
指定した色の明るい〜暗い濃淡バリエーションを一括生成。 段階数の調整やTailwind CSS形式でのパレット出力にも対応。
ベースカラーを選択
ティント（明るい色）
ベースカラーに白を混ぜた明るいバリエーション
シェード（暗い色）
ベースカラーに黒を混ぜた暗いバリエーション
このツールをシェア
📖
使い方
Step 1
色を指定
カラーピッカーまたはHEXコードで色を指定
→
Step 2
濃淡生成
明るい〜暗い濃淡が自動生成されます
→
Step 3
コピー
好きな濃淡のカラーコードをコピー
✨
このツールの特徴
段階数調整
生成する濃淡の段階数を自由に調整
複数形式対応
HEX・RGB・HSLなど複数形式でコピー可能
パレット出力
Tailwind CSS形式などでパレットを出力
❓
よくある質問
デフォルトは10段階ですが、自由に変更できます。
🔗関連ツール
🎨
デザインカラーコード変換器
HEX・RGB・HSLのカラーコードを相互変換。 カラーピッカーとリアルタイムプレビューで直感的に操作。
🎨
デザインカラーピッカー
カラーホイールやスライダーで直感的に色を選べるツール。 HEX・RGB・HSL形式でカラーコードを取得・コピーできる。
🎨
デザイン画像色抽出器
画像から主要な色を自動検出してカラーパレットを生成。 画像上の任意の位置をクリックして個別に色を取得することも可能。
🎯
デザイン画像平均色取得
画像全体または選択範囲の平均色を算出するツール。 デザインの配色決めやサムネイル背景色の決定に活用できる。
🌈
デザインCSSグラデーション生成器
CSSグラデーションをドラッグ操作で視覚的に作成するツール。 リニア・ラジアル・コニックの3タイプとプリセットを搭載。
🔲
デザインCSSボックスシャドウ生成器
CSSのbox-shadowをスライダーで視覚的に調整・生成するツール。 複数シャドウの重ね合わせや内側シャドウ（inset）にも対応。