カラーコードとパレット
ピンク系の色一覧
ピンクはやさしいブラッシュから元気なマゼンタまで変化します。淡い色は親しみやすい面を、強い色はモダンなエディトリアルやプロダクトデザインに表情豊かなアクセントを生み出します。
ピンク
#EC4899
カラー形式
同じベースカラーを主要な Web 形式で表しています。
濃淡
| カラー | 名前 | HEX | RGB | HSL | コピー |
|---|---|---|---|---|---|
| Blush Light | #FDF2F8 | 253, 242, 248 | 327, 73%, 97% | ||
| Rose Quartz | #FCE7F3 | 252, 231, 243 | 326, 78%, 95% | ||
| Cotton Candy | #FBCFE8 | 251, 207, 232 | 326, 85%, 90% | ||
| Bubblegum | #F9A8D4 | 249, 168, 212 | 327, 87%, 82% | ||
| Carnation | #F472B6 | 244, 114, 182 | 329, 86%, 70% | ||
| Pink | #EC4899 | 236, 72, 153 | 330, 81%, 60% | ||
| Hot Pink | #DB2777 | 219, 39, 119 | 333, 71%, 51% | ||
| Magenta Pink | #BE185D | 190, 24, 93 | 335, 78%, 42% | ||
| Raspberry | #9D174D | 157, 23, 77 | 336, 74%, 35% | ||
| Dark Pink | #831843 | 131, 24, 67 | 336, 69%, 30% | ||
| Rose Light | #FFF1F2 | 255, 241, 242 | 356, 100%, 97% | ||
| Rose | #FFE4E6 | 255, 228, 230 | 356, 100%, 95% | ||
| Rose Medium | #FECDD3 | 254, 205, 211 | 353, 96%, 90% | ||
| Salmon | #FDA4AF | 253, 164, 175 | 353, 96%, 82% | ||
| Coral Pink | #FB7185 | 251, 113, 133 | 351, 95%, 71% | ||
| Watermelon | #F43F5E | 244, 63, 94 | 350, 89%, 60% | ||
| Cerise | #E11D48 | 225, 29, 72 | 347, 77%, 50% | ||
| Cherry Pink | #BE123C | 190, 18, 60 | 345, 83%, 41% | ||
| Cranberry | #9F1239 | 159, 18, 57 | 343, 80%, 35% | ||
| Burgundy Pink | #881337 | 136, 19, 55 | 342, 75%, 30% |
CSS キーワード: pink
CSS ではキーワード pink で指定できます。
文字のコントラスト
これらの比率は WCAG の相対輝度の式で計算しています。
Aa 白い文字 3.53:1
AA · 大きなテキスト
Aa 黒い文字 5.95:1
AA
ピンクの使い方
親しみやすいライフスタイル系 UI
表情豊かなエディトリアルのアクセント
美容・ファッション・コンシューマーブランド
ピンク と相性のよい色
#EC4899 をもとにした色相環の配色。スウォッチをクリックしてコピーするか、カラーホイールで開けます。