どの色形式から始められますか？
#4f46e5のようなHEXカラーを使用します。3文字のHEX値は自動的に正規化されます。
1つの色からパレット、濃淡、デザイントークンを生成
カラーパレットジェネレーターを使うと、1つのシードカラーをWebサイト、アプリ、ダッシュボード、ブランド案、デザインシステム向けの実用的なパレットに変換できます。ハーモニーモードを選び、色数を調整し、各スウォッチで読みやすいテキスト色を確認して、本番向けのエクスポートをコピーできます。
このツールはブラウザ内で動作し、HEXパレット、50-900の濃淡スケール、CSSカスタムプロパティ、Tailwindカラーオブジェクト、引き継ぎやドキュメント向けのJSONを出力します。
こんな用途に便利
- 1つのブランドカラーから、ランディングページやプロダクトのカラーシステムをすばやく作る。
- ボタン、背景、境界線、チャート、ステータス状態向けの濃淡スケールを作る。
- パレットを手作業で整形せずに、CSS変数やTailwindカラーをコピーする。
- 生成された各スウォッチで黒または白のどちらのテキストが読みやすいか確認する。
ツールを読み込み中...
カラーパレットジェネレーターFAQ
どのエクスポートが含まれますか？
コピー可能なHEXカラー、CSS変数、Tailwind風のカラー設定、JSONを作成します。
生成された色はアクセシビリティ確認されますか？
各スウォッチに黒または白のより良いテキスト色とコントラスト比が表示されるため、読みやすい組み合わせをすばやく見つけられます。
