カラーパレット

ピンク

赤に白をたっぷり加えて明るくした色です。やさしさやロマンスを連想させますが、今ではあらゆるブランドで使われています。服やコスメ、啓発キャンペーンでよく見かけます。

別名：ピンク色, 桃色系

ピンク · #FFC0CB

ピンクの基本情報

ピンク（#FFC0CB）は、暖色系・明るめ・鮮やかの色です。ピンク系の色のグループに属します。RGBの値は赤255・緑192・青203（各255段階）。主な用途：ファッション, 子ども向け, ブランディング。

ピンクの濃淡：明るいトーンと暗いトーン

明るい色から暗い色の順に並んでいます。色をタップするとカラーコードをコピーできます。

ピンクに合う色

グレー上品でモダンな組み合わせです。白爽やかで清潔感のある、やわらかな印象に。ネイビークラシックで洗練されたコントラストです。セージグリーンやわらかな補色のコントラストです。ベージュ温かくナチュラルなベースです。ゴールドほどよい高級感と華やかさを添えます。水色甘いパステル同士の組み合わせです。ワインレッド上品な赤のグラデーションです。
ピンクのファッション・インテリアでの合わせ方 →

ピンクの配色ハーモニー

色相環にもとづいた配色です。配色ハーモニーツールでさらに多くのパターンを試せます。

補色近い色：パステルターコイズ
類似色近い色：ライラック, アプリコット
トライアド近い色：クリーム色, パステルライラック
スプリット・コンプリメンタリー近い色：アクアマリン, ライトブルー
テトラード近い色：クリーム色, パステルターコイズ, パステルライラック

ピンクを使ったカラーパレット

カラーコードをコピーするか、エディターで開いて自由に調整できます。

モノクロマティックパレット · ピンク
類似色パレット · ピンク
補色パレット · ピンク
トライアドパレット · ピンク
ニュートラルカラー入りパレット · ピンク
アクセントカラー入りパレット · ピンク

ピンクと文字色のコントラスト

白い文字コントラスト比 1.5:1 · 非推奨
黒い文字コントラスト比 13.7:1 · AAA

WCAG 2.1の基準にもとづいています。ほかの色の組み合わせはコントラストチェッカーで確認できます。

CSSコード

:root {
  --pink: #FFC0CB;
  --pink-rgb: 255, 192, 203;
}
.bg { background-color: var(--pink); }
.text { color: var(--pink); }

ピンクに近い色

ベビーピンクくすみピンクパステルピンクローズクォーツダスティローズアプリコットライラックフラミンゴピンクパールグレーオールドローズ

この色を使ったテーマ別パレット

洗礼式のカラーパレット誕生日パーティーのカラーパレットキンセアニェーラ（15歳のお祝い）のカラーパレット美容室・ビューティーサロンのカラーパレットパン屋・洋菓子店のカラーパレットモノクロマティックなカラーパレット

その他のピンク系の色

くすみピンクオールドローズフューシャピンクマゼンタホットピンクメキシカンピンクパステルピンクベビーピンクディープピンクラズベリーローズクォーツローズゴールドブラッシュピンクフラミンゴピンクネオンピンクダスティローズ

よくある質問

ピンクのカラーコードは？

ピンクのHEXコードは#FFC0CBです。RGBではrgb(255, 192, 203)、HSLではhsl(350, 100%, 88%)、CMYKでは0, 25, 20, 0となります。

ピンクの補色は何色ですか？

色相環で反対側にある補色は#C0FFF4で、パステルターコイズに近い色合いです。少量をアクセントとして使うと、強いコントラストが生まれます。

ピンクの上に白い文字を置いても読みやすいですか？

黒い文字のほうがおすすめです。白とのコントラスト比は1.5:1しかありませんが、黒とは13.7:1になります。

ピンクに合う色は？

相性のよい色：グレー, 白, ネイビー, セージグリーン, ベージュ。ニュートラルカラーをはさまずに強い赤や鮮やかなオレンジと合わせると、ピンクがくすんで見えるので避けましょう。他のパステルカラーを多く合わせすぎると、子どもっぽく見えることがあります。