logoColorTinder

カラーシェード・ジェネレーター

任意のHEXカラーから11段階の完全なカラースケールを生成。CSS変数、Tailwindコンフィグ、SCSS、JSONでエクスポート。

:root {
  --color-brand-50: #f7f5ff;
  --color-brand-100: #ede8fe;
  --color-brand-200: #dad2fc;
  --color-brand-300: #beb3fa;
  --color-brand-400: #998ff6;
  --color-brand-500: #6366f1;
  --color-brand-600: #4e52bc;
  --color-brand-700: #3c408d;
  --color-brand-800: #2d3269;
  --color-brand-900: #21264a;
  --color-brand-950: #191f38;
}

よくある質問

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

シェードは黒と混合した色（暗め）、ティントは白と混合した色（明るめ）です。

エクスポートされたCSS変数の使い方は？

CSSタブの出力をコピーしてグローバルCSSファイルに貼り付け、var(--brand-500)で参照してください。

Tailwind CSSと互換性はありますか？

はい。Tailwindタブに切り替えてcolorsオブジェクトをtailwind.config.jsにコピーしてください。