HueOdyssey
メニューを開く
日本語
配色の実践ガイド

高級感のあるカラーパレット

高級感のある配色を、7つのセマンティックロール、読みやすいコントラスト、実際のUIプレビュー、CSSですぐ使えるHEX値とともに確認できます。

background#F6F1E8
surface#FFFDF8
secondary#9A7B55
primary#5A4634
accent#B7904B
muted#6E6257
text#211A16

この配色が機能する理由

高級感は、金色や装飾を増やすだけでは生まれません。落ち着いた主役色と温かみのある面を組み合わせ、特別に見せたい箇所だけにアクセントを使うと上品にまとまります。

7色を、主要操作、補助、アクセント、背景、面、文字、控えめな内容に割り当てています。役割が明確なので、ムードボードを超えて実際のUIに使えます。

使い方

主要な操作を一つに絞る

主役色はCTAとリンクに使い、すべての装飾へ広げないようにします。

文字のコントラストを守る

文字はWCAG AAを満たす背景と面の上に配置します。

アクセントを使いすぎない

アクセントはバッジ、強調、注意を向けたい瞬間に限定すると効果的です。

関連する方向性

よくある質問

この色を商用プロジェクトで使えますか?

はい。HEX値は色の数値であり、ライセンス素材ではありません。実際のUIやブランドの文脈に合わせて調整してください。

このパレットはWCAG要件を満たしていますか?

文字ロールは背景と面に対して確認しています。色、書体、サイズ、太さを変更した場合は、もう一度コントラストを確認してください。