このツールはブラウザで即時実行できます。登録もサーバー処理も不要です。
このツールが役に立ちましたか？
byteflow.tools をインストールすると、起動が速くなり、オフラインでもツールを使えます。
インストールガイドこのツールが役に立ちましたか？
byteflow.tools をインストールすると、起動が速くなり、オフラインでもツールを使えます。
インストールガイドベースカラーから 10〜12 段階のシェードを作成し、トークン向け CSS 変数を出力します。
ベース カラーから明るい色合いと暗い色合いを生成して、背景、境界線、テキスト、および状態の一貫した UI スケールを構築します。トークン。
選択したベース カラーを中心に陰影と色合いのバリエーションを生成します。
デザイン トークンとコンポーネントの状態の体系的なカラー スケールの作成に役立ちます。
色相の一貫性を維持しながらパレットの拡張を加速します。
ベース カラー
#2563EB
シェード数
10 段階スケール(50-900)
モード
バランスの取れた色合いと色合い
シェードスケール
50:#EFF6FF ... 500:#3B82F6 ... 900:#1E3A8A
トークン マッピング
--blue-100、--blue-200、--blue-300 ...
アクセシビリティに関する注意
目標のコントラスト比を満たすテキストと背景のペアを割り当てます。
スケール ステップが視覚的に不均一に感じられます
線形チャネル シフトではなく知覚調整を使用します。
中間トーンが飽和しすぎます
中央ステップの周りの飽和曲線を減らします。
暗いステップでは色相の同一性が失われます
色相のアンカーリングを維持しながら輝度を調整します。
トークンが多すぎると使用法が複雑になります
プロダクション コンポーネントには限定されたセマンティック サブセットを採用します。
カラーシェードジェネレーター は、提出・公開・引き継ぎの前に行う迅速な検証ステップとして運用するのが適切です。
デザイン システムにはいくつの色合いを含める必要がありますか?
通常は 8 ～ 10 のステップで、より小さいサブセットが意味的に使用されます。
すべてのシェードを UI で使用する必要がありますか?
いいえ、必要なステップのみを具体的なコンポーネントの役割にマップします。
生成されたシェードはアクセシビリティを保証できますか?
いいえ、それぞれのコントラストを確認しますテキストと背景のペア。
色合いと色合いは同じですか?
色合いは黒に向かって暗くなり、色合いは白に向かって明るくなります。