カラーコードとパレット
パープル系の色一覧
パープルは繊細なラベンダー、鮮やかなバイオレット、深いプラムまでを含みます。彩度によって想像力豊か、高級感、個性的といった印象になり、抑えたニュートラルな面と組み合わせると特に効果的です。
パープル
#A855F7
カラー形式
同じベースカラーを主要な Web 形式で表しています。
濃淡
| カラー | 名前 | HEX | RGB | HSL | コピー |
|---|---|---|---|---|---|
| Lavender Blush | #FAF5FF | 250, 245, 255 | 270, 100%, 98% | ||
| Lavender Light | #F3E8FF | 243, 232, 255 | 269, 100%, 95% | ||
| Lavender | #E9D5FF | 233, 213, 255 | 269, 100%, 92% | ||
| Wisteria | #D8B4FE | 216, 180, 254 | 269, 97%, 85% | ||
| Orchid | #C084FC | 192, 132, 252 | 270, 95%, 75% | ||
| Purple | #A855F7 | 168, 85, 247 | 271, 91%, 65% | ||
| Violet | #9333EA | 147, 51, 234 | 271, 81%, 56% | ||
| Amethyst | #7E22CE | 126, 34, 206 | 272, 72%, 47% | ||
| Grape | #6B21A8 | 107, 33, 168 | 273, 67%, 39% | ||
| Plum | #581C87 | 88, 28, 135 | 274, 66%, 32% | ||
| Fuchsia Light | #FDF4FF | 253, 244, 255 | 289, 100%, 98% | ||
| Fuchsia Pale | #FAE8FF | 250, 232, 255 | 287, 100%, 95% | ||
| Fuchsia | #F5D0FE | 245, 208, 254 | 288, 96%, 91% | ||
| Pink Magenta | #F0ABFC | 240, 171, 252 | 291, 93%, 83% | ||
| Magenta | #E879F9 | 232, 121, 249 | 292, 91%, 73% | ||
| Hot Pink | #D946EF | 217, 70, 239 | 292, 84%, 61% | ||
| Deep Magenta | #C026D3 | 192, 38, 211 | 293, 69%, 49% | ||
| Purple Red | #A21CAF | 162, 28, 175 | 295, 72%, 40% | ||
| Berry | #86198F | 134, 25, 143 | 295, 70%, 33% | ||
| Dark Purple | #701A75 | 112, 26, 117 | 297, 64%, 28% |
CSS キーワード: purple
CSS ではキーワード purple で指定できます。
文字のコントラスト
これらの比率は WCAG の相対輝度の式で計算しています。
Aa 白い文字 3.96:1
AA · 大きなテキスト
Aa 黒い文字 5.31:1
AA
パープルの使い方
クリエイティブ・プレミアムなブランディング
機能のハイライトとグラデーション
美容・カルチャー・エンタメのプロダクト
パープル と相性のよい色
#A855F7 をもとにした色相環の配色。スウォッチをクリックしてコピーするか、カラーホイールで開けます。