カラーコードとパレット
オレンジ系の色一覧
オレンジは赤のエネルギーと黄の温かさをあわせ持ちます。親しみやすいピーチ、鮮やかなタンジェリン、落ち着いたバーントオレンジまで幅広く、赤ほどの緊急性を出さずに活気を表現したいデザインに向いています。
オレンジ
#F97316
カラー形式
同じベースカラーを主要な Web 形式で表しています。
濃淡
| カラー | 名前 | HEX | RGB | HSL | コピー |
|---|---|---|---|---|---|
| Papaya | #FFF7ED | 255, 247, 237 | 33, 100%, 96% | ||
| Peach | #FFEDD5 | 255, 237, 213 | 34, 100%, 92% | ||
| Apricot | #FED7AA | 254, 215, 170 | 32, 98%, 83% | ||
| Light Orange | #FDBA74 | 253, 186, 116 | 31, 97%, 72% | ||
| Tangerine | #FB923C | 251, 146, 60 | 27, 96%, 61% | ||
| Orange | #F97316 | 249, 115, 22 | 25, 95%, 53% | ||
| Pumpkin | #EA580C | 234, 88, 12 | 21, 90%, 48% | ||
| Burnt Orange | #C2410C | 194, 65, 12 | 17, 88%, 40% | ||
| Rust | #9A3412 | 154, 52, 18 | 15, 79%, 34% | ||
| Brown Orange | #7C2D12 | 124, 45, 18 | 15, 75%, 28% | ||
| Amber Light | #FEF3C7 | 254, 243, 199 | 48, 96%, 89% | ||
| Amber | #FDE68A | 253, 230, 138 | 48, 97%, 77% | ||
| Gold | #FCD34D | 252, 211, 77 | 46, 97%, 65% | ||
| Honey | #FBBF24 | 251, 191, 36 | 43, 96%, 56% | ||
| Marigold | #F59E0B | 245, 158, 11 | 38, 92%, 50% | ||
| Copper | #D97706 | 217, 119, 6 | 32, 95%, 44% | ||
| Bronze | #B45309 | 180, 83, 9 | 26, 90%, 37% | ||
| Caramel | #92400E | 146, 64, 14 | 23, 83%, 31% | ||
| Chocolate | #78350F | 120, 53, 15 | 22, 78%, 26% | ||
| Sienna | #451A03 | 69, 26, 3 | 21, 92%, 14% |
CSS キーワード: orange
CSS ではキーワード orange で指定できます。
文字のコントラスト
これらの比率は WCAG の相対輝度の式で計算しています。
Aa 白い文字 2.80:1
不合格
Aa 黒い文字 7.49:1
AAA
オレンジの使い方
親しみやすい CTA
アウトドアやクリエイティブ系のブランド
データビジュアライゼーションの暖色アクセント
オレンジ と相性のよい色
#F97316 をもとにした色相環の配色。スウォッチをクリックしてコピーするか、カラーホイールで開けます。