📐 1つのツールキットで あらゆるデザイン作業を

UIカラーシステム

Generate complete design token palettes from a single seed color. Export to Tailwind, CSS, or SCSS.

English 中文 日本語 한국어 Español Português Français Deutsch العربية हिन्दी ไทย Tiếng Việt Bahasa Русский

📐 UIカラーシステム

UIカラーシステムガイド

UI カラー システムは、単一のシード カラーから構築された一連のカラー バリアントです。デザイントークン、ボタン、背景、テキストの色に一貫した明から暗のスケールを提供します。

シードの色を選択し、スタイル (Tailwind またはマテリアル) を選択します。このツールは、明るい (50) から暗い (900) までの完全な 10 ステップのパレットを生成し、デザイン システムに最適です。

Pro Tips

FAQ

Q: デザイントークンとは何ですか?

デザイントークンとは何ですか?デザイン トークンは、色などのデザイン属性を保存する名前付きの値で、デザイン システム全体で一貫して使用されます。

Q: なぜ 10 色必要なのでしょうか?

なぜ 10 色必要なのでしょうか? UI 要素が異なれば、必要なコントラスト レベルも異なります。 10 段階のスケールにより、背景、境界線、ホバー状態、テキストを柔軟に設定できます。