Gold カラー

ゴールド — 高級感と達成の色

#FFD700Gold

カラー値

HEX#FFD700

RGBrgb(255, 215, 0)

HSLhsl(51°, 100%, 50%)

CSSgold

シェードパレット

#FFFDE7

100

#FFF9C4

300

#FFF176

500

#FFEE58

700

#F9A825

900

#E65100

補色

↔

#0028FF

Ultramarine Blue

類似色

#FFC107

Amber

#FFEC47

Lemon Yellow

CSS使用例

CSS

/* By name */
color: gold;
background-color: gold;

/* By HEX */
color: #FFD700;
background-color: #FFD700;

/* By RGB */
color: rgb(255, 215, 0);

/* By HSL */
color: hsl(51deg, 100%, 50%);

/* With opacity */
color: rgba(255, 215, 0, 0.8);
color: hsl(51deg 100% 50% / 80%);

ゴールド(#FFD700)は明るい色で白い背景ではコントラスト比が非常に低くなります(約1.4:1)。テキストには絶対に使わないでください。アイコンや装飾的な要素、または暗い背景との組み合わせで最も効果的です。

ゴールド(#FFD700)は貴金属の金を模した色で、富・達成・卓越さ・高級感を象徴します。UIでは星評価、トロフィー、プレミアムバッジなどの要素に最もよく使われます。暗い背景上で特に輝きを発揮し、黒と金の組み合わせは高級ブランドの定番配色です。明るい背景ではコントラストが不足するため、テキストよりもアイコンや装飾的な要素に活用するのが最適です。

主な使用例

▸星評価・レビューアイコン — 5つ星評価の塗りつぶした星
▸プレミアムバッジ・メンバーシップ — Gold/VIPランクの表示
▸授賞式・ランキングUI — トロフィー、メダル、リーダーボード
▸高級eコマース — ジュエリーやブランド品のハイライト
▸クリスマス・季節テーマ — 祝祭UIのデコレーション
▸達成通知 — アプリのマイルストーン達成ポップアップ

Gold カラー

CSS使用例

主な使用例

関連カラー