ティントとシェード生成器 — カラーバリエーションを作成

最も明るいティントから最も暗いシェードまでの完全なカラースケールはあらゆるデザインシステムの基盤です。生成器はTailwind CSSのカラースケールに似た9〜11色のバリエーションを作成します。

ティントとシェードの違い

ティントは白を混ぜた色（高い輝度）。シェードは黒を混ぜた色（低い輝度）。デザインシステムでは50（最も明るい）〜900（最も暗い）で番号付けされ、500がベーストーンです。

HSLを使ったカラーバリエーション

最も単純な方法：HおよびSは一定に保ちながらHSLのL値のみを調整。より良い結果：OKLCHカラー空間による知覚的に均一な輝度変化。OKLCH バリエーントは視覚的に均一に見えます。

デザインシステムでの活用

カラースケールは開発者とデザイナーの共通言語を生み出します：「ボタンにはprimary-700、背景にはprimary-100を使用」。一貫性は意思決定の疲労を減らし、デザインプロセスを加速させます。