HueOdysseyヴィンテージカラーパレット
ヴィンテージ配色を、7つのセマンティックロール、読みやすいコントラスト、実際のUIプレビュー、CSSですぐ使えるHEX値とともに確認できます。
background#FAF3E7
surface#FFF9EF
secondary#C08A5B
primary#9A4F34
accent#D4A94A
muted#77665A
text#30231C
この配色が機能する理由
経年を感じる色に清潔なニュートラルカラーを組み合わせると、ヴィンテージ感に説得力が生まれます。読みやすさを守り、すべての要素を同じ古びた質感にしないことが大切です。
7色を、主要操作、補助、アクセント、背景、面、文字、控えめな内容に割り当てています。役割が明確なので、ムードボードを超えて実際のUIに使えます。
使い方
主役色はCTAとリンクに使い、すべての装飾へ広げないようにします。
文字はWCAG AAを満たす背景と面の上に配置します。
アクセントはバッジ、強調、注意を向けたい瞬間に限定すると効果的です。
関連する方向性
よくある質問
この色を商用プロジェクトで使えますか？
はい。HEX値は色の数値であり、ライセンス素材ではありません。実際のUIやブランドの文脈に合わせて調整してください。
このパレットはWCAG要件を満たしていますか？
文字ロールは背景と面に対して確認しています。色、書体、サイズ、太さを変更した場合は、もう一度コントラストを確認してください。