単一のブランドカラーを、50～950のシェードスケール、ライトモードとダークモード用のセマンティックトークン、アクセシビリティ準拠のコントラストペアリングを備えた完全なデザインシステムに変換します。CSSカスタムプロパティ、Tailwind設定、またはデザイントークンとしてエクスポートし、プロダクションで即座に使用できます。
ブランドパレットのすべての色に対して50～950のスケールを生成します。各シェードは知覚的に均一で、一貫した明度ステップがテストされています。
ライトモードとダークモードの両方で機能するセマンティックカラートークンを自動生成します。サーフェス、テキスト、アクセントカラーが両テーマにマッピングされます。
すべてのカラーペアリングはWCAG AAコントラスト比に対してチェックされます。テキスト、UI、装飾要素にどの組み合わせが機能するかが表示されます。
カラーシステム全体をCSSカスタムプロパティ、Tailwind CSS設定、SCSSマップ、JSONトークン、または共有可能なスタイルガイドとしてエクスポートします。
セマンティックトークンは、色を特定の値ではなく、その目的（「background」「text-primary」「border」「error」など）にマッピングします。これにより、コンポーネントコードに触れることなく、テーマの切り替え（ライト/ダーク）やリブランドが容易になります。
私たちは知覚的に均一な明度段階のためにOKLCH色空間を使用しています。ブランドカラーを基に、単純なHSL明度調整とは異なり、人間の目に均等に感じられる10段階のシェードを計算します。
まずプライマリカラーから始めてください。ジェネレーターがその周りに完全なシステムを作成します。生成されたシステム内でセカンダリカラーやアクセントカラーを調整できます。
はい。エクスポートされたTailwind設定は、Tailwind v3（tailwind.config.js）とv4（@theme inline）の両方と互換性のあるCSSカスタムプロパティ形式を使用しています。