カラー
Figmaに定義済み
Dentsu Design Systemで使用するカラーパレットです。キーカラーを変更すると、アクセントカラーと調和色が自動計算されます。
デザインパレット（自動計算）
アクセントカラーと調和色を統合したメインパレットです。色相環の理論に基づいて自動計算されます。
計算ロジック
デザインパレットは色相環（HSL色空間）に基づいて計算されます。 キーカラーを基点として、補色（180度）、類似色（±30度）を組み合わせることで、 調和の取れた配色を自動生成します。
Primary（アクセント）動的
#C8FF00
キーカラー（色相環の基点）
メインアクション、フォーカス、ホバー
Secondary（補色）動的
#3700FF
180度回転（最大コントラスト）
強調、コントラスト、CTA
Tertiary（類似色1）動的
#49FF00
+30度回転（自然な調和）
サブアクション、グラデーション
Quaternary（類似色2）動的
#FFB600
-30度回転（自然な調和）
装飾、バックグラウンド
Primary（アクセント）の明度バリエーション
#E9FF99
#D8FF4D
#C8FF00
#A0CC00
#789900
Secondary（補色）の明度バリエーション
#AF99FF
#734DFF
#3700FF
#2C00CC
#210099
拡張パレット（自動計算）
三分割・分裂補色など、より多様な配色オプションです。
三分割色 1
#00C8FF
+120度
三分割色 2
#FF00C8
+240度
分裂補色 1
#0048FF
+150度
分裂補色 2
#B700FF
+210度
ニュートラルカラー（自動計算）
アクセントカラーの色相を微量に含むグレースケールです。
White
#FFFFFF
背景、カード
Gray 50動的
#FAFAFA
サブ背景
Gray 100動的
#F5F5F4
ホバー背景、区切り
Gray 200動的
#E6E7E4
ボーダー、区切り線
Gray 300動的
#D5D6D1
非アクティブボーダー
Gray 400動的
#A9ABA0
非アクティブアイコン
セマンティックカラー（固定）
状態を表すカラーです。ユーザビリティのため固定値を使用します。
Success
#22C55E
成功、完了状態
Warning
#F59E0B
警告、注意
Error
#EF4444
エラー、削除
Info
#3B82F6
情報、リンク
コード例
使用例
SuccessWarningErrorInfo