カラーティント＆シェードジェネレーター

任意のhexカラーのティント（明るい色）とシェード（暗い色）を生成します。デザインシステム、Tailwindスタイルのカラースケール、CSSカスタムプロパティ用の10ステップのパレットを作成します。

Base Color

Color Scale

#f0f6fe

100

#e2ecfe

200

#c5dafc

300

#99befa

400

#5e99f7

500

#1f71f4

600

#0a58d6

700

#0846aa

800

#063684

900

#052861

950

#031a3f

Export

Name:

:root {
  --color-brand-50: #f0f6fe;
  --color-brand-100: #e2ecfe;
  --color-brand-200: #c5dafc;
  --color-brand-300: #99befa;
  --color-brand-400: #5e99f7;
  --color-brand-500: #1f71f4;
  --color-brand-600: #0a58d6;
  --color-brand-700: #0846aa;
  --color-brand-800: #063684;
  --color-brand-900: #052861;
  --color-brand-950: #031a3f;
}

カラーティント＆シェードジェネレーターの使い方

1ベースhexカラーを入力するか、カラーピッカーを使用します。
210個のティント（明るい色）と10個のシェード（暗い色）を表示します。
3任意のスウォッチをクリックしてhex値をコピーします。
4CSSカスタムプロパティまたはTailwind設定をエクスポートします。

Zenovayアナリティクス

トラフィックを顧客に変える。

リアルタイムの訪問者トラッキング
プライバシーファースト、クッキーバナーなし
2分でセットアップ

Zenovayを見る

よくある質問

ティントとシェードの違いは何ですか？▾

ティントは色に白を加えることで作成され、色相を保持しながら明るくなります。シェードは黒を加えることで作成され、暗くなります。合わせてティントとシェードはカラースケールを形成します。モダンなデザインシステム（Tailwind CSS、Material Design、Ant Designなど）は50〜900のスケールを使用し、50が最も明るいティントで900が最も暗いシェードです。ベースカラーは通常500または600あたりです。

Tailwind CSSはカラースケールをどのように使用しますか？▾

Tailwind CSSは各名前付きカラーに11段階のスケール（50、100、200、300、400、500、600、700、800、900、950）を提供します。カスタムブランドカラーを作成する際は、独自のスケールでTailwind設定を拡張します。このツールはTailwind形式と互換性のあるスケールを生成します。出力をTailwind設定オブジェクトまたはCSSカスタムプロパティ（--color-brand-50から--color-brand-900）としてコピーできます。

HSLカラースペースとは何ですか？▾

HSL（色相、彩度、明度）はスケール生成に直感的な方法で色を表現します。色相（0〜360°）はカラーホイール上の色の角度です。彩度（0〜100%）は色の強度で、0%はグレーです。明度（0〜100%）は明るさで、0%は黒、100%は白です。ティントを作成するには明度を100%に向けて増加させます。シェードを作成するには0%に向けて減少させます。これによりRGB混合よりも知覚的に一貫したスケールが生成されます。

シェード生成方法の違いは何ですか？▾

線形補間（白/黒との混合）：シンプルですが極端な値では色褪せたり濁ったりすることがあります。HSL明度調整：より知覚的に均一ですが、暗いシェードが過飽和になることがあります。クロマ調整（OKLCH/LCH）：最も知覚的に正確で、一貫した見た目の明るさを維持します。Radix UIやshadcn/uiなどのツールはカラーシステムにOKLCHを使用しています。このツールはHSLを使用しており、精度と互換性のバランスが取れています。

CSSでカラースケールを使うにはどうすればよいですか？▾

CSSカスタムプロパティ（変数）として色を定義します：:root { --color-brand-50: #eff6ff; --color-brand-500: #3b82f6; } その後、スタイルでvar(--color-brand-50)として使用します。ダークモードの場合は、@media (prefers-color-scheme: dark)または.darkクラスで同じ変数を再定義します。CSSカスタムプロパティはカスケードし、DOMの任意のレベルで上書きできるため、テーマ設定に強力です。

画像ツール