toolpodsへの開発依頼はこちら
ブランドカラー設定
✓
#3B82F6
HEX形式
例:
#FF0000テキストカラー
ブランド色を背景に使う場合は「On Brand」を選んでください。 その他の文字色は、生成された明るい背景・サーフェス用です。
#000000
On Brand
ブランド背景上の文字
#21252C
Primary Text
メインテキスト（明るい背景用）
#383E47
Header, Label
ヘッダー・ラベル
#5C6470
Secondary Text
副次テキスト
#9197A1
Disabled Text
無効テキスト
UIカラー
#BBBEC3
Border, Separator
ボーダー・区切り線
#D7D8DB
Light Background
薄い背景
#F2F2F3
Surface
サーフェス
テキストサンプル
ブランド背景上の文字サンプル（On Brand・不透明な背景用）
メインヘッドライン
これはプライマリテキストです。最も重要な本文テキストに使用されます。 読みやすさを重視しながら、ブランドカラーの色味を微妙に反映しています。
セカンダリテキスト - 補足情報や説明文に使用
無効テキスト - 使用できない項目やプレースホルダー
カードコンポーネント例
このように生成されたカラーパレットを使用して、統一感のあるUIコンポーネントを作成できます。
関連ツール
🏆人気ツールランキング
最近よく使われているツールのランキングです