ティンツ・シェード生成ツール

ティントは色に白を加えることで作成され、明るくなります。シェードは色に黒を加えることで作成され、暗くなります。トーンはグレーを加えることで作成されます。デジタルデザインでは、ティントとシェードはUIコンポーネントのための一貫したカラースケールを作成するために使用されます — 背景には明るいティント、ボタンやインタラクティブ要素には中間の色、テキストや境界線には暗いシェード。Tailwind CSSなどのデザインシステムは10段階のスケール（50、100、200...900）を使用します。

このジェネレーターはベースカラーと白（ティント用）または黒（シェード用）の間の線形補間を使用します。各ステップはベースカラーを白または黒と等しいパーセンテージでブレンドします。例えば、9ステップの場合：ティント1は10%ベース + 90%白、ティント5は50/50、ティント9は90%ベース + 10%白です。これによりsRGBカラースペースで知覚的に一貫したステップが生成されます。

16進数コードをCSSに直接貼り付けるか、CSSカスタムプロパティとして定義します：--color-100: #f5f3ff; --color-500: #7c3aed; --color-900: #1e0a4b; など。その後var(--color-500)で参照します。Tailwind CSSには、theme.colorsの下のtailwind.config.jsに生成されたスケールを追加できます。デザイントークンには、FigmaやStorybookで使用するためにJSONオブジェクトとしてエクスポートします。

HSL（色相、彩度、明度）は知覚的に均一なスケールを生成するために好まれることが多いです。色相と彩度を一定に保ちながらHSLで明度を調整すると、一貫して見える色が生成されます。ただし、sRGB補間（このツールが使用する）はシンプルでUIデザインに予測可能な結果をもたらします。より高度な知覚的カラースペースには、最新のCSSでサポートされているOKLCHまたはLCHを検討してください。

Figmaでは、各色スウォッチの矩形を持つフレームを作成し、16進数値をラベルとして追加することでカラーライブラリを作成できます。その後、各矩形を右クリック → コンポーネントを作成し、チームライブラリに公開します。あるいは、「CSS変数」エクスポートを使用して、Design TokensやToken Studioなどのfigmaプラグインに貼り付けます。このツールから生成されたCSS変数をコピーして直接プラグインに貼り付けてください。